@charset "UTF-8";
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../shared/fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../shared/fonts/inter-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/tajawal-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../shared/fonts/tajawal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/tajawal-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../shared/fonts/tajawal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/tajawal-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../shared/fonts/tajawal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../shared/fonts/tajawal-800-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../shared/fonts/tajawal-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 184px;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0.5rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: #181818;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: #e7e7e7;
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-inner-border-radius: 6px;
  --bs-dropdown-divider-bg: #e7e7e7;
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: none;
  --bs-dropdown-link-color: #181818;
  --bs-dropdown-link-hover-color: #181818;
  --bs-dropdown-link-hover-bg: #fafafa;
  --bs-dropdown-link-active-color: #181818;
  --bs-dropdown-link-active-bg: #fafafa;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 12px;
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 12px;
  --bs-dropdown-header-padding-y: 0;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}
.dropdown-menu > .dropdown-item:first-child,
.dropdown-menu > li:first-child .dropdown-item {
  border-top-left-radius: var(--bs-dropdown-inner-border-radius);
  border-top-right-radius: var(--bs-dropdown-inner-border-radius);
}
.dropdown-menu > .dropdown-item:last-child,
.dropdown-menu > li:last-child .dropdown-item {
  border-bottom-right-radius: var(--bs-dropdown-inner-border-radius);
  border-bottom-left-radius: var(--bs-dropdown-inner-border-radius);
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: #e7e7e7;
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: #e7e7e7;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #181818;
  --bs-dropdown-link-active-bg: #fafafa;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: transparent;
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0;
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: 0;
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: 0;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: none;
  transition: transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-left: auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
/* =============================================================
   Edaat design tokens - LAYER 1: PRIMITIVES
   Generated from the Figma file "Edaat new design"
   (page: EDAAT 2nd option, 5,569 product-UI nodes audited).

   Do NOT use these in product code. Use the semantic layer in
   edaat-tokens.css instead - it is what carries meaning and what
   theming swaps.
   ============================================================= */
:root {
  /* ---------- colour ---------- */
  --edaat-white: #ffffff;
  --edaat-black: #000000;
  --edaat-gray-50: #fafafa;
  --edaat-gray-100: #f4f4f4;
  --edaat-gray-200: #e7e7e7;
  --edaat-gray-300: #d5d5d5;
  --edaat-gray-400: #a0a0a0;
  --edaat-gray-500: #727272;
  --edaat-gray-600: #545454;
  --edaat-gray-700: #3a3a3a;
  --edaat-gray-800: #282828;
  --edaat-gray-900: #181818;
  --edaat-gray-950: #070707;
  --edaat-navy-50: #f3f7fe;
  --edaat-navy-100: #e5eefd;
  --edaat-navy-200: #c3d8fb;
  --edaat-navy-300: #90b6f9;
  --edaat-navy-400: #4a8af7;
  --edaat-navy-500: #0b60f4;
  --edaat-navy-600: #094fc8;
  --edaat-navy-700: #0740a1;
  --edaat-navy-800: #052d72;
  --edaat-navy-900: #05255b;
  --edaat-navy-950: #051838;
  --edaat-cyan-50: #f3fbfe;
  --edaat-cyan-100: #e4f6fe;
  --edaat-cyan-200: #c0ebfe;
  --edaat-cyan-300: #8bdafe;
  --edaat-cyan-400: #42c4ff;
  --edaat-cyan-500: #00afff;
  --edaat-cyan-600: #0090d1;
  --edaat-cyan-700: #007db6;
  --edaat-cyan-800: #005880;
  --edaat-cyan-900: #01425f;
  --edaat-cyan-950: #02293b;
  --edaat-indigo-50: #f7f7fa;
  --edaat-indigo-100: #ededf5;
  --edaat-indigo-200: #d5d6e9;
  --edaat-indigo-300: #b2b3d6;
  --edaat-indigo-400: #8385be;
  --edaat-indigo-500: #5456a1;
  --edaat-indigo-600: #484989;
  --edaat-indigo-700: #3a3b6f;
  --edaat-indigo-800: #2c2d54;
  --edaat-indigo-900: #22223f;
  --edaat-indigo-950: #161627;
  --edaat-green-50: #f5fcf9;
  --edaat-green-100: #e9f9f1;
  --edaat-green-200: #cdf1de;
  --edaat-green-300: #a3e6c3;
  --edaat-green-400: #6ad89f;
  --edaat-green-500: #35ca7d;
  --edaat-green-600: #299b60;
  --edaat-green-700: #238552;
  --edaat-green-800: #1b653e;
  --edaat-green-900: #154c2f;
  --edaat-green-950: #0e2f1e;
  --edaat-red-50: #fdf5f4;
  --edaat-red-100: #fbe8e7;
  --edaat-red-200: #f7cbc7;
  --edaat-red-300: #f09f98;
  --edaat-red-400: #e96359;
  --edaat-red-500: #e12c1e;
  --edaat-red-600: #b42318;
  --edaat-red-700: #951d14;
  --edaat-red-800: #71160f;
  --edaat-red-900: #54120d;
  --edaat-red-950: #340c09;
  --edaat-amber-50: #fdf8f4;
  --edaat-amber-100: #fcefe6;
  --edaat-amber-200: #f9dac5;
  --edaat-amber-300: #f5bb94;
  --edaat-amber-400: #f19251;
  --edaat-amber-500: #ed7624;
  --edaat-amber-600: #c15810;
  --edaat-amber-700: #9c470d;
  --edaat-amber-800: #76360a;
  --edaat-amber-900: #582909;
  --edaat-amber-950: #361a07;
  /* ---------- spacing (token name = px value) ---------- */
  --edaat-space-2: 2px;
  --edaat-space-4: 4px;
  --edaat-space-6: 6px;
  --edaat-space-8: 8px;
  --edaat-space-10: 10px;
  --edaat-space-12: 12px;
  --edaat-space-16: 16px;
  --edaat-space-20: 20px;
  --edaat-space-24: 24px;
  --edaat-space-32: 32px;
  --edaat-space-40: 40px;
  --edaat-space-48: 48px;
  --edaat-space-60: 60px;
  --edaat-space-80: 80px;
  --edaat-space-120: 120px;
  /* ---------- radius ---------- */
  --edaat-radius-2: 2px;
  --edaat-radius-4: 4px;
  --edaat-radius-6: 6px;
  --edaat-radius-8: 8px;
  --edaat-radius-10: 10px;
  --edaat-radius-12: 12px;
  --edaat-radius-16: 16px;
  --edaat-radius-20: 20px;
  --edaat-radius-full: 9999px;
  /* ---------- border width ---------- */
  --edaat-border-1: 1px;
  --edaat-border-2: 1.5px;
  --edaat-border-3: 2px;
  /* ---------- elevation ---------- */
  --edaat-shadow-xs: 0 1px 2px 0 rgba(16,24,40,0.05);
  --edaat-shadow-sm: 0 2px 6px 0 rgba(0,0,0,0.10);
  --edaat-shadow-md: 0 4px 6px -4px rgba(0,0,0,0.10);
  --edaat-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10);
  --edaat-shadow-xl: 0 32px 64px -12px rgba(16,24,40,0.14);
  --edaat-shadow-brand: 0 20px 84px 0 rgba(73,118,231,0.20);
  /* ---------- gradients (the logo) ---------- */
  --edaat-gradient-brand-bars: linear-gradient(90deg, #007db6 0%, #5456a1 50%, #299b60 100%);
  --edaat-gradient-brand-fade: linear-gradient(135deg, #052d72 0%, #007db6 100%);
  /* ---------- motion (conventional, not measured) ---------- */
  --edaat-duration-fast: 120ms;
  --edaat-duration-base: 200ms;
  --edaat-duration-slow: 320ms;
  --edaat-ease-standard: cubic-bezier(.2, .8, .3, 1);
  --edaat-ease-out: cubic-bezier(0, 0, .2, 1);
  --edaat-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  /* ---------- typography ---------- */
  --edaat-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --edaat-font-arabic: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --edaat-font-mono: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  --edaat-weight-regular: 400;
  --edaat-weight-medium: 500;
  --edaat-weight-semibold: 600;
  --edaat-weight-bold: 700;
  --edaat-type-display-lg-size: 42px;
  --edaat-type-display-lg-line: 48px;
  --edaat-type-display-lg-weight: 600;
  --edaat-type-display-lg-tracking: -0.02em;
  --edaat-type-display-md-size: 36px;
  --edaat-type-display-md-line: 44px;
  --edaat-type-display-md-weight: 600;
  --edaat-type-display-md-tracking: -0.02em;
  --edaat-type-display-sm-size: 28px;
  --edaat-type-display-sm-line: 36px;
  --edaat-type-display-sm-weight: 600;
  --edaat-type-display-sm-tracking: -0.01em;
  --edaat-type-heading-lg-size: 24px;
  --edaat-type-heading-lg-line: 32px;
  --edaat-type-heading-lg-weight: 700;
  --edaat-type-heading-lg-tracking: -0.01em;
  --edaat-type-heading-md-size: 20px;
  --edaat-type-heading-md-line: 30px;
  --edaat-type-heading-md-weight: 600;
  --edaat-type-heading-md-tracking: 0em;
  --edaat-type-heading-sm-size: 18px;
  --edaat-type-heading-sm-line: 28px;
  --edaat-type-heading-sm-weight: 600;
  --edaat-type-heading-sm-tracking: 0em;
  --edaat-type-body-lg-size: 18px;
  --edaat-type-body-lg-line: 28px;
  --edaat-type-body-lg-weight: 400;
  --edaat-type-body-lg-tracking: 0em;
  --edaat-type-body-md-size: 16px;
  --edaat-type-body-md-line: 24px;
  --edaat-type-body-md-weight: 400;
  --edaat-type-body-md-tracking: 0em;
  --edaat-type-body-sm-size: 14px;
  --edaat-type-body-sm-line: 20px;
  --edaat-type-body-sm-weight: 400;
  --edaat-type-body-sm-tracking: 0em;
  --edaat-type-body-xs-size: 12px;
  --edaat-type-body-xs-line: 20px;
  --edaat-type-body-xs-weight: 400;
  --edaat-type-body-xs-tracking: 0em;
  --edaat-type-caption-size: 12px;
  --edaat-type-caption-line: 16px;
  --edaat-type-caption-weight: 500;
  --edaat-type-caption-tracking: 0.01em;
}

/* =============================================================
   Edaat design tokens - LAYER 2: SEMANTIC + LAYER 3: COMPONENT

   This is the file product code consumes. In assets/scss/main.scss:

     @use 'modules/primitives';
     @use 'modules/tokens';

   Every value below traces to a colour, size or spacing actually
   measured in the Figma design. Where a token had no observed
   equivalent it is marked "synthesised".
   ============================================================= */
:root {
  /* ---------- Brand (from the logo) ---------- */
  --edaat-brand-navy: var(--edaat-navy-800); /* logo wordmark #052d72 — the primary brand colour */
  --edaat-brand-cyan: var(--edaat-cyan-700); /* logo bar 1 #007db6 */
  --edaat-brand-green: var(--edaat-green-600); /* logo bar 2 #299b60 — doubles as semantic success */
  --edaat-brand-indigo: var(--edaat-indigo-500); /* logo bar 3 #5456a1 */
  /* ---------- Surface ---------- */
  --edaat-bg-page: var(--edaat-white); /* observed 300 fills */
  --edaat-bg-subtle: var(--edaat-gray-50); /* observed #f9fafb */
  --edaat-bg-muted: var(--edaat-gray-100); /* observed #f3f4f6 */
  --edaat-bg-inverse: var(--edaat-navy-900); /* footer / dark bands */
  --edaat-bg-disabled: var(--edaat-gray-100); /* observed on disabled inputs */
  --edaat-bg-overlay: rgba(16, 24, 40, 0.48); /* synthesised - modal scrim */
  --edaat-bg-brand: var(--edaat-navy-800); /* observed #052d72, 384 fills - the primary brand fill */
  --edaat-bg-brand-hover: var(--edaat-navy-900); /* synthesised - one step down */
  --edaat-bg-brand-active: var(--edaat-navy-950); /* synthesised */
  --edaat-bg-brand-subtle: var(--edaat-navy-50); /* synthesised - brand tint */
  --edaat-bg-brand-subtle-active: var(--edaat-navy-100); /* synthesised - the pressed step under -subtle, so Outline has somewhere to go past its hover tint */
  --edaat-bg-secondary: var(--edaat-cyan-700); /* observed #007db6, 227 fills */
  --edaat-bg-secondary-hover: var(--edaat-cyan-800); /* synthesised */
  --edaat-bg-secondary-subtle: var(--edaat-cyan-50); /* observed as #007db6 @ 8% - replaced by a solid tint */
  --edaat-bg-accent: var(--edaat-indigo-500); /* observed #5456a1, 124 fills */
  --edaat-bg-accent-subtle: var(--edaat-indigo-50); /* synthesised */
  --edaat-bg-success: var(--edaat-green-700); /* observed #299b60 (green-600) darkened one step so white labels reach 4.5:1 */
  --edaat-bg-success-subtle: var(--edaat-green-50); /* observed #f3fcf6 on Bill Inquiry */
  --edaat-bg-error: var(--edaat-red-600); /* observed #b42318 */
  --edaat-bg-error-subtle: var(--edaat-red-50); /* synthesised */
  --edaat-bg-warning: var(--edaat-amber-500); /* observed #ed7624 on Invoice Details */
  --edaat-bg-warning-subtle: var(--edaat-amber-50); /* synthesised */
  --edaat-bg-info: var(--edaat-cyan-700); /* brand cyan doubles as info */
  --edaat-bg-info-subtle: var(--edaat-cyan-50); /* synthesised */
  /* ---------- Text ---------- */
  --edaat-text-heading: var(--edaat-gray-900); /* observed #0f172a, 37 uses */
  --edaat-text-primary: var(--edaat-gray-700); /* REPLACES #3a3a3a (203 uses) - see AUDIT decision 1 */
  --edaat-text-secondary: var(--edaat-gray-600); /* observed #6a7282 / #6c737f - moved a step darker for AA */
  --edaat-text-tertiary: var(--edaat-gray-500); /* observed #99a1af (gray-400) failed AA at 2.6:1 */
  --edaat-text-placeholder: var(--edaat-gray-500); /* gray-400 failed AA at 2.6:1 - placeholders must pass */
  --edaat-text-disabled: var(--edaat-gray-300); /* synthesised - disabled text is exempt from contrast minimums */
  --edaat-text-inverse: var(--edaat-white); /* observed 99 uses on brand fills */
  --edaat-text-brand: var(--edaat-navy-800); /* observed #052d72, 85 text uses */
  --edaat-text-link: var(--edaat-cyan-700); /* observed #007db6, 44 text uses */
  --edaat-text-link-hover: var(--edaat-cyan-800); /* synthesised */
  --edaat-text-error: var(--edaat-red-600); /* observed #b42318, 87 text uses - exact match */
  /* green-900 since 2026-09-10, moved WITH the badge tint. Its only
     consumer is .edaat-badge--success, and this token exists to be legible
     on the success fill: green-800 read 4.92:1 on green-300 but only
     4.01:1 once the fill went to green-400, which is under AA. green-900
     is 5.67:1 there, and 9.97:1 on plain white, so it is safe for a success
     message on a white card too. (Historic note: green-700 was 4.44:1 on
     the original green-50 tint, which is why it was never used.) */
  --edaat-text-success: var(--edaat-green-900);
  --edaat-text-warning: var(--edaat-amber-700); /* amber-600 landed at 4.49:1 - one step darker */
  --edaat-text-on-brand: var(--edaat-white); /* observed */
  --edaat-text-on-warning: var(--edaat-gray-900); /* white on amber is 2.9:1 - warning surfaces take dark text */
  /* ---------- Border ---------- */
  --edaat-border-subtle: var(--edaat-gray-200); /* observed #e5e7eb - decorative dividers only */
  --edaat-border-default: var(--edaat-gray-300); /* observed #d2d6db, 39 strokes - decorative only, 1.5:1 */
  --edaat-border-strong: var(--edaat-gray-500); /* observed #9da4ae (gray-400) was 2.6:1 - interactive borders need 3:1 */
  --edaat-border-brand: var(--edaat-navy-800); /* observed */
  --edaat-border-secondary: var(--edaat-cyan-700); /* observed #007db6, 63 strokes */
  --edaat-border-accent: var(--edaat-indigo-500); /* observed #5456a1, 40 strokes */
  --edaat-border-error: var(--edaat-red-600); /* observed - consolidates #dc3545 and #e45270 */
  --edaat-border-success: var(--edaat-green-600); /* observed */
  --edaat-border-focus: var(--edaat-cyan-600); /* REPLACES #4a3aff (106 strokes) - see AUDIT decision 3 */
  --edaat-border-disabled: var(--edaat-gray-200); /* synthesised */
  /* ---------- Icon ---------- */
  --edaat-icon-default: var(--edaat-gray-500); /* observed */
  --edaat-icon-strong: var(--edaat-gray-700); /* observed */
  --edaat-icon-subtle: var(--edaat-gray-400); /* observed */
  --edaat-icon-brand: var(--edaat-navy-800); /* observed */
  --edaat-icon-secondary: var(--edaat-cyan-700); /* observed */
  --edaat-icon-inverse: var(--edaat-white); /* observed */
  --edaat-icon-error: var(--edaat-red-600); /* observed */
  --edaat-icon-success: var(--edaat-green-600); /* observed */
  --edaat-icon-warning: var(--edaat-amber-500); /* observed */
  --edaat-icon-disabled: var(--edaat-gray-300); /* synthesised */
  /* ---------- Control (inputs, checkbox, radio, switch) ---------- */
  --edaat-control-bg: var(--edaat-white); /* observed */
  --edaat-control-bg-hover: var(--edaat-gray-50); /* synthesised */
  --edaat-control-bg-disabled: var(--edaat-gray-100); /* observed */
  --edaat-control-border: var(--edaat-gray-500); /* checkbox / radio boundary - an unchecked control IS its border, so this must clear WCAG 1.4.11 at 3:1. Text fields use input-border, which is deliberately lighter */
  --edaat-control-border-hover: var(--edaat-gray-600); /* synthesised - one step darker than the selection border */
  --edaat-control-border-error: var(--edaat-red-600); /* observed */
  --edaat-control-checked-bg: var(--edaat-navy-800); /* observed on Checkbox / Radio Label */
  --edaat-control-checked-border: var(--edaat-navy-800); /* observed */
  --edaat-control-checked-mark: var(--edaat-white); /* observed */
  /* ---------- Brand gradients (the logo bars) ---------- */
  --edaat-bg-gradient-brand: var(--edaat-gradient-brand-bars); /* the three logo bars — observed 13x in the design */
  --edaat-bg-gradient-hero: var(--edaat-gradient-brand-fade); /* navy to cyan, for hero and header bands */
  /* ---------- Layout ---------- */
  --edaat-container-max: 1280px; /* content column - fits both the 1366 and 1440 artboards */
  --edaat-container-gutter: var(--edaat-space-60); /* observed 60px section padding, 132 uses */
  --edaat-section-gap: var(--edaat-space-80); /* observed 80px, 63 uses */
  --edaat-navbar-height: 64px; /* observed on Navbar */
  --edaat-field-height: 40px; /* observed 40px on Text Input in the shipped design */
  --edaat-field-height-sm: 36px; /* observed on compact inputs */
  --edaat-focus-ring-width: 2px; /* synthesised */
  --edaat-focus-ring-offset: 2px; /* synthesised */
  /* ---------- Typography ----------
     Inter, and only Inter. Both roles point at the same family so a
     future display face can be swapped in at one place.        */
  --edaat-font-body: var(--edaat-font-sans);
  --edaat-font-heading: var(--edaat-font-sans);
  /* ---------- Data visualisation ---------- */
  /* Ordered by the logo: navy wordmark, then the three bars. */
  --edaat-chart-1: var(--edaat-navy-800); /* logo wordmark */
  --edaat-chart-2: var(--edaat-cyan-700); /* logo bar 1 */
  --edaat-chart-3: var(--edaat-green-600); /* logo bar 2 */
  --edaat-chart-4: var(--edaat-indigo-500); /* logo bar 3 */
  --edaat-chart-5: var(--edaat-cyan-400); /* extension — lighter cyan */
  --edaat-chart-6: var(--edaat-indigo-300); /* extension — lighter indigo */
}

/* One font family: Inter. There is no script-based family swap, because
   Edaat is an Inter product — the IBM Plex Sans Arabic that showed up on 421
   nodes came in with the `Components Library - New` team library, not from the
   design (294 of those nodes sat inside its instances, and 310 carried Latin
   text). See AUDIT Decision 8.

   RTL still works: every component here uses logical properties
   (padding-inline-start, margin-inline-end) so setting dir="rtl" mirrors the
   layout without touching type. What RTL does NOT give you is Arabic glyphs —
   Inter has none. If Arabic ships, add a face to _primitives.css and
   reintroduce a family swap here.                                          */
/* ---------- Component tokens (Layer 3) ---------- */
:root {
  /* -- Button -- */
  --edaat-button-radius: var(--edaat-radius-full); /* CORRECTED: 110 of 123 button instances are pills (radius 9999 or 50). The earlier 8px was an unverified assumption */
  --edaat-button-height-lg: 48px; /* synthesised - no instance evidence; for hero CTAs */
  --edaat-button-height-md: 40px; /* CORRECTED: observed on 89 of 123 instances - the default */
  --edaat-button-height-sm: 32px; /* CORRECTED: observed on 27 instances */
  --edaat-button-padding-x: var(--edaat-space-16); /* observed 16px */
  --edaat-button-gap: var(--edaat-space-4); /* MEASURED on Control/Button: gap 4 between label and icon slot. The navbar Sign in pill is the one 8 — set locally */
  --edaat-button-primary-bg: var(--edaat-bg-brand); /* navy */
  --edaat-button-primary-fg: var(--edaat-text-on-brand); /* white */
  --edaat-button-secondary-bg: var(--edaat-bg-secondary); /* cyan */
  --edaat-button-secondary-fg: var(--edaat-text-on-brand); /* white */
  --edaat-button-outline-border: var(--edaat-border-brand); /* navy outline variant */
  --edaat-button-outline-fg: var(--edaat-text-brand); /* navy */
  --edaat-button-danger-bg: var(--edaat-bg-error); /* destructive */
  --edaat-button-disabled-bg: var(--edaat-bg-disabled);
  --edaat-button-disabled-fg: var(--edaat-text-disabled);
  /* -- Input / Select / Textarea -- */
  --edaat-input-radius: var(--edaat-radius-4); /* observed 4px */
  --edaat-input-height: var(--edaat-field-height); /* 40px */
  --edaat-input-padding-x: calc(var(--edaat-space-12) - 1px); /* observed 12px, 204 uses. Figma CENTRES its stroke so a 1px border adds nothing to the frame; a CSS border adds 2. The border comes back out of the padding so the field lands on Figma's own width AND the text starts at 12 from the edge - the same correction Control/Button already carries */
  --edaat-input-bg: var(--edaat-control-bg);
  --edaat-input-border: var(--edaat-gray-400); /* shipped #a0a0a0 (2.6:1) - the original Figma value. gray-500 (4.8:1) overpowered the field content in review; the field is discoverable by its fill, label and caret, and hover carries the state change */
  --edaat-input-border-hover: var(--edaat-gray-500); /* shipped #727272 - one clear step darker, so hover registers */
  --edaat-input-border-focus: var(--edaat-border-focus);
  --edaat-input-border-error: var(--edaat-control-border-error);
  --edaat-input-fg: var(--edaat-text-primary);
  --edaat-input-placeholder: var(--edaat-text-placeholder);
  --edaat-input-label-gap: var(--edaat-space-8); /* observed 8px */
  /* -- Card / Panel -- */
  --edaat-card-radius: var(--edaat-radius-10); /* observed 10px - radius/10 added to the scale for it, superseding AUDIT decision 2 */
  --edaat-card-bg: var(--edaat-bg-page);
  --edaat-card-border: var(--edaat-border-subtle);
  --edaat-card-padding: var(--edaat-space-24); /* observed 24px, 122 uses */
  --edaat-card-shadow: var(--edaat-shadow-sm); /* observed 0 2 6 rgba(0,0,0,.1) */
  /* -- Modal / Dialog -- */
  --edaat-modal-radius: var(--edaat-radius-16); /* observed 16px */
  --edaat-modal-bg: var(--edaat-bg-page);
  --edaat-modal-shadow: var(--edaat-shadow-xl); /* observed 0 32 64 -12 */
  --edaat-modal-padding: var(--edaat-space-24); /* observed */
  --edaat-modal-width-sm: 366px; /* observed on the small Modal frames */
  --edaat-modal-width-md: 600px; /* observed on the standard Modal frames */
  --edaat-modal-scrim: var(--edaat-bg-overlay);
  /* -- Table -- */
  --edaat-table-header-bg: var(--edaat-bg-muted); /* observed on Invoice Details */
  --edaat-table-header-fg: var(--edaat-text-secondary);
  --edaat-table-row-border: var(--edaat-border-subtle);
  --edaat-table-cell-padding-x: var(--edaat-space-16); /* observed 16px, 426 uses */
  --edaat-table-cell-padding-y: var(--edaat-space-12); /* observed 12px */
  /* -- Badge / Tag -- */
  --edaat-badge-radius: var(--edaat-radius-full); /* observed pill, 147 uses */
  --edaat-badge-padding-x: var(--edaat-space-10); /* observed 10px */
  --edaat-badge-padding-y: var(--edaat-space-2); /* observed 2px */
  /* -- Stepper (registration flows) -- */
  --edaat-stepper-dot-size: 32px; /* observed on Client/Biller Registration */
  --edaat-stepper-active-bg: var(--edaat-bg-brand);
  --edaat-stepper-complete-bg: var(--edaat-bg-success);
  --edaat-stepper-pending-bg: var(--edaat-bg-muted);
  --edaat-stepper-track: var(--edaat-border-default);
}

/* Light mode only. Edaat ships one theme, so there is no dark block and
   no theme switching at all. Every token above is the final value.

   Deliberate, not an omission. If a dark
   theme is ever wanted, rebuild with:
     node tools/build-semantic.js . with-dark                            */
/* ====================== 1. TYPE UTILITIES ====================== */
/* ---------- Typography utility classes ---------- */
.edaat-h1 {
  font-family: var(--edaat-font-heading);
  font-size: var(--edaat-type-display-lg-size);
  line-height: var(--edaat-type-display-lg-line);
  font-weight: var(--edaat-type-display-lg-weight);
  letter-spacing: var(--edaat-type-display-lg-tracking);
}

.edaat-h2 {
  font-family: var(--edaat-font-heading);
  font-size: var(--edaat-type-display-sm-size);
  line-height: var(--edaat-type-display-sm-line);
  font-weight: var(--edaat-type-display-sm-weight);
  letter-spacing: var(--edaat-type-display-sm-tracking);
}

.edaat-h3 {
  font-family: var(--edaat-font-heading);
  font-size: var(--edaat-type-heading-lg-size);
  line-height: var(--edaat-type-heading-lg-line);
  font-weight: var(--edaat-type-heading-lg-weight);
  letter-spacing: var(--edaat-type-heading-lg-tracking);
}

.edaat-h4 {
  font-family: var(--edaat-font-heading);
  font-size: var(--edaat-type-heading-md-size);
  line-height: var(--edaat-type-heading-md-line);
  font-weight: var(--edaat-type-heading-md-weight);
  letter-spacing: var(--edaat-type-heading-md-tracking);
}

.edaat-h5 {
  font-family: var(--edaat-font-heading);
  font-size: var(--edaat-type-heading-sm-size);
  line-height: var(--edaat-type-heading-sm-line);
  font-weight: var(--edaat-type-heading-sm-weight);
  letter-spacing: var(--edaat-type-heading-sm-tracking);
}

.edaat-body-lg {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
  letter-spacing: var(--edaat-type-body-lg-tracking);
}

.edaat-body {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  letter-spacing: var(--edaat-type-body-md-tracking);
}

.edaat-body-sm {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-weight: var(--edaat-type-body-sm-weight);
  letter-spacing: var(--edaat-type-body-sm-tracking);
}

.edaat-label {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-weight: var(--edaat-type-body-sm-weight);
  letter-spacing: var(--edaat-type-body-sm-tracking);
}

.edaat-caption {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-caption-size);
  line-height: var(--edaat-type-caption-line);
  font-weight: var(--edaat-type-caption-weight);
  letter-spacing: var(--edaat-type-caption-tracking);
}

.edaat-button {
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-weight: var(--edaat-type-body-sm-weight);
  letter-spacing: var(--edaat-type-body-sm-tracking);
}

/* ====================== 2. DOCUMENT BASE ====================== */
/* =============================================================
   Edaat components — LAYER 4

   Built from the shipped Figma design (page "New Design System
   Screens"). Consumes Layer 2/3 tokens only; never a primitive
   directly, except through the overrides block below.

     @import "./_primitives.css";
     @import "./edaat-tokens.css";
     @import "./edaat-components.css";

   RTL: every rule uses logical properties, so dir="rtl" mirrors
   the layout. Inter has no Arabic glyphs — see edaat-tokens.css.
   ============================================================= */
/* ---------- Layout tokens for this flow ----------
   Everything else comes from edaat-tokens.css. The six values that
   used to be overridden here now live in the generators, so this
   file no longer contradicts the token layer.                    */
:root {
  /* Registration layout — the split is the BOOTSTRAP GRID, not a ratio
     written here. `assets/shared/bootstrap/bootstrap-grid.min.css` (grid only: no
     Reboot, no components, so it does not touch our type or controls)
     carries it as `col-lg-5` for the image and `col-lg-7` for the form,
     and Bootstrap's own breakpoints do the stacking.

     Figma draws 60 whitespace / hero 600 / pane 706 at 1366, which is
     45.9 / 54.1 of the content width. Twelve columns cannot express that
     exactly; 5/7 is the nearest and keeps the image the narrower half
     (41.7 / 58.3). The only layout number still written by hand is
     `form-max`, which stops the form column running past a readable
     measure on a wide screen — a 40px input a metre wide scans badly. */
  --edaat-reg-form-max: 820px; /* form fills its column, then stops and centres */
  --edaat-reg-column-pad-top: var(--edaat-space-32);
  --edaat-reg-stack-gap: var(--edaat-space-24);
  --edaat-reg-field-gap: var(--edaat-space-20);
  --edaat-reg-row-gap: 10px;
  --edaat-reg-name-gap: var(--edaat-space-8);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* A `display` declaration on a class beats the UA rule for [hidden],
   so every step panel would stay visible. Restore the attribute's
   meaning once, globally, rather than guarding each component. */
[hidden] {
  display: none !important;
}

/* ============ 3. REBOOT NEUTRALISATION (compatibility shim) ============ */
/* ========================= Reboot neutralisation =========================
   A COMPATIBILITY SHIM, not a design layer. Nothing here is a design
   decision and nothing here carries Figma provenance — every rule exists to
   undo something Bootstrap's Reboot changed, so that linking the full
   bootstrap.min.css / bootstrap.rtl.min.css leaves the rendered output
   exactly where it was.

   Why it exists
   -------------
   The pages used to link bootstrap-grid.min.css, which carries no Reboot.
   They now link the FULL sheet, so Bootstrap's full utility and component
   surface is available to build on (gap-*, text-*, rounded, border, bg-*,
   position-*, w/h, shadow, fw-*, fs-*). Reboot comes with it, and Reboot
   restyles bare elements — the exact things this system measures from Figma.

   Measured before this file existed: 1,360 elements moved across the 48-view
   snapshot. The overwhelming majority never painted (a link colour inherited
   onto an <img>, a border colour where the width is 0), but "never painted"
   is not the standard this project holds itself to, and an unstated value is
   a dependency on whichever stylesheet loads first.

   Where it sits
   -------------
   Early in the Edaat cascade — right after base/_base.scss, before any
   component. So it beats Reboot (Bootstrap is a separate, earlier file) while
   every Edaat component still beats it. It must never grow into a place where
   real values live; a real value belongs in the component that owns it.

   `revert` rather than literals
   -----------------------------
   Reboot's resets are author-origin. `revert` rolls a property back to the
   USER-AGENT origin — precisely "give me what the browser would have given me
   if Reboot were not here". That is what the baseline was captured against, so
   it is exact, and it stays exact if Bootstrap changes its values in a future
   release. Writing the literals instead (#0000EE, 13.3333px Arial) would pin
   this file to today's UA defaults and read like design intent, which it is
   not.
   ========================================================================= */
/* ---- Links ----
   Reboot: `a { color: var(--bs-link-color) }`. Edaat's anchors that carry
   their own colour are unaffected (their rules come later); the ones that do
   not are the logo and partner links, which wrap an image and never paint
   their own colour at all. Reverted so the computed value is the one the
   measured baseline holds. */
a {
  color: revert;
}

/* ---- Form controls ----
   Reboot: `button, input, optgroup, select, textarea { font-family: inherit;
   font-size: inherit; line-height: inherit }`.

   In this codebase a control's own font almost never paints — the label sits
   in a child that states its own size, e.g. .edaat-select__value inside
   .edaat-select__button. But `almost never` is not never, and the inherited
   size also feeds `em`-based lengths and the intrinsic size of an empty
   control, so it is reverted rather than argued about.

   `font-family` is NOT reverted for .edaat-* controls further down: several
   state `font-family: inherit` deliberately, and those rules come later and
   still win. */
button,
input,
optgroup,
select,
textarea {
  font-family: revert;
  font-size: revert;
  line-height: revert;
}

/* ---- Horizontal rules ----
   Reboot: `hr { color: inherit; border: 0; border-top: var(--bs-border-width)
   solid; opacity: .25 }`. `.edaat-legal__rule` already states its own
   block-size, margin, border and opacity — that was the fix recorded on
   2026-09-16 — but not `color`, which Reboot now inherits rather than leaving
   at the UA grey. */
hr {
  color: revert;
}

/* ---- Typed text inputs ----
   Reboot: `[type="tel"], [type="url"], [type="email"], [type="number"] {
   direction: ltr }`. Bootstrap forces those four LTR on the reasoning that an
   address or a phone number reads left-to-right whatever the page direction.

   That is a defensible choice and arguably an improvement, but it is a CHANGE:
   the Arabic Contact and Registration forms render these fields RTL today and
   the measured baseline holds that. Reverted to keep parity; if Edaat decides
   it prefers Bootstrap's behaviour, DELETE this rule rather than overriding it
   somewhere else, and re-baseline. */
[type=tel],
[type=url],
[type=email],
[type=number] {
  direction: revert;
}

/* ====================== 4. THE PAGE GUTTER ====================== */
/* ==================== One page gutter ====================
   The navbar, every content band and the footer all start on the same line,
   at every width. They used to run three different ramps — the navbar
   60/32/24/20/16, the footer 60/40/20, and each page's own container
   somewhere between 16 and 60 — so the three horizontal rhythms of a page
   disagreed at almost every breakpoint.

   One token now drives all of them. The two most-measured points are kept
   exactly: 60 at desktop and 24 at 768, which is what the navbar and most
   bands already used.

   NOT on this token, deliberately:
     .edaat-navbar--floating   the pill's 32/20 is padding INSIDE a centred
                               798 pill, not a page gutter
     .edaat-footer-compact--bar the auth footer has its own measured contract
   ========================================================

   THE RAMP IS THE PLATFORM STANDARD, not a house number. Phones take 16 and
   tablets 24, which is what Material 3 specifies for its compact and medium
   window classes and what Apple's HIG uses for directional layout margins;
   Bootstrap's container lands on 16 too. It used to be a flat 20 on every
   phone — comfortable, but arbitrary, and 4px of margin is 4px of measure
   that a 320 screen cannot spare. The steps above 992 are the design's own
   measured values and are unchanged.

   Breakpoints are BOOTSTRAP's, per §7 — the grid does the splitting and the
   gutter has to change on the same lines the grid does, not on Material's.

   EVERY page-level horizontal inset reads this token — 2026-09-13. Before
   that, twelve sections read it and eight more carried a SECOND scale of
   their own (24 at 991, 20 at 767). The two disagreed in both directions:
   below 576 the token said 16 and the strays said 20, and between 576 and
   767 the token said 24 and the strays said 20. So scrolling a phone down
   Home, the content edge stepped in and out by 4px from section to section,
   and the hero copy did not line up with the navbar logo above it.

   If you change the phone step, change --edaat-navbar-float with it. The
   floating pill bleeds out by float and pads back in by float, so its logo
   lands on 2 x float — that has to equal the gutter or the bar stops
   agreeing with the page. 16/8 and 24/12 both hold today. */
:root {
  --edaat-gutter: var(--edaat-space-60);
}

@media (max-width: 1199.98px) {
  :root {
    --edaat-gutter: var(--edaat-space-40);
  }
}
@media (max-width: 991.98px) {
  :root {
    --edaat-gutter: var(--edaat-space-24);
  }
}
@media (max-width: 575.98px) {
  :root {
    --edaat-gutter: var(--edaat-space-16);
  }
}
/* How far the floating bar sits off the screen edge below lg — and, because
   the two are the same number, how much padding it puts back inside so its
   first element still lands on the gutter. It has to shrink with the gutter:
   12 against a 16 gutter would leave the pill 4px from the edge. */
:root {
  --edaat-navbar-float: var(--edaat-space-12);
}

@media (max-width: 575.98px) {
  :root {
    --edaat-navbar-float: var(--edaat-space-8);
  }
}
body.edaat {
  margin: 0;
  font-family: var(--edaat-font-body);
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-text-primary);
  background: var(--edaat-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ---------- First-paint guard ----------
   js/edaat-lang.js sets dir and lang while <head> parses, so the layout is
   never seen flipping. The copy cannot be swapped that early — <body> does not
   exist yet — so an Arabic page would show one beat of English. This hides the
   body for exactly that beat, and edaat-lang.js arms a 1.5s failsafe the moment
   it sets the attribute, so a broken or missing dictionary can never leave the
   page blank.

   IT LIVES IN THE SHARED CORE, NOT IN overrides/_rtl.scss, AND THAT IS THE
   POINT. It sat in the Arabic-only sheet until 2026-09-21, which made it
   useless for the one moment it existed for: edaat-lang.js switches the
   <link> to main.rtl.css, and until that file arrives the guard is not in the
   document either. The page therefore painted with NO stylesheet at all —
   raw HTML — the markup visible before any styling reached it.
   MEASURED with the cache disabled and the connection throttled: English 0
   bare frames, Arabic 1, with the body visible and zero sheets applied.

   Here, it is carried by main.css, which is render-blocking and already
   parsed before edaat-lang.js can run — a <script> does not execute while a
   preceding stylesheet is still loading, so by the time the attribute is set
   this rule is guaranteed live.

   IT COSTS ENGLISH NOTHING. The selector needs an attribute that only the
   Arabic path ever sets, so an English page has no rule to match and no
   behaviour to change; the 72-view snapshot proves it byte for byte. It is
   direction-neutral, with no physical left/right, so it belongs in the core
   by the rule validate-rtl-parity.js enforces. */
html[data-lang-loading] body {
  visibility: hidden;
}

/* ====================== 5. UTILITIES ====================== */
/* ============================ Utilities ============================ */
.edaat-visually-hidden {
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================ Buttons ============================ */
.edaat-btn {
  display: inline-flex;
  gap: var(--edaat-button-gap);
  height: var(--edaat-button-height-md);
  /* Figma draws Control/Button at 94 (Bill Inquiry) and 102 (Sign in)
     — a frame width that excludes the stroke, because Figma centres it
     and the filled variant has none at all. Every button here carries a
     1px border so the variants share one box, so the border comes back
     out of the inline padding: 15 + 1 lands the label on 16, and the
     box on the width Figma draws. */
  padding-inline: calc(var(--edaat-button-padding-x) - 1px);
  /* THE BOX IS STATED ON BOTH AXES so Bootstrap's .btn can sit under it.
     `.btn` brings `padding-block: .375rem` and `text-align: center`, and
     until these two lines existed the button had neither — it inherited the
     UA default, which is 1px on <button> and 0 on <a>. Two consequences:
     the component's box depended on which element it was written as, and
     adding `.btn` moved it to 6px.

     Neither value can shift anything: the box is a fixed `height`, laid out
     inline-flex and centred on both axes, so block padding has no room to
     act and `text-align` is inert next to `justify-content: center`.
     MEASURED across 72 views — padding and text-align are the only computed
     properties that move, and no bounding box changes by any amount. */
  padding-block: 0;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--edaat-button-radius);
  font-family: inherit;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none; /* several buttons are <a> (Bill Inquiry, modal links) and were rendering underlined */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.edaat-btn:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
  /* KILLS BOOTSTRAP'S FOCUS HALO, which arrives with `.btn-primary` /
     `.btn-outline-primary` as `--bs-btn-focus-box-shadow` and paints a 4px
     ring in STOCK BOOTSTRAP BLUE — rgb(13,110,253), a colour this system does
     not contain. The reason it is not Edaat's brand is worth knowing: the
     pages link the VENDORED bootstrap.min.css, which was built with
     Bootstrap's own variables. modules/_bootstrap.scss is the copy themed to
     Edaat's measured values, and it deliberately does not compile buttons.
     So any `.btn-*` variant brings Bootstrap's palette with it, not ours.

     Invisible in a resting snapshot — it only exists on :focus-visible, which
     is why it was caught by tabbing rather than by the 72-view diff. */
  box-shadow: none;
}

/* ---------------- THE PRESSED STATE IS HANDED BACK TO BOOTSTRAP ----------------

   Every variant below defines Bootstrap's OWN `--bs-btn-hover-*` and
   `--bs-btn-active-*` custom properties. That is not decoration — it is the
   whole mechanism, and it is why none of this needs `!important` or a
   specificity bump.

   Bootstrap paints the pressed state from

     .btn-check:checked+.btn, .btn.active, .btn.show,
     .btn:first-child:active, :not(.btn-check)+.btn:active
       { color: var(--bs-btn-active-color);
         background-color: var(--bs-btn-active-bg);
         border-color: var(--bs-btn-active-border-color) }

   which is a CLASS + TWO PSEUDO-CLASSES — specificity 3. Every rule in this
   file is one class deep, so a same-shape `.edaat-btn--primary:active` here
   CANNOT outrank it. It also always matches: a `.btn` is either :first-child
   or has a preceding sibling, so one of those two selectors covers every
   button on every page.

   And only the `.btn-*` COLOUR variants define the active trio — which this
   component deliberately does not carry (see the :focus-visible note above).
   So all three resolved to nothing, and an undefined var() is invalid at
   computed-value time: per spec it commits the winning declaration to `unset`
   rather than falling through to a lower-specificity rule. MEASURED on
   registration.html with a real CDP mousePressed held open:

     Primary  navy #052d72 -> background TRANSPARENT, label #3a3a3a grey,
                              and a grey 1px ring where there was no border
     Outline  navy label   -> label and border both #3a3a3a grey
     Cancel   navy label   -> label #3a3a3a grey, plus a grey ring

   i.e. every button LOST ITS FILL the moment it was pressed, because
   `background-color` is not inherited (unset -> transparent) while `color` is
   (unset -> the surrounding #3a3a3a), and `border-color` unset -> currentColor.

   Defining the variables makes Bootstrap's own rule paint Edaat's colours.
   Nothing is overridden, the vendored file is untouched, and `.btn.active` /
   `.btn.show` — the dropdown-toggle and toggle-button states — come out right
   for free rather than needing their own rules later.

   The `:active` rules alongside them are the no-Bootstrap fallback: they are
   what paints a `.edaat-btn` written WITHOUT `.btn`. Where `.btn` is present
   Bootstrap's specificity-3 rule wins, and both produce the same colour, so
   the two paths agree by construction instead of by luck.

   Figma is the source for the RESTING fill of each variant. It is NOT the
   source for these two states: Control/Button (2480:3335) is drawn with a
   Style x Size variant matrix only — Primary/Secondary/Outline/Danger/Ghost
   crossed with Large/Medium/Small — and carries no State axis at all, unlike
   Form/Input (2516:3358), which does draw State=Hover and State=Focus. So the
   hover step already in this file and the pressed step added beside it are
   both SYNTHESISED, one ramp step apart, and are marked as such in the token
   layer.
   --------------------------------------------------------------------------- */
.edaat-btn--primary {
  background: var(--edaat-button-primary-bg);
  color: var(--edaat-button-primary-fg);
  --bs-btn-hover-color: var(--edaat-button-primary-fg);
  --bs-btn-hover-bg: var(--edaat-bg-brand-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--edaat-button-primary-fg);
  --bs-btn-active-bg: var(--edaat-bg-brand-active);
  --bs-btn-active-border-color: transparent;
}

/* color and border-color are restated on every :hover/:focus-visible below,
   not just background. Bootstrap's `.btn:hover` / `.btn:focus-visible` carry
   the SAME specificity (one class + one pseudo-class) as these rules, and
   they read --bs-btn-hover-color, which only a `.btn-*` COLOUR variant ever
   defined — this component intentionally carries none. Left unset, that made
   `.btn:hover`'s `color` declaration invalid at computed-value time, which
   resolves to the INHERITED value (the surrounding text colour) rather than
   falling back to this rule, and its `border-color` resolved to the `.btn`
   base's own --bs-btn-hover-border-color (transparent) — so every label greyed
   out and the outline border vanished on hover/focus until every colour was
   restated here, not only background.

   Each variant now ALSO defines the --bs-btn-hover-* trio itself, so those
   declarations are valid rather than merely outranked, and the two mechanisms
   land on the same colour instead of racing. These restatements stay: they are
   what paints a `.edaat-btn` written without `.btn`. */
.edaat-btn--primary:hover,
.edaat-btn--primary:focus-visible {
  background: var(--edaat-bg-brand-hover);
  color: var(--edaat-button-primary-fg);
  border-color: transparent;
}

/* AFTER the :hover rule, never before. Both are one class + one pseudo-class,
   so while the pointer is held down — when :hover and :active are BOTH live —
   only source order separates them. Every variant below follows the same order
   for the same reason. */
.edaat-btn--primary:active {
  background: var(--edaat-bg-brand-active);
  color: var(--edaat-button-primary-fg);
  border-color: transparent;
}

.edaat-btn--outline {
  background: transparent;
  color: var(--edaat-button-outline-fg);
  border-color: var(--edaat-button-outline-border);
  --bs-btn-hover-color: var(--edaat-button-outline-fg);
  --bs-btn-hover-bg: var(--edaat-bg-brand-subtle);
  --bs-btn-hover-border-color: var(--edaat-button-outline-border);
  --bs-btn-active-color: var(--edaat-button-outline-fg);
  --bs-btn-active-bg: var(--edaat-bg-brand-subtle-active);
  --bs-btn-active-border-color: var(--edaat-button-outline-border);
}

.edaat-btn--outline:hover,
.edaat-btn--outline:focus-visible {
  background: var(--edaat-bg-brand-subtle);
  color: var(--edaat-button-outline-fg);
  border-color: var(--edaat-button-outline-border);
}

.edaat-btn--outline:active {
  background: var(--edaat-bg-brand-subtle-active);
  color: var(--edaat-button-outline-fg);
  border-color: var(--edaat-button-outline-border);
}

.edaat-btn--ghost {
  background: transparent;
  color: var(--edaat-text-brand);
  border-color: transparent;
  --bs-btn-hover-color: var(--edaat-text-brand);
  --bs-btn-hover-bg: var(--edaat-bg-subtle);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--edaat-text-brand);
  --bs-btn-active-bg: var(--edaat-bg-muted);
  --bs-btn-active-border-color: transparent;
}

.edaat-btn--ghost:hover,
.edaat-btn--ghost:focus-visible {
  background: var(--edaat-bg-subtle);
  color: var(--edaat-text-brand);
  border-color: transparent;
}

.edaat-btn--ghost:active {
  background: var(--edaat-bg-muted);
  color: var(--edaat-text-brand);
  border-color: transparent;
}

.edaat-btn--sm {
  height: var(--edaat-button-height-sm);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
}

/* Icon-only Control/Button. Same box as the labelled variants so it lines
   up in any row — 40 default, 32 at --sm — with the label padding taken
   off, because an icon-only control centres its glyph instead. The pill
   radius and every variant colour still apply: this is the same button,
   not a second one.
   The glyph is INLINED svg rather than <img> so it takes the button's own
   label colour (navy on Outline, white on Primary). An <img> cannot follow
   currentColor and would be wrong on one of the two. */
.edaat-btn--icon {
  inline-size: var(--edaat-button-height-md);
  padding-inline: 0;
  gap: 0;
}

.edaat-btn--icon.edaat-btn--sm {
  inline-size: var(--edaat-button-height-sm);
}

.edaat-btn--icon > svg {
  display: block;
  flex: 0 0 auto;
}

/* Navbar pills keep their drawn height, insets and type: Bill Inquiry
   12 and body-sm Medium, Sign in 16 and body-sm Semi Bold. Control/Button
   is body-md; Nav/Navbar draws its two pills a step down at 14/20, which
   is why the size is set here rather than on the button. */
.edaat-navbar__actions .edaat-btn {
  height: var(--edaat-button-height-md);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
}

.edaat-navbar__actions .edaat-btn--outline {
  padding-inline: calc(var(--edaat-space-12) - 1px);
  gap: var(--edaat-space-4);
  font-weight: 500;
}

.edaat-navbar__actions .edaat-btn--primary {
  gap: var(--edaat-space-8);
} /* the one button drawn at 8 */
/* Control/Button icon slot — Figma draws a 20x20 slot holding a 12x10 vector.
   The arrow strokes `currentColor`, so it takes the button's own label colour:
   navy on Outline (Back), white on Primary (Next). Source SVGs are in
   Icons/arrow-left-lg.svg and Icons/arrow-right-lg.svg. */
.edaat-btn__icon {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
}

/* ==================================================================
   The INVERTED button — a white pill on the Home CTA card
   ================================================================ */
/* A white button on a dark ground. Figma sets this label Medium where
   Control/Button is Semi Bold — the instance is followed, which is
   also what puts the box on its drawn 144; see the changelog. */
/* Used on Home and nowhere else, so taking it to .edaat-btn's own 600 with
   the hero CTA changes no other page. Colours untouched. */
.edaat-btn--invert {
  background: var(--edaat-bg-page);
  color: var(--edaat-gray-900);
  font-weight: 600;
  --bs-btn-hover-color: var(--edaat-gray-900);
  --bs-btn-hover-bg: var(--edaat-cta-copy);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--edaat-gray-900);
  /* One step past the hover tint. --edaat-cta-copy (#ebf1ff) sits between
     navy-50 and navy-100, so navy-100 is the next rung down the same ramp —
     and it is reached through the shared token, which is what keeps Invert's
     press the same depth as Outline's. */
  --bs-btn-active-bg: var(--edaat-bg-brand-subtle-active);
  --bs-btn-active-border-color: transparent;
}

.edaat-btn--invert:hover,
.edaat-btn--invert:focus-visible {
  background: var(--edaat-cta-copy);
  color: var(--edaat-gray-900);
  border-color: transparent;
}

.edaat-btn--invert:active {
  background: var(--edaat-bg-brand-subtle-active);
  color: var(--edaat-gray-900);
  border-color: transparent;
}

.edaat-btn[disabled] {
  background: var(--edaat-button-disabled-bg);
  color: var(--edaat-button-disabled-fg);
  border-color: transparent;
  cursor: not-allowed;
  /* The disabled look has to survive Bootstrap's specificity-3 pressed rule,
     and restating it here is the only way that costs nothing: this selector is
     one class + one attribute, so it cannot outrank that rule directly, but it
     CAN win the variable, which is what the rule reads. A real disabled
     <button> never matches :active anyway — but several buttons in this system
     are <a> and <label> (Bill Inquiry, every Browse Files), where [disabled] is
     inert markup and :active still fires. Last in the file, so it beats the
     variant definitions above it at equal specificity. */
  --bs-btn-hover-color: var(--edaat-button-disabled-fg);
  --bs-btn-hover-bg: var(--edaat-button-disabled-bg);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--edaat-button-disabled-fg);
  --bs-btn-active-bg: var(--edaat-button-disabled-bg);
  --bs-btn-active-border-color: transparent;
}

/* ==================================================================
   FIELD — label, control, icons, message, textarea
   ================================================================ */
/* ============================ Fields ============================ */
.edaat-field {
  display: flex;
  flex-direction: column;
  gap: var(--edaat-input-label-gap);
  min-width: 0;
}

.edaat-field__label {
  gap: var(--edaat-space-4);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-heading);
}

.edaat-field__req {
  color: var(--edaat-text-error);
}

.edaat-field__control {
  align-items: center;
  gap: var(--edaat-space-8);
  height: var(--edaat-field-height);
  padding-inline: var(--edaat-input-padding-x);
  background: var(--edaat-input-bg);
  border: 1px solid var(--edaat-input-border);
  border-radius: var(--edaat-input-radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Text fields carry the lighter shipped border, so hover steps it darker
   to keep the state change legible. Checkbox and radio use the heavier
   control-border instead — see the note on that token. */
.edaat-field__control:hover {
  border-color: var(--edaat-input-border-hover);
  background: var(--edaat-control-bg-hover);
}

.edaat-field__control:focus-within {
  border-color: var(--edaat-input-border-focus);
  border-width: 2px;
  background: var(--edaat-control-bg);
}

.edaat-field__control input,
.edaat-field__control select,
.edaat-field__control textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-input-fg);
}

.edaat-field__control input:focus,
.edaat-field__control select:focus,
.edaat-field__control textarea:focus {
  outline: none;
}

.edaat-field__control input::placeholder,
.edaat-field__control textarea::placeholder {
  color: var(--edaat-input-placeholder);
}

.edaat-field__control select {
  appearance: none;
  cursor: pointer;
  color: var(--edaat-input-fg);
}

.edaat-field__control select:invalid {
  color: var(--edaat-input-placeholder);
}

/* icon slots — 16px clear of the field edge, matching the design */
.edaat-field__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--edaat-icon-strong);
}

.edaat-field__icon--lead {
  margin-inline-start: var(--edaat-space-4);
}

.edaat-field__icon--trail {
  margin-inline-end: var(--edaat-space-4);
}

.edaat-field__message {
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-secondary);
}

/* The validator writes a message node once and then blanks its text.
   An empty span is 0 tall but still a flex item, so every field that had
   ever failed kept an extra 8px gap - the Contact Us form measured 503.6
   against Figma's 472 after one failed submit. Collapse it. */
.edaat-field__message:empty {
  display: none;
}

.edaat-field--error .edaat-field__control {
  border-color: var(--edaat-input-border-error);
}

.edaat-field--error .edaat-field__message {
  color: var(--edaat-text-error);
}

/* textarea */
.edaat-field__control--textarea {
  height: auto;
  align-items: stretch;
  padding-block: var(--edaat-space-12);
}

.edaat-field__control--textarea textarea {
  resize: vertical;
  min-height: 148px;
}

/* ==================================================================
   FILE UPLOAD
   ================================================================ */
/* ============================ File upload ============================ */
/* `position: relative` is load-bearing: the hidden input below is absolutely
   positioned, and without a positioned ancestor its containing block is the
   initial one — so it escapes `.edaat-reg__scroll`'s clip and stretches the
   document. Six uploads on biller step 2 pushed the page 504px. */
.edaat-upload {
  gap: var(--edaat-input-label-gap);
}

.edaat-upload__input {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* A file input has no `.edaat-field__control`, so the error class styled
   nothing and a missing attachment blocked Next with no visible reason. */
.edaat-upload.edaat-field--error .edaat-upload__browse {
  border-color: var(--edaat-border-error);
  color: var(--edaat-text-error);
}

.edaat-upload.edaat-field--error .edaat-field__message {
  color: var(--edaat-text-error);
}

/* 130 is Figma's drawn width and it still renders at exactly 130 whenever the
   label fits, which is every English label. It is a FLOOR rather than a fixed
   size because the label is translated: "Browse Files" fits in 130,
   "استعراض الملفات" does not, and a fixed width clipped it. fit-content with a
   min keeps the measured number and lets the one case that needs more have it. */
.edaat-upload__browse {
  inline-size: fit-content;
  min-inline-size: 130px;
}

.edaat-upload__chip {
  /* NOT d-none: .edaat-upload[data-state="filled"] below flips this to flex,
     and an !important utility would defeat it: the chip would never appear
     after a file is chosen. Invisible to the snapshot, which never uploads. */
  display: none;
  /* NOT d-none: .edaat-upload[data-state="filled"] below flips this to flex,
     and an !important utility would defeat it: the chip would never appear
     after a file is chosen. Invisible to the snapshot, which never uploads. */
  gap: var(--edaat-space-8);
  inline-size: 288px;
  block-size: 40px;
  padding-inline: var(--edaat-space-12);
  background: var(--edaat-bg-muted);
  border: 1px solid var(--edaat-border-default);
  border-radius: var(--edaat-radius-6);
}

.edaat-upload__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-heading);
}

.edaat-upload__ok {
  color: var(--edaat-icon-success);
  display: inline-flex;
}

.edaat-upload__remove {
  border: 0;
  padding: 0;
  background: none;
  color: var(--edaat-icon-default);
  cursor: pointer;
}

.edaat-upload[data-state=filled] .edaat-upload__chip {
  display: flex;
}

.edaat-upload[data-state=filled] .edaat-upload__browse {
  display: none;
}

/* ---------- Form/File Upload label ----------
   The upload header is Inter MEDIUM 14 on all ten instances in the
   file — Complaint Escalation and the nine registration ones — while
   Form/Input and Form/Select labels are Regular. The code had it
   Regular everywhere. */
.edaat-upload .edaat-field__label {
  font-weight: var(--edaat-weight-medium);
}

/* ==================================================================
   CHECKBOX
   ================================================================ */
/* ============================ Checkbox ============================ */
.edaat-check {
  display: flex;
  align-items: flex-start;
  gap: var(--edaat-space-8);
}

.edaat-check input {
  appearance: none;
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0; /* Figma Form/Checkbox is 20 tall: control and label share the line box */
  border: 1px solid var(--edaat-control-border);
  border-radius: var(--edaat-radius-4);
  background: var(--edaat-control-bg);
  cursor: pointer;
}

.edaat-check input:checked {
  background: var(--edaat-control-checked-bg);
  border-color: var(--edaat-control-checked-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.edaat-check input:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

.edaat-check__label {
  /* A zero basis, so the label starts at nothing and GROWS into whatever the
     20px box leaves. Without it the basis is the text's max-content width,
     and `.edaat-check` carries `flex-wrap: wrap` — a wrapped flex line
     prefers pushing an over-wide item to the next line over shrinking it, so
     the label dropped underneath the checkbox instead of sitting beside it.
     `min-inline-size: 0` lets it actually shrink past its longest word.
     The wrap itself has to stay: `.edaat-field__message` uses it to take a
     line of its own below both. */
  flex: 1 1 0;
  min-inline-size: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
}

.edaat-check__label a {
  color: var(--edaat-text-link);
  text-decoration: underline;
}

/* ==================================================================
   SELECT — combobox + listbox, then the checkbox error state
   ================================================================ */
/* ============================ Select ============================
   Form/Select (2578:9171) plus the Dropdown list overlay (3012:9643).
   A native <select> cannot be styled to this, so the field is a
   combobox button and the popup is a real listbox.

   MEASURED from the overlay: container fill #ffffff, 1px #e7e7e7,
   radius 12, gap 2, no padding and no shadow. Option 36 tall,
   padding 8/12, radius 6, label body-sm Regular #181818. The overlay
   is drawn at 288 because that is the width of the field it opens
   from — so here it tracks the field rather than pinning to 288. */
/* .edaat-select: layout is Bootstrap (position-relative) in the markup — exact equivalents, nothing left to declare here. */
.edaat-select__button {
  inline-size: 100%;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.edaat-select__value {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-input-fg);
  overflow: hidden;
  text-overflow: ellipsis;
}

.edaat-select__value[data-placeholder] {
  color: var(--edaat-input-placeholder);
}

/* The chevron turns to echo the open state — the only state the static
   overlay could not show. */
.edaat-select__button[aria-expanded=true] .edaat-field__icon {
  transform: rotate(180deg);
}

.edaat-field__icon {
  transition: transform 0.15s ease;
}

.edaat-select__list {
  inset-inline: 0;
  inset-block-start: 100%; /* flush to the field's bottom edge, no gap */
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2px; /* the overlay's own gap */
  background: var(--edaat-bg-page);
  border: 1px solid var(--edaat-border-subtle);
  border-radius: var(--edaat-radius-12);
  max-block-size: 220px;
}

.edaat-select__option {
  block-size: 36px;
  padding: var(--edaat-space-8) var(--edaat-space-12);
  border-radius: var(--edaat-radius-6);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-heading);
  cursor: pointer;
}

/* Hover and roving focus are not in the static overlay; without them the
   list gives no feedback at all, so they use existing surface tokens. */
.edaat-select__option:hover,
.edaat-select__option[data-active] {
  background: var(--edaat-bg-subtle);
}

.edaat-select__option[aria-selected=true] {
  background: var(--edaat-bg-brand-subtle);
  color: var(--edaat-text-brand);
  font-weight: 500;
}

/* ---- Checkbox error state ----
   Required checkboxes had no visible failure: the error class only styled
   `.edaat-field__control`, which a checkbox has none of, so pressing Submit
   with the terms or reCAPTCHA unticked did nothing a user could see. */
.edaat-check {
  flex-wrap: wrap;
}

.edaat-check .edaat-field__message {
  flex: 0 0 100%;
  margin-inline-start: 28px;
}

.edaat-check.edaat-field--error input {
  border-color: var(--edaat-control-border-error);
  border-width: 2px;
}

.edaat-check.edaat-field--error .edaat-field__message {
  color: var(--edaat-text-error);
}

/* ==================================================================
   reCAPTCHA — Google chrome, deliberately not an Edaat component
   ================================================================ */
/* ============================ reCAPTCHA ============================
   Google's own widget chrome, not an Edaat component.

   Figma draws a simplified 248x44 box with no logo mark. In production
   this block is replaced wholesale by Google's 304x78 iframe, which
   cannot be restyled or resized — so it is built to Google's real
   dimensions and palette instead of ours. That is deliberate: matching
   the DS here would guarantee a mismatch the moment the real widget
   loads. Hard-coded colours below are Google's, and are the one place
   in this file that should not use Edaat tokens.                     */
.edaat-recaptcha {
  inline-size: 304px;
  block-size: 78px;
  max-inline-size: 100%;
  padding-inline: 12px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
}

/* 28x28 with a 2px grey edge — Google's checkbox, not our 20x20 control */
/* `flex: 0 0 auto` HERE WAS THE BUG, and the error state is what exposed it.
   markField appends the validation message INSIDE .edaat-check - closest()
   finds it before anything else - and .edaat-check wraps, so the message
   becomes a second row and the box's max-content width becomes the width of
   that sentence. With flex-shrink 0 it could not give any of it back:
   MEASURED at 1440, the 304-wide widget held a 419-wide .edaat-check and the
   reCAPTCHA logo was pushed to 1119 against a box ending at 992 - 127px adrift,
   outside its own border, which is what the original shows.

   Letting it shrink is the whole fix. min-inline-size: 0 is the load-bearing
   half: a flex item will not shrink below its min-content width without it,
   and min-content here is still that sentence. The message then wraps inside
   the widget and the brand returns to the trailing edge. */
.edaat-recaptcha .edaat-check {
  flex: 1 1 auto;
  min-inline-size: 0;
  gap: 12px;
  align-items: center;
}

/* Size and edge weight apply in both states; the colours do not. Scoping
   the Google greys to :not(:checked) is what lets the DS checked rule
   through — plain `input` here has the same specificity as
   `.edaat-check input:checked` but sits later in the file, so it was
   winning and the box stayed white and tickless when checked. */
.edaat-recaptcha .edaat-check input {
  inline-size: 28px;
  block-size: 28px;
  border-width: 2px;
  border-style: solid;
  border-radius: 2px;
}

.edaat-recaptcha .edaat-check input:not(:checked) {
  border-color: #c1c1c1;
  background: #fff;
}

/* Unchecked the box is Google's; CHECKED it is ours — the DS rule supplies
   the navy fill, navy edge and white tick, and only the tick is scaled up
   here, 14 to 20, for the larger 28px box. */
.edaat-recaptcha .edaat-check input:checked {
  background-size: 20px;
}

.edaat-recaptcha .edaat-check__label {
  white-space: nowrap;
  font-size: 14px;
  line-height: 17px;
  color: #000;
}

/* Logo block, pushed to the trailing edge */
.edaat-recaptcha__brand {
  flex: 0 0 auto;
  margin-inline-start: auto;
  gap: 2px;
}

.edaat-recaptcha__brand img {
  inline-size: 32px;
  block-size: 32px;
}

/* Google draws this at #9b9b9b, which is 2.64:1 on the box's own #f9f9f9
   and unreadable. Darkened to #767676 as specified in the audit.

   MEASURED, AND IT IS STILL SHORT: #767676 is 4.31:1 on #f9f9f9, not the
   4.54:1 it gives on pure white - the box is not white. 10px text needs
   4.5:1. #727272 makes it (4.57:1) and is the same grey the --drawn
   variant below already uses. Left as specified; one character fixes it. */
.edaat-recaptcha__brandname {
  font-size: 10px;
  line-height: 12px;
  color: #767676;
}

/* ==================================================================
   reCAPTCHA, the DRAWN variant — Bill Inquiry only
   ================================================================ */
/* ---- Bill Inquiry's reCAPTCHA, as drawn ------------------------------
   `3012:8290` — 320x64, padding 16, SPACE_BETWEEN, `#000000` at 5%,
   radius 4, no border and no shadow. Three items on one row: the
   checkbox and its label, the word "reCAPTCHA", then the 32x32 mark —
   not the stacked logo block the Google widget puts at its trailing edge.
   Checkbox is 20x20 at 1.5px `#727272` (gray-500); label body-sm in
   `#3a3a3a` (text/primary); "reCAPTCHA" body-xs in gray-500.

   This is the drawn box, asked for on this screen specifically. The
   registration flow keeps the real Google widget, for the reason in the
   note above `.edaat-recaptcha` — it is an iframe and cannot be restyled,
   so anything drawn there changes the moment the real one loads.
   ---------------------------------------------------------------------- */
.edaat-recaptcha--drawn {
  inline-size: 100%;
  block-size: auto;
  min-block-size: 64px;
  justify-content: space-between;
  gap: var(--edaat-space-24);
  padding: var(--edaat-space-16);
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: var(--edaat-radius-4);
  box-shadow: none;
}

.edaat-recaptcha--drawn .edaat-check {
  gap: var(--edaat-space-8);
  align-items: center;
}

.edaat-recaptcha--drawn .edaat-check input {
  inline-size: 20px;
  block-size: 20px;
  border-width: 1.5px;
  border-radius: var(--edaat-radius-4);
}

.edaat-recaptcha--drawn .edaat-check input:not(:checked) {
  border-color: var(--edaat-gray-500);
  background: var(--edaat-bg-page);
}

.edaat-recaptcha--drawn .edaat-check input:checked {
  background-size: 14px;
}

.edaat-recaptcha--drawn .edaat-check__label {
  white-space: nowrap;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
}

.edaat-recaptcha--drawn .edaat-recaptcha__brandname {
  flex: 0 0 auto;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-gray-500);
}

.edaat-recaptcha--drawn .edaat-recaptcha__mark {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  display: block;
}

/* 320 - 32 padding leaves 288 for 112 + 69 + 32 of content, so the two
   space-between gaps land on 37.5 — Figma's own. Below that the row
   wraps rather than crushing the mark. */
@media (max-width: 359.98px) {
  .edaat-recaptcha--drawn {
    flex-wrap: wrap;
    gap: var(--edaat-space-12);
    justify-content: flex-start;
  }
}
/* ==================================================================
   RADIO
   ================================================================ */
/* ============================ Radio ============================
   Form/Radio on Biller /3: control 20x20, r9999, 1.5px #727272 on white,
   label 14/20 #3a3a3a, gap 8. The group is label + options, gap 8, with
   the options 24 apart. */
/* .edaat-radio-group: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-radio-group__options {
  gap: var(--edaat-space-24);
}

/* .edaat-radio: layout is Bootstrap (d-flex align-items-center gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-radio input {
  appearance: none;
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  border: 1.5px solid var(--edaat-control-border);
  border-radius: var(--edaat-radius-full);
  background: var(--edaat-control-bg);
  cursor: pointer;
}

.edaat-radio input:checked {
  border-color: var(--edaat-control-checked-border);
  border-width: 6px; /* the dot is the border closing in — no extra node */
}

.edaat-radio input:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

.edaat-radio__label {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
}

/* ==================================================================
   INLINE ALERT — and the radio-group error state
   ================================================================ */
/* ============================ Inline alert ============================
   Feedback/Inline Alert Type=Info: 56 tall at one line, white, radius 8,
   padding 8/24, gap 12. The 8px accent bar is ABSOLUTE at 0,0 and runs
   the full height, so it is a pseudo-element here and the box clips.
   Icon 40x40 r9999 on cyan-50; text 14/20 text/secondary. */
/* MEASURED on 3012:8438: 586x56, fill #ffffff, **1px #d5d5d5 stroke**,
   radius 8, padding 8/24, gap 12, with an 8x56 #007db6 bar absolute at 0,0.

   The bar and the stroke are both borders here rather than a pseudo-element:
   one box, correct rounding at the corners, and no clipping to fight. The
   8 border plus 16 padding puts the icon at 24 from the edge, where Figma
   draws it. The stroke was missing before, which left a white box on a
   white column carrying only the accent bar. */
.edaat-alert {
  gap: var(--edaat-space-12);
  min-block-size: 56px;
  /* Figma's stroke is centre-aligned and adds nothing to the frame; a CSS
     border always does. Give the 1px back so the box still measures 56. */
  padding-block: calc(var(--edaat-space-8) - 1px);
  padding-inline: var(--edaat-space-16) var(--edaat-space-24);
  background: var(--edaat-bg-page);
  border: 1px solid var(--edaat-border-default);
  border-inline-start: 8px solid var(--edaat-bg-info);
  border-radius: var(--edaat-radius-8);
}

.edaat-alert__icon {
  flex: 0 0 auto;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--edaat-radius-full);
  background: var(--edaat-bg-info-subtle);
  color: var(--edaat-icon-secondary);
}

.edaat-alert__body {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
}

.edaat-alert__body a {
  color: var(--edaat-text-link);
}

/* reCAPTCHA is 248 on the client flow and full width on the biller one,
   where the inert spacer grows to 357. Letting it grow covers both. */
/* Radio groups need the same visible failure the checkboxes got — the
   error class alone styles nothing on a control with no .edaat-field__control. */
.edaat-radio-group.edaat-field--error input {
  border-color: var(--edaat-control-border-error);
}

.edaat-radio-group.edaat-field--error .edaat-field__message {
  color: var(--edaat-text-error);
}

/* ==================================================================
   DATE PICKER
   ================================================================ */
/* ============================ Date picker ============================
   The four date fields on the auth surface — Date of Birth Hijri and Date
   of Birth, on registration.html and client-registration.html — were plain
   text inputs with a DECORATIVE calendar glyph beside them. Nothing opened,
   and the two fields were unrelated. This gives them a calendar and keeps
   the Hijri/Gregorian pair in step.

   The popup is appended to <body> and positioned fixed, not nested in the
   field. `.edaat-field__control` is position:relative and would have been
   the obvious parent, but the registration form puts its fields inside a
   scrolling viewport (`.edaat-reg__scroll`) and a nested popup gets clipped
   by it — the same class of bug §2 records for the navbar dropdown. Fixed
   positioning sidesteps clipping entirely; the JS re-anchors it on scroll.

   Everything here consumes Layer 2/3 tokens. The handful of numbers that are
   genuinely this widget's own (cell size, grid gap) are local custom
   properties scoped to the block rather than new global component tokens —
   one widget does not need to grow the token layer.

   Metrics follow the shipped field and modal specs: radius 8 between the
   input's 4 and the modal's 16, padding 12, `shadow-lg`. The popup takes the
   width of its field; the seven columns are 1fr and divide it.
   ==================================================================== */
.edaat-datepicker {
  --dp-cell: 34px;
  --dp-gap: 2px;
  /* NOT Bootstrap utilities: edaat-datepicker.js builds this popup with
     document.createElement and sets className in JS, so no markup class can
     ever reach it. position/overflow must stay here. */
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 60; /* over the navbar's 50, per §2 */
  /* The engine sets inline-size to the field's own width, so the popup lines
     up with the control it belongs to. This floor is only for a field narrower
     than seven readable columns. */
  min-inline-size: 252px;
  padding: var(--edaat-space-12);
  background: var(--edaat-bg-page);
  border: 1px solid var(--edaat-border-strong);
  border-radius: var(--edaat-radius-8);
  box-shadow: var(--edaat-shadow-lg);
  font-family: inherit;
  color: var(--edaat-text-primary);
  /* So a short viewport can still show the whole thing BELOW the field
     rather than flipping it over the form above. */
  /* max-height is set inline by the engine to the space below the field;
     the month scrolls inside if it does not fit. */
}

.edaat-datepicker[hidden] {
  display: none !important;
}

/* ---------- Header: month/year and the two steppers ---------- */
.edaat-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--edaat-space-8);
  margin-block-end: var(--edaat-space-8);
}

.edaat-datepicker__title {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-weight: var(--edaat-weight-semibold);
  color: var(--edaat-text-heading);
}

.edaat-datepicker__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--edaat-radius-4);
  color: var(--edaat-icon-strong);
  cursor: pointer;
}

.edaat-datepicker__nav:hover {
  background: var(--edaat-bg-muted);
}

.edaat-datepicker__nav:focus-visible {
  outline: 2px solid var(--edaat-border-focus);
  outline-offset: 1px;
}

/* The chevrons are drawn pointing inline-start / inline-end. `dir` mirrors
   boxes but never glyphs (§7), so the arrow itself is flipped in _rtl.scss. */
.edaat-datepicker__nav svg {
  inline-size: 16px;
  block-size: 16px;
}

/* ---------- The grid ---------- */
.edaat-datepicker__grid {
  display: grid;
  /* 1fr, not a fixed cell width: the seven columns divide the field's width
     between them, so the grid always fills the popup exactly. */
  grid-template-columns: repeat(7, 1fr);
  gap: var(--dp-gap);
}

.edaat-datepicker__dow {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 24px;
  font-size: var(--edaat-type-caption-size);
  line-height: var(--edaat-type-caption-line);
  font-weight: var(--edaat-weight-medium);
  color: var(--edaat-text-secondary);
}

.edaat-datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%; /* fill the 1fr column */
  block-size: var(--dp-cell);
  /* A wide field would otherwise stretch the day pills into ovals. */
  max-inline-size: calc(var(--dp-cell) + 8px);
  margin-inline: auto;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--edaat-radius-full);
  font-family: inherit;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
  cursor: pointer;
  /* Digits read left-to-right in Arabic too (§7), and a calendar is a grid
     of digits — keep each cell's number in logical order. */
  direction: ltr;
  unicode-bidi: isolate;
}

.edaat-datepicker__day:hover {
  background: var(--edaat-bg-muted);
}

.edaat-datepicker__day:focus-visible {
  outline: 2px solid var(--edaat-border-focus);
  outline-offset: -2px;
}

.edaat-datepicker__day--muted {
  color: var(--edaat-text-disabled);
}

.edaat-datepicker__day--today {
  border-color: var(--edaat-border-strong);
}

.edaat-datepicker__day--selected,
.edaat-datepicker__day--selected:hover {
  background: var(--edaat-bg-brand);
  border-color: var(--edaat-bg-brand);
  color: var(--edaat-text-inverse);
  font-weight: var(--edaat-weight-semibold);
}

.edaat-datepicker__day[disabled] {
  color: var(--edaat-text-disabled);
  cursor: not-allowed;
}

.edaat-datepicker__day[disabled]:hover {
  background: transparent;
}

/* ---------- Footer: the converted partner date ---------- */
.edaat-datepicker__foot {
  margin-block-start: var(--edaat-space-8);
  padding-block-start: var(--edaat-space-8);
  border-block-start: 1px solid var(--edaat-border-subtle);
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-secondary);
  text-align: center;
}

.edaat-datepicker__foot b {
  font-weight: var(--edaat-weight-semibold);
  color: var(--edaat-text-primary);
  /* the converted date is digits — same rule as the cells */
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---------- The field itself ----------
   The input is picker-driven, so it is readonly. readonly must NOT read as
   disabled: the field is live, it simply takes its value from the calendar.
   So it keeps the normal border, cursor and text colour. */
.edaat-field__control input[readonly][data-date-input] {
  cursor: pointer;
  background: transparent;
  color: var(--edaat-text-primary);
}

.edaat-field__control input[readonly][data-date-input]::placeholder {
  color: var(--edaat-text-placeholder);
}

/* The calendar glyph is decorative and sits inside the <label>, so a click on
   it already focuses the input — which is what opens the picker. Making it a
   button would nest an interactive control inside a label for no gain. */
.edaat-field--datepicker .edaat-field__icon {
  cursor: pointer;
}

/* ==================================================================
   FORM / ACTIONS — the action row
   ================================================================ */
/* ============================ Form/Actions ============================
   `Form/Actions` is one component with `Layout` x `Actions` variants, and
   alignment belongs to it rather than to Button — see the DS note. In code
   it had fragmented into four one-off rows (`.edaat-reg__actions`,
   `.edaat-login__actions`, `.edaat-form-column__actions`,
   `.edaat-modal__actions`). This is the component those should fold into;
   it is introduced additively here so the four shipped pages are untouched.

   End (default) — trailing edge, gap 12. Full width — one action filling
   the column, which is what Bill Inquiry's `Layout=Full width, Actions=One`
   draws at 320.
   -------------------------------------------------------------------- */
.edaat-form-actions {
  gap: var(--edaat-space-12);
  inline-size: 100%;
}

.edaat-form-actions--full .edaat-btn {
  flex: 1 1 0;
}

/* ==================================================================
   FORM COLUMN — the column both form pages share
   ================================================================ */
/* ---------- Form column — the one both form pages use ----------
   Contact Us 3012:8114 (550x568) and Complaint Escalation 3012:8143
   (550x736) are the same column and now share one component, so the
   rhythm around the lead sentence cannot drift between them:

     lead (body-lg, centred)  ·  40  ·  fields (gap 20, actions last)

   550 is the measure the design draws on both, and a 40px input a metre
   wide scans badly, so the column caps there rather than filling.

   Complaint Escalation drew this join at 60 — its `Form` frame carries a
   40 top pad inside a column gapped 20 — against Contact Us's 40, and
   put its actions outside the field stack. Both are brought into line.

   Two values stay per-page because the screens genuinely draw them so;
   `--complaint` carries both. */
.edaat-form-column {
  inline-size: 100%;
  max-inline-size: 550px;
  gap: var(--edaat-space-40);
}

.edaat-form-column--complaint {
  --edaat-form-row-gutter: var(--edaat-space-20); /* Contact Us and both registration flows draw 10 */
  --edaat-textarea-block: 148px; /* the content box; Contact Us draws 96 */
}

.edaat-form-column__lead {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
  color: var(--edaat-text-secondary);
}

/* The DS field-to-field gap of 20 throughout, and the action row is the
   last item in the stack rather than a sibling of it. */
.edaat-form-column__fields {
  gap: var(--edaat-space-20);
}

/* A field and the note under it, inside the 20 the stack uses. */
/* .edaat-form-column__group: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-form-column__note {
  margin: 0;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-secondary);
}

/* `Row` — two 270 columns 10 apart, the Bootstrap row the registration
   form already uses. The row's -5 margins widen it to 560 inside the
   550 column, col-md-6 lands on 280 and the field inside it on exactly
   270. gutter-y keeps the 20 field gap once they stack. */
.edaat-form-column__row {
  --bs-gutter-x: var(--edaat-form-row-gutter, var(--edaat-reg-row-gap));
  --bs-gutter-y: var(--edaat-space-20);
}

/* `Form/Actions` Layout=End Actions=One — end-aligned, gap 12. */
.edaat-form-column__actions {
  gap: var(--edaat-space-12);
}

/* `Position` is a radio group drawn to the height of the input beside
   it: label 20 + gap 8 + a 40-tall options row, so the radios centre
   on where that input's centre would be. Without the 40 they ride up
   10px and the two columns stop lining up.

   NOTE for review: Figma spaces these two radios 20 apart here and 24
   apart on Biller Registration /3, which is the value the DS carries.
   Followed as drawn; the pair needs one number. */
.edaat-form-column .edaat-radio-group__options {
  gap: var(--edaat-space-20);
  min-block-size: 40px;
  align-items: center;
}

/* `Textarea Field` 550x120 — the DS default is 148, this screen draws
   120. Padding 12 less the border, so the content box is 96 and the
   field lands on 120. */
.edaat-form-column .edaat-field__control--textarea {
  padding: calc(var(--edaat-space-12) - 1px);
}

.edaat-form-column .edaat-field__control--textarea textarea {
  min-block-size: var(--edaat-textarea-block, 96px);
  block-size: var(--edaat-textarea-block, 96px);
}

/* The Form/Select chevron is #727272 in Figma — icon/default, the same
   grey as the placeholder beside it — not icon/strong. */
.edaat-select__button .edaat-field__icon {
  color: var(--edaat-icon-default);
}

/* ============================ Navbar ============================ */
/* Layout is the Bootstrap grid: every bar is `row g-0` and its three groups
   are `col-auto`. Gutters are zeroed because the bar PAINTS its box and the
   gap steps below are measured — a gutter would be padding inside the groups.
   The full-width bar additionally gives the logo and the actions `col-lg`, so
   the two sides weigh the same and the link row sits on the centre line. */
.edaat-navbar {
  height: var(--edaat-navbar-height);
  /* `.row` wraps; this bar does not, above 420. Plain, NOT the `flex-nowrap`
     utility: the two 419.98 blocks below have to be able to turn it back on,
     and an `!important` utility here would outrank them. */
  flex-wrap: nowrap;
  gap: var(--edaat-space-60);
  justify-content: space-between; /* the floating pill overrides this to flex-start; the full-width bar spreads its two `col-lg` sides instead */
  padding-block: var(--edaat-space-12);
  padding-inline: var(--edaat-gutter);
  /* The bar owns a stacking context so its dropdown always paints over the
     page. Without it the menu was covered from below: the scroll-reveal puts
     `translate` on content blocks, `translate` creates a stacking context,
     and a later one wins against a menu whose own z-index has no positioned
     ancestor to count against. The hero pages happened to be safe because
     .edaat-page-hero > .edaat-navbar already carried z-index 2; the two
     full-width pages had nothing, and the menu lost its bottom half.
     50 sits above .edaat-menu (40) and everything else in the sheet; the
     modal is a <dialog> in the top layer and is unaffected by any of this. */
  position: relative;
  z-index: 50;
  background: var(--edaat-bg-page);
  border-block-end: 1px solid var(--edaat-border-default); /* the DS component draws border/default #d5d5d5 */
}

.edaat-navbar__links {
  display: flex;
  gap: var(--edaat-space-32);
}

.edaat-navbar__link {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
  text-decoration: none;
}

.edaat-navbar__link:hover {
  color: var(--edaat-text-brand);
}

.edaat-navbar__actions {
  gap: var(--edaat-space-8);
}

/* ---------- The full-width bar centres its link row ----------
   SPACE_BETWEEN is what Nav/Navbar is drawn with, and it was kept because a
   centred row measured ~48px right of Figma's position. That reasoning no
   longer holds: SPACE_BETWEEN gives the middle group the LEFTOVER space, so
   the row is only centred while the logo and the actions weigh the same. They
   never did — the logo is 110 and the actions are ~400 — and the AR/EN control
   added on 2026-09-13 widened the actions again, pushing the links further off
   centre and out of Figma's position anyway.

   So the choice is between two wrong positions, and a genuinely centred row is
   the defensible one: 1fr | auto | 1fr puts the middle column on the page's
   centre line whatever the two sides weigh, which is what a reader expects of
   a navigation bar and what keeps it stable as either side changes.

   The FLOATING pill is untouched. Figma packs its three groups from the start
   with a 60 gap rather than spreading them. The two treatments are
   deliberately different.

   Scoped to 992-up, the only range where the link row exists — below it the
   row is display:none and a grid would hold an empty middle column open. */
/* Now `col-auto col-lg` on the logo and the actions, `col-auto` on the links,
   and `justify-content-end` to land the actions on the trailing edge — the
   markup carries it, so nothing is left to declare here. The pill keeps its
   packed row: its three groups stay `col-auto` at every width. */
/* ==================================================================
   The gutter steps
   ================================================================ */
@media (max-width: 1199.98px) {
  .edaat-navbar {
    gap: var(--edaat-space-24);
  }
}
@media (max-width: 991.98px) {
  .edaat-navbar {
    gap: var(--edaat-space-16);
  }
  .edaat-navbar__links {
    display: none;
  } /* actions stay: Bill Inquiry and Sign in */
  /* ...and the same three links come back as a popup menu - see
     .edaat-navbar__mobile-nav, which is declared with the Menu component it
     is built from. The show rule lives THERE, not here: both rules are one
     class deep, so the one later in the file wins, and a `display: none`
     declared after this block would have kept the trigger hidden at every
     width. Same specificity means source order decides. */
}
/* ==================================================================
   THE MENU — Sign in, and the mobile nav built from it
   ================================================================ */
/* ============================ Sign in menu ============================
   Sign in menu overlay (3012:9630): 184x84, gap 4, fill #ffffff,
   1px #e7e7e7, radius 12; items 40 tall, padding 8/12, radius 6, label
   16 Regular #181818. Same family as the Dropdown list but a larger
   label and a 4 gap, so it gets its own class rather than a modifier. */
/* POSITIONING COMES FROM BOOTSTRAP. Every element carrying this class also
   carries `.dropdown`, and Bootstrap already declares
   `.dropdown { position: relative }` — the containing block the menu is
   absolutely positioned against. Declaring it again here was the same value
   twice, so it is gone and Bootstrap owns it.

   `display` STAYS, and is not swapped for `.d-inline-flex`. Eleven of the
   twenty-three anchors are also `.edaat-navbar__desk-action`, which is
   `display: none` below 576 — and a utility is !important, so it would beat
   that media query and leave Bill Inquiry and Sign in on screen on a phone.
   Utilities cannot be reasoned about one class at a time; what matters is
   every class on the element. Same trap that put the mobile menu trigger on
   the desktop navbar. */
.edaat-menu-anchor {
  display: inline-flex;
}

/* ---------- Mobile navigation ----------
   Below lg the navbar link row is hidden, which left About Edaat, Our
   Services and Key Features with no route at all on a phone. The trigger
   below brings them back as the SAME popup this file already draws for
   Sign in - `.edaat-menu`, opened by the shared [data-menu] behaviour in
   js/edaat-nav.js. Nothing here is a new visual style and no new script was
   written: aria-expanded, Escape, the arrow keys, outside-click and focus
   return to the trigger are one implementation used twice.

   Hidden by default rather than shown by default, so the desktop navbar is
   untouched by anything in this block.

   The pair has to stay in THIS ORDER and in one place. Both selectors are a
   single class, so neither outranks the other and source order is the only
   thing deciding which applies - a `display: none` written after the media
   query would hide the trigger at every width, including the one width it
   exists for. */
@media (max-width: 991.98px) {
  /* the only width where the trigger exists: above it the link row is
     visible, and a second route to the same three places would be noise */
}
/* The navbar re-declares button padding for its own pills
   (.edaat-navbar__actions .edaat-btn--outline, two classes deep), which
   outranks a bare .edaat-btn--icon. The square has to be restated at the
   same depth or the trigger keeps 11px of inline padding and stops being
   square. */
.edaat-navbar__actions .edaat-btn--icon {
  inline-size: var(--edaat-button-height-md);
  padding-inline: 0;
}

/* ---------- Below sm (576): the two pills fold into the menu ----------
   MEASURED at 375 before this rule: logo + AR + Bill Inquiry + Sign in +
   Menu came to 351 inside a 335 pill, so the row wrapped and the navbar
   stood 100 tall against a drawn 64.

   Bill Inquiry and Sign in leave the row here and reappear as items in
   the menu the hamburger already opens, so nothing is dropped — the same
   destinations, reached by one route instead of two. AR deliberately
   stays out of the fold: a language switch buried inside a menu is a
   language switch nobody finds. */
@media (max-width: 575.98px) {
  .edaat-navbar__desk-action {
    display: none;
  }
  .edaat-navbar {
    gap: var(--edaat-space-12);
  }
  .edaat-navbar--floating { /* gutter comes from the 992 block */ }
}
/* Bootstrap's Dropdown drives this popup: it owns display, position (Popper),
   the z-index, aria-expanded, Escape, arrow keys and outside-click close.
   Everything below is the drawn skin only — Figma 3012:9630.

   NOTE: no `display` here. Bootstrap hides with `.dropdown-menu` and shows
   with `.dropdown-menu.show`; both are one class deep and the Bootstrap layer
   is @used first, so a bare display on .edaat-menu would outrank the hide and
   pin the menu open. The flex layout lives on .show for that reason. */
/* `margin: 0` and `list-style: none` are NOT restated here: every element
   carrying this class also carries Bootstrap's .dropdown-menu — 23 of 23,
   checked across all twelve pages — and that rule already sets both to the
   same values. The <ul> reset is Bootstrap's to own once its component is
   the base. Restate them again only if a .edaat-menu ever ships without it. */
.edaat-menu {
  min-inline-size: 184px;
  padding: 0;
  background: var(--edaat-bg-page);
  border: 1px solid var(--edaat-border-subtle);
  border-radius: var(--edaat-radius-12);
}

/* Three classes, so it beats Bootstrap's own `.dropdown-menu.show`. */
.edaat-menu.dropdown-menu.show {
  display: flex;
  flex-direction: column;
  gap: var(--edaat-space-4);
}

.edaat-menu__item {
  display: flex;
  inline-size: 100%;
  block-size: 40px;
  padding: var(--edaat-space-8) var(--edaat-space-12);
  /* no `border: 0` or `text-decoration: none` reset — .dropdown-item is on
     every one of these (94 of 94) and already sets both to the same values. */
  border-radius: var(--edaat-radius-6);
  background: none;
  font-family: inherit;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-text-heading);
  text-align: start;
  cursor: pointer;
}

.edaat-menu__item:hover,
.edaat-menu__item:focus,
.edaat-menu__item[data-active] {
  background: var(--edaat-bg-subtle);
}

/* Bootstrap paints .dropdown-item:active with its own $primary. The drawn
   overlay has no pressed state distinct from hover, so keep one. */
.edaat-menu__item.dropdown-item:active {
  background: var(--edaat-bg-subtle);
  color: var(--edaat-text-heading);
}

.edaat-menu__item:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: -2px;
}

/* Rows that exist only once the navbar has folded its pills away. Same
   source-order contract as .edaat-navbar__mobile-nav above: both selectors
   are one class deep, so neither outranks the other and only source order
   decides. The hide MUST stay first — a display:none written after the
   media query would hide these rows at every width, including the one
   width they exist for. */
@media (max-width: 575.98px) {
  /* separates the folded pills from the three nav links above them */
  .edaat-menu__phone-only--first {
    margin-block-start: var(--edaat-space-4);
    padding-block-start: var(--edaat-space-4);
    border-block-start: 1px solid var(--edaat-border-subtle);
  }
}
/* ==================================================================
   Nav/Navbar Style=Floating — the marketing pill
   ================================================================ */
/* ---------- Nav/Navbar Style=Floating (2539:3898) ----------
   The pill used on the marketing pages: 798x64, pill radius,
   Elevation/sm, padding-inline 32/20. It keeps the full-width
   variant's links, actions and bottom border; what changes is the
   width, the radius, the shadow and the insets. Figma packs the
   three groups from the start with a 60 gap — not SPACE_BETWEEN,
   which is the full-width variant's behaviour. */
.edaat-navbar--floating {
  /* 798 IS STILL THE DRAWN WIDTH and it is what renders whenever the
     content fits, which is every page today. Figma packs the three groups
     from the start with a 60 gap rather than spreading them, so the pill
     carries trailing slack; the AR/EN control added on 2026-09-13 spends
     some of it. This turns a possible overflow into growth: the pill can
     never be narrower than 798, never wider than the viewport, and only
     leaves 798 when its own content genuinely needs more.

     The floor is min(798px, 100%), NOT 798px. A bare min-inline-size beats
     max-inline-size in the cascade, so on a 375 phone it would have forced
     the pill to 798 and pushed the whole document sideways. */
  inline-size: fit-content;
  min-inline-size: min(798px, 100%);
  max-inline-size: 100%;
  justify-content: flex-start;
  padding-inline-start: var(--edaat-space-32);
  padding-inline-end: var(--edaat-space-20);
  border-radius: var(--edaat-radius-full);
  box-shadow: var(--edaat-shadow-sm);
  /* Figma marks the pill overflow-clip, but nothing inside it ever
     overflows — the one thing that would is the Sign in menu, which
     is an overlay in Figma and a positioned child here. Clipping it
     would swallow the menu, so the pill does not clip. */
}

/* The current page is drawn as plain text, not a link — Figma
   rejects self-navigation, so the item carries no target. */
.edaat-navbar__link[aria-current=page],
.edaat-navbar__link[aria-current=page]:hover {
  color: var(--edaat-text-primary);
  cursor: default;
}

@media (max-width: 991.98px) {
  /* Below lg the link row is hidden, which would leave the logo and
     the two pills packed together at the start with the 60 gap and a
     wide empty tail. Push them to the two ends instead. */
  /* ---- and it becomes a full-bleed bar ----
     The pill sits inside .edaat-page-hero, which already pads the page gutter,
     so the pill's BOX lined up with the content while its OWN inline padding
     pushed the logo a further 16-24px inside. MEASURED at 375: the content
     began at 20 and the logo at 80.

     It now cancels the parent's gutter with a negative margin and takes that
     gutter as its own padding, so the first element lands exactly on the
     content line and the last on the content's end line. Same trick, same
     reasoning, as .edaat-footer-compact--bar giving up its own padding when
     the panel around it already owns the gutter.

     The radius goes with the inset: a pill pulled flush to both screen edges
     is not a pill any more, and its curved ends would bite into the bar
     exactly where the logo sits. Above 992 the drawn 798 pill is untouched —
     the two navbar treatments remain deliberately different. */
  .edaat-navbar--floating {
    justify-content: space-between;
    gap: var(--edaat-space-24);
    /* IT STAYS A PILL. Margin and padding are the SAME value, which is the
       whole trick: whatever the bar gives up on the outside it takes back on
       the inside, so its first element lands on the page gutter whatever that
       gutter is, while the box itself still floats clear of the screen edge.
       12 leaves an 8px float at the 20 gutter and 12 at the 24 one — and 12
       of inside padding keeps the wordmark clear of the rounded end, which
       curves 2.1px inward at the logo's top and bottom on a 64-tall pill.
       Anything under about 6 would clip it. */
    margin-inline: calc(var(--edaat-navbar-float) * -1);
    padding-inline: var(--edaat-navbar-float);
    /* align-self, not width: .edaat-page-hero is a flex column with
       align-items:center, so a bar that is merely allowed to be auto-width
       hugs its content and gets centred — which is the very fault being
       fixed. Stretch fills the hero's content box; the negative margin then
       carries it out part-way over the hero's own gutter. */
    align-self: stretch;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
  }
}
@media (max-width: 767.98px) {
  .edaat-navbar--floating {
    gap: var(--edaat-space-16);
  }
}
/* The pill runs out of room before the viewport does: logo 110 + gap
   + Bill Inquiry 94 + 8 + Sign in 102 needs 329 inside a bar that is
   only 295 wide at 375. The hero clips, so the overflow was invisible
   — Sign in simply lost its right edge. Wrap to two rows instead of
   dropping an action; radius 20 because a 9999 pill on a two-row bar
   reads as a lozenge. */
@media (max-width: 419.98px) {
  .edaat-navbar--floating {
    flex-wrap: wrap;
    /* NOT centred. The same correction .edaat-navbar--wrap already carries and
       documents further down this sheet: at 320 the bar genuinely wraps and
       centring two rows is fine, but from ~350 up it is ONE row, and centring
       then floats the logo off the content edge. Left-aligned at the page
       gutter, wrapped or not. */
    justify-content: space-between;
    block-size: auto;
    gap: var(--edaat-space-12);
    padding-block: var(--edaat-space-12);
  }
}
/* ==================================================================
   Nav/Navbar Style=Wrapped — the app pages below 420
   ================================================================ */
/* ---- Full-width navbar, below 420 ------------------------------------
   The full-width bar hits the same wall the floating pill did: at 320 the
   logo (110) plus both actions (Bill Inquiry 94 + 8 + Sign in 102) plus
   40 of padding needs 370. Unlike the pill there is no hero clipping it,
   so it overflows the document outright — `scrollWidth > clientWidth`,
   which is how it was found. Wrap to two rows rather than drop an action,
   the same fix the pill takes.

   Opt-in rather than on `.edaat-navbar` itself because the auth pages
   size their panes with `calc(100vh - var(--edaat-navbar-height))`, and a
   two-row bar makes that arithmetic wrong by the difference.

   RESOLVED 2026-09-09. registration.html and client-registration.html now
   carry it, and the block below releases the arithmetic at the very width
   where the bar wraps — see `.edaat-auth` there. Below 420 the auth pane
   has no reason to be exactly one viewport tall anyway: the form is far
   longer than the screen and the document scrolls regardless.
   ---------------------------------------------------------------------- */
@media (max-width: 419.98px) {
  .edaat-navbar--wrap {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    gap: var(--edaat-space-12);
    padding-block: var(--edaat-space-12);
  }
  /* The height arithmetic is deliberately NOT released here. It was, briefly,
     and that was wrong: this block starts at 419.98 but the bar only actually
     wraps below about 350, so at 375 — where it still fits on one row —
     releasing the min-height stopped the login pane filling the screen.
     A wrapped bar costs ~36px of extra scroll on a 320 screen instead, on a
     page whose form already scrolls. That is the cheaper of the two. */
}
/* ==================================================================
   The navbar Sign in chevron box
   ================================================================ */
/* Navbar "Sign in" chevron. Figma stores arrow-right-01 unrotated and
   turns it in the wrapper, so the export is a down-chevron; the box
   below reproduces the -90.72deg it is drawn with. */
.edaat-icon16 {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
  overflow: hidden;
}

.edaat-icon16 img {
  flex: none;
  transform: rotate(-90.72deg);
}

/* ==================================================================
   Focus rings for the plain links the marketing pages add
   ================================================================ */
/* ---------- Focus, marketing pages ----------
   Buttons, menu items and fields already carry the DS ring. These are
   the plain links the marketing pages add — navbar, footer, partner
   marks — so keyboard focus reads the same everywhere. */
.edaat-navbar__logo:focus-visible,
.edaat-navbar__link:focus-visible,
.edaat-footer__logo:focus-visible,
.edaat-footer__social a:focus-visible,
.edaat-footer__partner:focus-visible,
.edaat-footer__items a:focus-visible,
.edaat-footer__licence a:focus-visible,
.edaat-footer__legal-links a:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* ============================ Stepper ============================ */
/* An <ol> carries the UA list margin and indent. Neither is part of the
   design, and 16px above and below silently ate 32px of the scroll
   viewport, so clear them on the component itself. */
.edaat-stepper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edaat-step {
  gap: var(--edaat-space-8);
  min-width: 0;
}

.edaat-step:not(:last-child) {
  flex: 1 1 0;
}

.edaat-step:last-child {
  flex: 0 0 auto;
}

/* .edaat-step__marker: layout is Bootstrap (d-flex align-items-center) in the markup — exact equivalents, nothing left to declare here. */
.edaat-step__dot {
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--edaat-stepper-dot-size);
  block-size: var(--edaat-stepper-dot-size);
  border-radius: var(--edaat-radius-full);
  border: 2px solid var(--edaat-stepper-track);
  background: var(--edaat-bg-page);
  font-size: var(--edaat-type-body-sm-size);
  color: var(--edaat-text-tertiary);
}

.edaat-step__track {
  flex: 1 1 auto;
  block-size: 2px;
  background: var(--edaat-stepper-track);
}

.edaat-step__label {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-tertiary);
  padding-inline-end: var(--edaat-space-16);
}

.edaat-step[data-state=current] .edaat-step__dot {
  border-color: var(--edaat-bg-secondary);
  color: var(--edaat-text-link);
}

.edaat-step[data-state=current] .edaat-step__label {
  color: var(--edaat-text-heading);
  font-weight: 600;
}

.edaat-step[data-state=complete] .edaat-step__dot {
  background: var(--edaat-bg-secondary);
  border-color: var(--edaat-bg-secondary);
  color: var(--edaat-text-inverse);
}

.edaat-step[data-state=complete] .edaat-step__track,
.edaat-step[data-state=current] .edaat-step__track {
  background: var(--edaat-bg-secondary);
}

.edaat-step[data-state=complete] .edaat-step__label {
  color: var(--edaat-text-heading);
  font-weight: 600;
}

/* ============================ Modal ============================
   Bootstrap Modals. Bootstrap supplies show/hide, the scrim, Escape, the
   focus trap, body scroll-lock and scrollbar compensation; the box below
   is still the drawn Figma overlay. The 50% scrim is Bootstrap's
   $modal-backdrop-bg/opacity, set in modules/_bootstrap.scss — it used to
   be `.edaat-modal::backdrop`, which only a native <dialog> has.

   `.modal-dialog` is `width: auto` and centres the box; it must stay on
   its own element because it also carries `pointer-events: none`, which
   only `.modal-content` on the box turns back on. */
/* Bootstrap caps `.modal-dialog` at 500px from sm up, which would clip the
   600 medium overlay — the drawn widths live on the box, so the dialog is
   released and only carries the vertical centring and the viewport margin.

   Releasing the width costs the horizontal centring: `.modal-dialog`'s
   `margin: … auto` cannot centre a box that is already `width: auto`.
   `.modal-dialog-centered` is a flex row, so the markup adds Bootstrap's
   own `justify-content-center` — no new CSS for it. */
.edaat-modal .modal-dialog {
  max-inline-size: none;
  inline-size: auto;
}

.edaat-modal__box {
  /* Beats `.modal-content`'s `width: 100%` on source order — main.scss
     @uses modules/bootstrap before any partial. */
  inline-size: var(--edaat-modal-width-sm);
  display: flex;
  flex-direction: column;
  gap: var(--edaat-space-16);
  padding: var(--edaat-modal-padding);
  background: var(--edaat-modal-bg);
  border-radius: var(--edaat-modal-radius);
  /* Stated, not inherited. Bootstrap's .modal-content carries its own
     color and a 1px border; this box is an Edaat surface and owns both.
     Same reason as the <dt> weight in _invoice.scss and the <hr> opacity in
     _legal.scss - an unstated value is a dependency on load order. */
  color: var(--edaat-text-primary);
  border: 0;
  box-shadow: var(--edaat-modal-shadow);
  text-align: center;
  align-items: center; /* confirmations are a centred stack */
}

.edaat-modal__box--md {
  inline-size: var(--edaat-modal-width-md);
  text-align: start;
  align-items: stretch;
}

.edaat-modal__badge {
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--edaat-radius-full);
  background: var(--edaat-bg-secondary-subtle);
  color: var(--edaat-icon-secondary);
}

.edaat-modal__title {
  margin: 0;
  font-size: var(--edaat-type-heading-sm-size);
  line-height: var(--edaat-type-heading-sm-line);
  font-weight: 600;
  color: var(--edaat-text-heading);
}

.edaat-modal__body {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  color: var(--edaat-text-secondary);
}

.edaat-modal__actions {
  gap: var(--edaat-space-12);
  justify-content: center;
}

.edaat-modal__box--md .edaat-modal__actions {
  justify-content: flex-end;
}

/* ==================================================================
   Type=Information Size=Medium — the close X and its text stack
   ================================================================ */
/* ---- Feedback/Modal Type=Information Size=Medium ----
   600x256, padding 24, gap 16, actions end-aligned, and a close X the
   small confirmation modals deliberately do not have. */
.edaat-modal__box--md {
  position: relative;
}

.edaat-modal__close {
  inset-block-start: var(--edaat-modal-padding);
  inset-inline-end: var(--edaat-modal-padding);
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--edaat-radius-4);
}

.edaat-modal__close:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* Figma's Text frame: title and body 8 apart inside the modal's 16 stack */
/* .edaat-modal__text: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-modal__box--md .edaat-modal__body {
  line-height: var(--edaat-type-body-sm-line);
}

/* Leave room for the close X so a long title cannot run under it */
.edaat-modal__box--md .edaat-modal__title {
  padding-inline-end: var(--edaat-space-32);
}

/* ---------- Feedback/Modal badges ----------
   The badge tint is variant-driven: Confirmation draws navy-50 with a
   navy mark, Success green-50 with a green one. The unmodified badge
   keeps its cyan tint for the Information modals already shipped. */
.edaat-modal__badge--info {
  background: var(--edaat-bg-brand-subtle);
  color: var(--edaat-icon-brand);
}

.edaat-modal__badge--success {
  background: var(--edaat-bg-success-subtle);
  color: var(--edaat-icon-success);
}

/* ==================================================================
   CARD — the one card both form pages use
   ================================================================ */
/* ---------- Card — the one card both form pages use ----------
   Contact Us draws `Location` / `Phone` at 277x196 and Complaint
   Escalation draws `Card/Requirement` at 398; the two are deliberately the
   same card, and both sit on the design system. They now
   do: this is the `--edaat-card-*` token set, which is also what four of
   the five `Card/*` components in the file already draw.

     white · radius 10 · padding 24 · gap 16 · 1px border/subtle · no shadow

   Two deliberate departures from what is drawn, both of them a screen
   coming into line rather than the system bending:

     - Contact Us draws radius 12. The token, and every Card/* component,
       is 10.
     - Card/Requirement draws padding 32, gap 20, no border, a Medium
       title and a `0 2 6 -3` shadow. All five move onto the card.

   No shadow: deliberately off, and it is what Contact Us and
   Card/Feature already draw. `--edaat-card-shadow` keeps its home on
   `--raised` for Card/Basic, Card/Content and Card/Goal, which do draw it.

   Figma centres its stroke, so the 1px adds nothing to the drawn frame
   while a CSS border adds 2. The border comes back out of the padding —
   23 + 1 puts the content on the 24 inset and the box on its drawn size,
   so Contact Us still measures 277x196 and its copy 229. */
.edaat-card {
  gap: var(--edaat-space-16);
  padding: calc(var(--edaat-card-padding) - 1px);
  background: var(--edaat-card-bg);
  border: 1px solid var(--edaat-card-border);
  border-radius: var(--edaat-card-radius);
}

/* Available, unused on these two pages — see the note above. */
.edaat-card--raised {
  box-shadow: var(--edaat-card-shadow);
}

/* 48x48 circle, the brand cyan at 8% — kept as an alpha, the way Figma
   draws it, rather than the flat cyan-50 tint the token substitutes, so
   it lands on the exact colour over whatever is behind it. */
.edaat-card__icon {
  flex: 0 0 auto;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--edaat-radius-full);
  background: color-mix(in srgb, var(--edaat-bg-secondary) 8%, transparent);
}

/* heading-sm. Semi Bold is the one thing every Card/* title agrees on;
   Card/Requirement drew Medium and is corrected here. */
.edaat-card__title {
  margin: 0;
  font-size: var(--edaat-type-heading-sm-size);
  line-height: var(--edaat-type-heading-sm-line);
  font-weight: var(--edaat-type-heading-sm-weight);
  color: var(--edaat-text-heading);
}

.edaat-card__body {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
}

/* Title colour is the one thing the card family does not settle: navy on
   Card/Feature and on Contact Us, text/heading on Basic, Content, Goal
   and Requirement. Both are followed as drawn. */
.edaat-card--brand .edaat-card__title {
  color: var(--edaat-text-brand);
}

/* A wider card takes the larger body, the way Card/Content does at 828:
   Contact Us is 277 and body-sm, Complaint Escalation 398 and body-md. */
.edaat-card--wide .edaat-card__body {
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
}

/* A phone number inside a card body, linked with tel:. It is drawn exactly
   as designed - the card's own colour, no underline - so linking it changes
   nothing on screen.

   It carried an underline briefly and it was taken off. The number
   still reads as a number, which is the affordance a phone number has: on
   the device where tel: does anything, a dialable number is the expectation
   rather than something that has to be advertised. That is the opposite
   call from .edaat-login__hint, and deliberately so - "Register Now." is a
   sentence that gives no clue it is a control, and a phone number is not. */
.edaat-card__body a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

/* ==================================================================
   CARD / FEATURE, its grid, and THE SHARED CARD HOVER ZOOM
   ================================================================ */
/* ---------- Card/Feature grid ----------
   1216 = 3 x 392 + 2 x 20. The Bootstrap row's negative gutter
   margins widen it to 1236, so col-lg-4 lands on 412 and the card
   inside it on exactly 392. The gutter carries both gaps. */
.edaat-feature-grid {
  inline-size: 100%;
  max-inline-size: 1216px;
}

.edaat-feature-grid__row {
  --bs-gutter-x: var(--edaat-space-20);
  --bs-gutter-y: var(--edaat-space-20);
}

/* ---------- Card/Feature (2559:9160) ----------
   As drawn on Our Services: 392 wide, padding 24, gap 16,
   radius 10, border/subtle. min-height 204 is Figma's; block-size
   100% makes every card in a row match the tallest, so a grid
   never goes ragged. */
.edaat-card-feature {
  gap: var(--edaat-space-16);
  block-size: 100%;
  min-block-size: 204px;
  /* Figma draws padding 24 with a centre-aligned stroke that adds
     nothing to the 392x204 frame; a CSS border always does. Taking
     the border back out of the padding puts the content on 24 from
     the outer edge and the box on Figma's own size, so the 344
     text measure — and with it every line break — is preserved. */
  padding: calc(var(--edaat-card-padding) - 1px);
  background: var(--edaat-card-bg);
  border: 1px solid var(--edaat-card-border);
  border-radius: var(--edaat-card-radius);
  overflow: clip;
  /* --- the hover zoom needs these three; the hover itself, and why any
         of it is here, is under THE CARD HOVER ZOOM further down --- */
  /* `position` so the hover can lift the card over its neighbours. This
     card is a plain block inside a Bootstrap column, NOT a flex item, so
     unlike the Key Features card it cannot honour `z-index` unpositioned. */
  /* the hover shadow at zero alpha, so the hover interpolates colour
     only. The card is drawn with a border and no shadow, and a fully
     transparent one changes nothing on screen. */
  box-shadow: 0 4px 14px rgba(25, 33, 61, 0);
  transition: scale var(--edaat-card-hover-dur) ease-out, box-shadow var(--edaat-card-hover-dur) ease-out;
}

/* A 48 box holding the illustration, flush to its leading edge.

   Illustration/Service used to carry 7.742 of leading padding, which
   pushed every icon that far right of the card's 24 inset while the
   title sat on it. The padding is now 0 on all ten components and the
   slot aligns to MIN, so the artwork and the text share one edge. */
.edaat-card-feature__icon {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
}

.edaat-card-feature__icon img {
  display: block;
  block-size: 48px;
  inline-size: auto;
  max-inline-size: 48px;
}

/* .edaat-card-feature__text: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-card-feature__title {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  font-weight: 600;
  color: var(--edaat-text-brand);
}

.edaat-card-feature__desc {
  margin: 0;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-primary);
}

/* ---------- THE CARD HOVER ZOOM, shared by three sections ----------
   Asked for on Our Services and About Edaat, in the words "like section
   What Makes Us Different". So it is not a second hover that resembles
   the first - Key Features now reads its two values from here too, and
   the whole site's card hover is these three declarations.

   1.05 AND WHY IT IS THE SAME NUMBER ON THREE DIFFERENT CARDS.
   A hover zoom is a PIXEL BUDGET, not a ratio: the same multiplier on a
   bigger card moves further and reads stronger. The three are close
   enough that one number serves all of them:

     Key Features  370 wide   1.05 moves each side edge 9.25px
     Feature card  392 wide   1.05 moves each side edge 9.8px
     Goal card     292 wide   1.05 moves each side edge 7.3px

   The goal card therefore travels about a fifth less than Key Features.
   Matching its FELT movement would need about 1.063, and that is past
   both limits below, so it keeps 1.05 and moves slightly less. That is
   correct behaviour for a smaller card, not a defect.

   1.05 is the ceiling, and two hard limits set it:

   - Text re-rasterises when its layer is scaled. Key Features carries
     14px body and 1.05 is the last step where that stays invisible on a
     non-retina screen. THE FEATURE CARD IS TIGHTER: its description is
     body-xs, 12px, and smaller text shows the softening sooner. It is
     transient - the browser re-rasterises once the card settles - so
     1.05 stands, but this is the knob to bring down to 1.04 first if
     the copy ever reads soft mid-transition.
   - The published band for a card of this size is 1.02-1.05, and the
     common pattern pairs a SMALL scale with added elevation rather than
     a large scale. Hence the shadow, which does most of the work.

   .25s is inside the 100-300ms band a hover should land in.

   NOT gated behind `(hover: hover)`, matching Key Features and the logo
   belt: on a touch screen a tapped card stays zoomed until something
   else is tapped, which is the behaviour these pages already have. */
:root {
  --edaat-card-hover-dur: .25s;
  --edaat-card-hover-scale: 1.05;
  --edaat-card-hover-shadow: 0 4px 14px rgba(25, 33, 61, 0.18);
}

/* NOTHING CLIPS EITHER GRID, which is the first thing a zoom can die on.
   The band has no overflow at all; About Edaat's section DOES carry
   `overflow: clip`, but overflow clips at the PADDING edge, and that
   section holds 60 of inline padding against 7.3px of growth - so the
   card grows into room that is inside the clip region. The gutters are
   20 on both axes in both grids, and the widest growth here is 9.8 a
   side, so two neighbours never overlap either. See the goal card for
   the vertical arithmetic. */
/* `scale`, deliberately NOT `transform`: an independent property that
   COMPOSES with any transform rather than overwriting it, so a hover can
   never fight the scroll reveal. On this page the reveal sits on the
   COLUMN around the card, so there is no collision here to begin with -
   the goal card is where it mattered. */
.edaat-card-feature:hover {
  scale: var(--edaat-card-hover-scale);
  box-shadow: var(--edaat-card-hover-shadow);
  z-index: 1;
}

/* The reader has asked for less motion: both states still apply, they
   just arrive without travel - the same treatment Key Features takes. */
@media (prefers-reduced-motion: reduce) {
  .edaat-card-feature {
    transition: none;
  }
}
/* ==================================================================
   LAYOUT / SECTION HEADER
   ================================================================ */
/* ---------- Layout/Section Header (2551:3365) ----------
   As instanced here: 808 wide, gap 12, title display-lg centred over
   a body-lg supporting line. The component also carries an eyebrow
   slot, which this screen does not use. */
.edaat-section-header {
  inline-size: 100%;
  max-inline-size: 808px;
  gap: var(--edaat-space-12);
}

/* .edaat-section-header__titles: layout is Bootstrap (w-100 d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* `margin: 0` and `text-align: center` are Bootstrap (m-0 text-center) in the
   markup — exact equivalents. The colour stays here: it is a token, and a
   utility would freeze the literal and drop the theme binding. */
.edaat-section-header__title {
  color: var(--edaat-text-brand);
}

.edaat-section-header__body {
  color: var(--edaat-text-secondary);
}

/* ==================================================================
   CARD / GOAL
   ================================================================ */
/* ---------- Card/Goal (2889:3513) ----------
   Compact 292 x 187, padding 32/16, gap 12. No border — the card is
   defined by a shadow, and it is NOT Elevation/sm: Figma draws
   0 2 3 at 10%, a legacy value one step tighter than the token. */
.edaat-card-goal {
  flex: 1 1 292px;
  min-inline-size: 0;
  block-size: 187px;
  /* NOT a Bootstrap utility: .edaat-card-goal--tall overrides this to
     center, and an !important align-items-start would defeat it. */
  align-items: flex-start;
  gap: var(--edaat-space-12);
  padding-inline: var(--edaat-space-32);
  padding-block: var(--edaat-space-16);
  background: var(--edaat-bg-page);
  border-radius: var(--edaat-card-radius);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  /* the hover zoom; see The hover zoom, below */
  transition: scale var(--edaat-card-hover-dur) ease-out, box-shadow var(--edaat-card-hover-dur) ease-out;
}

/* Same rule as the feature card: the artwork starts on the card's
   32 inset, level with the title. */
.edaat-card-goal__icon {
  flex: 0 0 auto;
  inline-size: 50px;
  block-size: 62px;
  /* NOT a utility: --tall .edaat-card-goal__icon overrides this to center. */
  justify-content: flex-start;
}

.edaat-card-goal__icon img {
  display: block;
  inline-size: auto;
  block-size: 48px;
}

.edaat-card-goal__title {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  font-weight: 600;
  color: var(--edaat-text-brand);
}

/* Figma applies Title Case to three of the six goals — card 4 and
   both tall cards. Reproduced as a transform over the sentence-case
   source, which is how Figma stores it — and that transform is
   Bootstrap's `text-capitalize` in the markup, an exact equivalent
   (`text-transform: capitalize`), so nothing is left to declare here. */
/* Tall 292 x 394, padding 32/24, gap 24, contents centred on both axes. */
.edaat-card-goal--tall {
  block-size: 394px;
  align-items: center;
  gap: var(--edaat-space-24);
  padding-block: var(--edaat-space-24);
}

.edaat-card-goal--tall .edaat-card-goal__title {
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.edaat-card-goal--gradient {
  background-image: linear-gradient(180deg, rgba(84, 86, 161, 0.3) 0%, rgba(0, 125, 182, 0.3) 96.154%), linear-gradient(90deg, var(--edaat-bg-page) 0%, var(--edaat-bg-page) 100%);
}

/* The two tall marks show whole. They used to be windows onto larger
   artwork — Figma cropped the Vision lockup to the 40.258 band holding
   the numerals and the leadership emblem to a 38.71 slice — which hid
   the Arabic and English wordmarks and most of the badge. Both slots
   now hug the full 123-tall artwork, matching the Figma component. */
.edaat-card-goal--tall .edaat-card-goal__icon {
  inline-size: auto;
  block-size: 123px;
  justify-content: center;
}

.edaat-card-goal--tall .edaat-card-goal__icon img {
  block-size: 123px;
  inline-size: auto;
  max-inline-size: 100%;
}

/* ---------- The hover zoom ----------
   The shared knobs, defined with the Feature card above. A goal card is
   a flex item of its row, so it honours `z-index` with no `position` -
   the same as the Key Features card and unlike the Feature card.

   THE VERTICAL ARITHMETIC, since two of these cards are tall:
     compact 187 tall   1.05 grows 4.7px at top and bottom
     tall    394 tall   1.05 grows 9.85px at top and bottom
   The rows are 20 apart, so two stacked cards each reaching 4.7 into
   that gap use 9.4 of it. The tall pair has the section's 100 of
   bottom padding under it. Nothing meets anything.

   The transition is restated on the reveal rule further down this file,
   which outranks this one - see the note there. This declaration is what
   applies on any goal card that is not inside an armed section. */
.edaat-card-goal:hover {
  scale: var(--edaat-card-hover-scale);
  box-shadow: var(--edaat-card-hover-shadow);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .edaat-card-goal {
    transition: none;
  }
}
/* ==================================================================
   LAYOUT / PAGE HERO
   ================================================================ */
/* ---------- Layout/Page Hero (2559:9152) ----------
   Three-layer paint, copied from the original rather than
   substituted: the photograph at 20%, a violet wash at 3%, and a
   white-to-transparent gradient that fades the band into the page
   at top and bottom. Band padding-top 40, inner container 60/16. */
.edaat-page-hero {
  inline-size: 100%;
  padding-block-start: var(--edaat-space-40);
  /* ONE AXIS ONLY. The artwork bleeds sideways and must be contained, but the
     navbar is nested INSIDE this box and its menu drops out of the bottom —
     clipping both axes swallowed half the menu (measured: a 184x270 panel cut
     off at the hero's edge, 3 of its 6 rows gone). `clip` on one axis is the
     one value that leaves the other genuinely visible; hidden/scroll/auto
     would force this axis to auto and add a scrollbar. Same trick, same
     reason, as .edaat-logo-strip. */
  overflow-x: clip;
  overflow-y: visible;
}

.edaat-page-hero::before,
.edaat-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.edaat-page-hero::before {
  background-image: url("../images/page-hero-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

/* The top-and-bottom white fade that every photographic band carries, so the
   photograph dissolves into the page instead of ending on a line. It was
   written out three times — here, `.edaat-form-band` and `.edaat-trust` — and
   the three copies were byte-identical, so changing the fade meant changing it
   in three files. ONE definition now; the bands differ only in their tint,
   which stays with each band because it genuinely differs. */
:root {
  --edaat-band-fade:
    linear-gradient(180deg, var(--edaat-bg-page) 0.53%, rgba(255, 255, 255, 0) 25.151%,
                            rgba(255, 255, 255, 0) 75.377%, var(--edaat-bg-page) 97.339%);
}

.edaat-page-hero::after {
  background-image: var(--edaat-band-fade), linear-gradient(90deg, rgba(74, 58, 255, 0.03) 0%, rgba(74, 58, 255, 0.03) 100%);
}

/* Everything in the band paints above the two backdrop layers. */
.edaat-page-hero > * {
  position: relative;
  z-index: 1;
}

/* The bar has to outrank the copy beneath it, because it carries the Sign in
   dropdown. The rule above puts EVERY hero child on z-index 1, so the navbar
   and the title block tie — and on a tie the later element in the DOM paints
   on top, which is the title. The open menu ended up behind it.
   z-index 2 on the bar alone settles it; the menu's own 40 is inside the
   bar's stacking context and never competed with the title at all. */
.edaat-page-hero > .edaat-navbar {
  z-index: 2;
}

.edaat-page-hero__container {
  inline-size: 100%;
  gap: var(--edaat-space-16);
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-space-16);
}

/* Type comes from .edaat-h1 — display-lg 42/48, tracking -0.02em. */
.edaat-page-hero__title {
  margin: 0;
  inline-size: 100%;
  text-align: center;
  color: var(--edaat-text-brand);
}

/* ---------- Page hero eyebrow ----------
   Only FAQ and Contact Us carry one. heading-sm 18/28 Semi Bold in
   the logo's indigo, centred, sitting 16 above the title inside the
   hero container's own 60/16 padding. It is what makes this band 316
   rather than Our Services' 272:
   40 + navbar 64 + (60 + 28 + 16 + 48 + 60) = 316. */
.edaat-page-hero__eyebrow {
  margin: 0;
  inline-size: 100%;
  font-size: var(--edaat-type-heading-sm-size);
  line-height: var(--edaat-type-heading-sm-line);
  color: var(--edaat-brand-indigo);
}

/* ==================================================================
   PAGE BAND — the tinted content band
   ================================================================ */
/* ---------- Our Services — content band (3012:8014) ----------
   Edaat/Gradient/legacy/one-off 5456A1-5456A1: the brand indigo at
   15%, fading out at both ends. Kept literal because it is a
   one-off legacy style, not a token. */
.edaat-page-band {
  inline-size: 100%;
  gap: var(--edaat-space-48);
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
  background-image: linear-gradient(180deg, rgba(84, 86, 161, 0) 0%, rgba(84, 86, 161, 0.15) 20.324%, rgba(84, 86, 161, 0.15) 70.554%, rgba(84, 86, 161, 0) 100%);
}

/* 828 at 1348 — the measure Figma draws, centred in the band. */
.edaat-page-band__intro {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 828px;
  color: var(--edaat-text-secondary);
}

@media (max-width: 991.98px) {
  /* The pill takes the same gutter as the band, so it keeps an inset
     instead of running edge to edge. The backdrop layers are inset:0
     on the hero, so they still span the full width. */
  .edaat-page-hero {
    padding-inline: var(--edaat-gutter);
  }
}
@media (max-width: 991.98px) {
  .edaat-page-band {
    padding-block: var(--edaat-space-40);
  }
}
@media (max-width: 767.98px) {
  .edaat-page-hero__container {
    padding-block: var(--edaat-space-40);
  }
  .edaat-page-band {
    padding-block: var(--edaat-space-32);
    gap: var(--edaat-space-32);
  }
}
/* ==================================================================
   FORM BAND — the band both form pages share
   ================================================================ */
/* ---------- Form band ----------
   The band the two form pages share: Contact Us 3012:8113 (1366x648,
   padding 40/0, one child) and Complaint Escalation 3012:8142
   (1366x880, padding 20/0, gap 12, two children). Padding and gap are
   the page's; everything else is the component.

   Four paint layers, and Figma stacks them
   bottom-first while CSS paints its first background topmost, so the
   order reverses here:

     1 (bottom)  solid #edecff
     2           the hero photograph at 15%
     3           #4a3aff at 3%
     4 (top)     white -> transparent -> white, the band's own fade

   Layers 3 and 4 are the pair the page hero already carries; only the
   base colour and the photograph's opacity differ (15 here, 20 there),
   which is why this is a sibling of .edaat-page-hero, not a modifier
   of it. */
.edaat-form-band {
  inline-size: 100%;
  padding-block: var(--edaat-form-band-pad, var(--edaat-space-40));
  padding-inline: var(--edaat-gutter);
  /* Named rather than left as a bare literal: this is the band's base colour
     and it is off the Edaat ramp (indigo-100 is #ededf5), so the value itself
     IS the base. Change it here and both form pages follow. */
  --edaat-form-band-bg: #edecff;
  background-color: var(--edaat-form-band-bg);
  overflow: clip;
}

.edaat-form-band::before,
.edaat-form-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.edaat-form-band::before {
  background-image: url("../images/page-hero-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

.edaat-form-band::after {
  background-image: var(--edaat-band-fade), linear-gradient(90deg, rgba(74, 58, 255, 0.03) 0%, rgba(74, 58, 255, 0.03) 100%);
}

.edaat-form-band > * {
  position: relative;
  z-index: 1;
}

/* ==================================================================
   FOOTER / FULL
   ================================================================ */
/* ---------- Footer/Full (2576:3383) ----------
   Padding-block 40/20. Brand column 400 with the wordmark, blurb, social row
   and partner logos; three link columns 60 apart; then the rule and the legal
   bar.

   PADDING-INLINE IS 60, NOT THE DRAWN 80. This is a deliberate system
   correction, the kind §0.1 allows: the full-width navbar starts its content
   at 60 and every content band is padded 60, so a footer at 80 put the third
   and last horizontal rhythm of the page 20px inside the other two. The rule
   was already written down further down this sheet — "the logo, the page
   content and the footer all have to start on the same line" — but only
   enforced below 420. It now holds at every width. */
.edaat-footer {
  inline-size: 100%;
  display: flex;
  padding-inline: var(--edaat-gutter);
  padding-block-start: var(--edaat-space-40);
  padding-block-end: var(--edaat-space-20);
  background: var(--edaat-bg-page);
}

/* Layout is the Bootstrap grid in the markup: `row g-0 w-100
   justify-content-between align-items-start`, with the brand and the links as
   `col-12 col-xl-auto`. Gutters are zeroed because the 60 is a flex `gap` —
   a minimum that space-between never lets bind — not a column gutter. */
.edaat-footer__upper {
  gap: var(--edaat-space-60);
}

.edaat-footer__brand {
  gap: var(--edaat-space-32);
}

/* `col-xl-auto` hugs its content; Figma pins this column at 400. Below xl
   `col-12` supplies the 100% and the cap below is all that is left. */
@media (min-width: 1200px) {
  .edaat-footer__brand {
    inline-size: 400px;
  }
}
/* .edaat-footer__identity: layout is Bootstrap (d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
/* .edaat-footer__wordmark: layout is Bootstrap (d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
.edaat-footer__logo {
  inline-size: 140px;
  block-size: 29px;
}

.edaat-footer__blurb {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
}

.edaat-footer__social a {
  display: block;
  inline-size: 24px;
  block-size: 24px;
}

.edaat-footer__social img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Partner marks. Each is a window onto a larger bitmap, so the
   offsets are the crop Figma draws — physical left/top, because a
   crop belongs to the image and must not mirror under dir="rtl". */
/* Figma draws this row 503 wide inside a 400 column — it overruns
   the brand column on purpose, and stops well short of the links at
   679, so nothing collides. Hug the content rather than stretch. */
.edaat-footer__partners {
  gap: var(--edaat-space-20);
  align-self: flex-start;
}

.edaat-footer__partner {
  flex: 0 0 auto;
  overflow: hidden;
}

.edaat-footer__partner img {
  position: absolute;
  display: block;
  max-width: none;
}

.edaat-footer__partner--sama {
  width: 130px;
  height: 49px;
}

.edaat-footer__partner--sama img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edaat-footer__partner--payments {
  width: 160px;
  height: 40px;
}

.edaat-footer__partner--payments img {
  left: -19.78%;
  top: -224.83%;
  width: 139.28%;
  height: 549.45%;
}

.edaat-footer__partner--sadad {
  width: 108px;
  height: 39px;
}

.edaat-footer__partner--sadad img {
  left: 0;
  top: -90.42%;
  width: 100%;
  height: 280%;
}

.edaat-footer__partner--azm {
  width: 45px;
  height: 53px;
}

.edaat-footer__partner--azm img {
  left: -55.56%;
  top: -30.65%;
  width: 197.78%;
  height: 170%;
}

.edaat-footer__links {
  gap: var(--edaat-space-60);
}

.edaat-footer__col {
  gap: var(--edaat-space-12);
}

.edaat-footer__col-title {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-weight: 700;
  color: var(--edaat-text-heading);
}

.edaat-footer__items {
  gap: var(--edaat-space-12);
}

.edaat-footer__items a,
.edaat-footer__items span {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.edaat-footer__items a:hover {
  color: var(--edaat-text-brand);
}

.edaat-footer__items [aria-current=page] {
  cursor: default;
}

.edaat-footer__bottom {
  inline-size: 100%;
  gap: var(--edaat-space-20);
  padding-block-start: var(--edaat-space-40);
}

.edaat-footer__rule {
  inline-size: 100%;
  block-size: 1px;
  background: var(--edaat-border-subtle);
}

.edaat-footer__licence {
  gap: var(--edaat-space-6);
}

.edaat-footer__licence p {
  margin: 0;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-tertiary);
}

.edaat-footer__licence a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.edaat-footer__legal-links a,
.edaat-footer__legal-links span[aria-current] {
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  font-weight: 500;
  color: var(--edaat-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.edaat-footer__legal-links a:hover {
  color: var(--edaat-text-brand);
}

/* ---------- Marketing pages — responsive ----------
   Bootstrap's breakpoints. The grid stacks through col-md-6 and
   col-12 in the markup; what is left is the band padding, the
   pill's insets and the footer's two rows. */
@media (max-width: 1199.98px) {
  /* The footer's upper row needs 80 + 400 + 60 + 507 + 80 = 1127: the
     brand column is a fixed 400 and the three link columns are nowrap,
     so neither side can give. It stacks here, not at lg — at 992 the
     link columns were running 55px off the right edge of the page. */
  /* `col-12` does the stacking; the row gap is all that is left. */
  .edaat-footer__upper {
    gap: var(--edaat-space-40);
  }
  .edaat-footer__brand {
    max-inline-size: 400px;
  }
}
@media (max-width: 767.98px) {
  .edaat-footer__links {
    flex-wrap: wrap;
    gap: var(--edaat-space-32);
  }
  /* The partners row hugs its content so it can overrun the brand
     column the way Figma draws it — which also means flex-wrap can
     never engage, because a shrink-to-fit box is never too narrow.
     Stretch it first, then let it wrap. */
  .edaat-footer__partners {
    align-self: stretch;
    flex-wrap: wrap;
  }
}
/* ==================================================================
   FOOTER / COMPACT — the auth footer, in its two forms
   ================================================================ */
/* Footer/Compact ships in two forms, both 56 tall and both end-aligned:
   inside the registration column it is 586 wide with NO padding, because
   the column already carries the 60 gutter; on login it is the full 706
   bar and owns padding 12/60. Both land the links 60 from the screen. */
.edaat-footer-compact {
  justify-content: flex-end;
  gap: var(--edaat-space-32);
  block-size: 56px;
  flex: 0 0 auto;
  padding-block: 0;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-secondary);
}

.edaat-footer-compact a {
  color: inherit;
  text-decoration: none;
}

.edaat-footer-compact a:hover {
  color: var(--edaat-text-brand);
}

/* Footer/Compact as a full-width bar — 706x56, padding 12/60.
   The registration flow uses the same component inside the already
   inset 586 column, so only the bar form carries gutters. */
.edaat-footer-compact--bar {
  inline-size: 100%;
  block-size: var(--edaat-login-footer-height);
  flex: 0 0 auto;
  padding-block: var(--edaat-space-12);
  padding-inline: var(--edaat-space-60);
  background: var(--edaat-bg-page);
}

/* ============================ Auth split ============================
   The two halves are Bootstrap columns in the markup (`col-lg-5` image,
   `col-lg-7` form) inside a `.row.g-0`. Nothing here sets a width — the
   rules below only carry the height model and the Figma padding.      */
.edaat-auth {
  block-size: calc(100vh - var(--edaat-navbar-height));
  padding-inline-start: var(--edaat-space-60); /* Figma's 60 whitespace */
}

.edaat-auth__row {
  block-size: 100%;
}

/* A Bootstrap column is a flex item, and a stretched flex item's cross size
   is the tallest item's CONTENT height — so a long form grew the row past
   the 704 set above and the whole page scrolled. Pinning both columns to
   the row's height puts the overflow back inside `.edaat-reg__scroll`.
   From md up, which is exactly where the viewport-height pane holds —
   below md the auth area is min-height and must be free to grow. */
@media (min-width: 768px) {
  .edaat-auth__hero,
  .edaat-auth__panel {
    block-size: 100%;
    min-block-size: 0;
  }
}
.edaat-auth__hero {
  padding-block: var(--edaat-space-40) var(--edaat-space-60);
}

/* Grid rows `1fr auto` with a 12 gap: the slides fill the upper row and the
   dots sit 12 under them, which is how Figma's `hero-foot` stacks its text
   and dots. Was a flex column with space-between; the slides now own that
   distribution so they can be stacked and cross-faded. */
.edaat-auth__hero-card {
  flex: 1 1 auto;
  grid-template-rows: 1fr auto;
  row-gap: var(--edaat-space-12);
  justify-items: center;
  padding: var(--edaat-space-80) var(--edaat-space-20);
  /* 13.14 on all four corners, the hero-mockup radius shared with the Home
     dashboard shot in pages/_home-hero.scss. Was --edaat-radius-20. The card
     has no clipping ancestor — every element between it and <body> is
     overflow: visible with no clip-path — so the declared radius is what
     renders, and the background stack is clipped to the rounded border box. */
  border-radius: 13.14px;
  color: var(--edaat-text-inverse);
  /* Exactly the Figma fill stack, bottom to top: flat grey, the wave
     artwork cropped to fill, then the three logo hues at 70%. CSS
     paints the first layer on top, so the order is reversed here. */
  background: linear-gradient(180deg, rgba(0, 125, 182, 0.7) 11%, rgba(84, 86, 161, 0.7) 50%, rgba(41, 155, 96, 0.7) 88%), url("../images/auth-hero.png") center/cover no-repeat, #e3e3e3;
}

/* Welcome block — 40px side padding, as drawn */
.edaat-auth__hero-intro {
  padding-inline: var(--edaat-space-40);
}

.edaat-auth__hero-title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900; /* Figma: Inter Black */
  /* Figma renders this block in title case */
  margin: 0 0 var(--edaat-space-8);
}

.edaat-auth__hero-sub {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
}

.edaat-auth__hero-sub strong {
  font-weight: 700;
}

/* Figma sets this one line LEFT, not centred like the block above.
   Identical at the drawn width; it only shows if the line ever wraps. */
/* `start`, not `left`: this was the ONE physical alignment left in the file
   and it would not have mirrored under dir="rtl". Found when the language
   switcher went in. (The four `left:` offsets on the footer partner marks
   are crop positions into a bitmap, not layout - those must stay physical,
   or RTL would show the wrong slice of the sprite.) */
/* NOT Bootstrap: .text-start is PHYSICAL (left in the LTR sheet, right in the
   RTL one) where this is LOGICAL. The two render identically, but `start` is
   what this sheet is authored in and what validate-rtl-parity.js checks for —
   measured, the swap moved text-align on 54 elements. */
.edaat-auth__hero-foot {
  text-align: start;
}

/* ---------- Slides ----------
   Figma's `registration picture` is a 3-variant component; the variants are
   the slides and the dots track them. Same artwork in all three — only the
   copy changes — so the image stays on the card and the slides stack in one
   grid cell and cross-fade. */
.edaat-auth__slides {
  grid-row: 1;
  display: grid;
  inline-size: 100%;
  min-block-size: 0;
}

.edaat-auth__slide {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.edaat-auth__slide[data-active] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}

/* Figma: 12x8, radius 10, gap 4 — #ffffff active, #b8c0cc idle */
.edaat-auth__dots {
  grid-row: 2;
  display: flex;
  gap: var(--edaat-space-4);
}

.edaat-auth__dots button {
  inline-size: 12px;
  block-size: 8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #b8c0cc;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.edaat-auth__dots button[aria-current=true] {
  background: var(--edaat-white);
}

.edaat-auth__dots button:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-white);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* Honour the OS setting: no cross-fade, and the script stops auto-advancing. */
@media (prefers-reduced-motion: reduce) {
  .edaat-auth__slide {
    transition: none;
  }
}
.edaat-auth__dots span[aria-current=true] {
  background: var(--edaat-white);
}

/* Width comes from its `col-lg-7`; this only adds the pane's own gutters. */
.edaat-auth__panel {
  min-inline-size: 0;
  display: flex;
  justify-content: center;
  padding-inline: var(--edaat-space-60);
  padding-block-start: var(--edaat-reg-column-pad-top);
}

/* Fills the pane between its gutters, so there is no hole beside the form,
   and stops at form-max on a wide screen rather than stretching the fields. */
.edaat-auth__column {
  inline-size: 100%;
  max-inline-size: var(--edaat-reg-form-max);
  gap: var(--edaat-reg-stack-gap);
  min-block-size: 0;
}

/* ==================================================================
   REGISTRATION — the stepped form column
   ================================================================ */
/* ============================ Registration ============================ */
.edaat-reg__head {
  gap: var(--edaat-space-12);
  min-block-size: 36px; /* Figma: the Title row measures 36 */
}

/* THE CANCEL TRIGGER TAKES NO FOCUS RING, by decision 2026-09-21.

   What it suppresses is the keyboard ring, not a border: the button is a pill
   (radius 9999) and `.edaat-btn:focus-visible` draws a 1.6px cyan outline at
   1.6px offset, which follows the curve and reads as a stray border round the
   word. Cancel is the first tabbable element after the title, so one Tab press
   lands on it and the ring appears.

   A MOUSE NEVER TRIGGERED IT. `:focus-visible` matches keyboard and assistive
   navigation only, so this changes nothing for a pointer user — it only takes
   the indicator away from someone driving the page with Tab.

   THE COST, recorded so it is not rediscovered as a bug: a keyboard user
   tabbing through this header now gets no signal that Cancel is focused, which
   is WCAG 2.4.7 Focus Visible (AA) unmet for this one control. It is scoped as
   tightly as it can be — this header only — so every other button on the site,
   including the AR toggle beside it, keeps its ring. Widening this selector
   would take the indicator off the whole system. */
.edaat-reg__head .edaat-btn:focus-visible {
  outline: none;
}

.edaat-reg__title {
  margin: 0;
  font-size: var(--edaat-type-heading-lg-size);
  line-height: var(--edaat-type-heading-lg-line);
  font-weight: 600; /* design is Semi Bold; the type token carries 700 */
  color: var(--edaat-text-brand);
}

/* The only scrolling region — Figma `Fields (scrolls)` 586x481, gap 32,
   holding Fields plus Bottom (divider, actions, footer).

   Figma sets this frame MIN on step 1, where the content overflows by 84,
   and SPACE_BETWEEN on steps 2 and 3, where it is 268 and 76 short. CSS
   `justify-content: space-between` cannot do both: when the content is
   taller than the box it overflows UPWARD, past scroll origin, and the
   top 72px of step 1 became unreachable. `margin-block-start: auto` on
   the last child pins the bar to the bottom when there is slack and
   collapses to 0 when there is not — both Figma behaviours, one rule. */
.edaat-reg__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--edaat-space-32);
}

.edaat-reg__fields {
  display: flex;
  flex-direction: column;
  gap: var(--edaat-reg-field-gap);
}

.edaat-reg__section {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
  font-weight: var(--edaat-type-heading-md-weight);
  color: var(--edaat-text-brand);
}

/* Paired fields are a Bootstrap `.row` of `col-12 col-md-6`; this only
   retunes the gutter to Figma's 10, and gives stacked fields on a phone
   the same 20 the field stack uses. A single field in the row is just a
   `col-12`, so the old `--full` modifier is gone. */
.edaat-reg__row {
  --bs-gutter-x: var(--edaat-reg-row-gap);
  --bs-gutter-y: var(--edaat-space-20);
}

/* Four name fields as a Bootstrap `.row` of `col-6 col-xl-3` — 4-up from
   the xl breakpoint, 2x2 below it. That threshold is Bootstrap's, not a
   number picked here, and it comfortably clears the measured minimum:
   "Second Name" needs 94 of text, so a field wants 94 + 24 padding + 2
   border = 120, and four of those plus gutters is ~504 of column. */
.edaat-reg__names {
  --bs-gutter-x: var(--edaat-reg-name-gap);
  --bs-gutter-y: var(--edaat-reg-name-gap);
}

/* Figma `Bottom` 586x113 — gap 0, so Actions and Footer/Compact meet.
   auto top margin is what pins it; see the note on .edaat-reg__scroll. */
.edaat-reg__foot {
  margin-block-start: auto;
}

.edaat-reg__actions {
  justify-content: space-between;
  gap: var(--edaat-space-24);
  padding-block-start: var(--edaat-space-16);
  border-block-start: 1px solid var(--edaat-border-subtle);
}

/* .edaat-reg__actions--end: layout is Bootstrap (justify-content-end) in the markup — exact equivalents, nothing left to declare here. */
/* ==================================================================
   LOGIN
   ================================================================ */
/* ============================ Login ============================
   Measured from Figma `Client Login — Design System` (3012:8217).
   Shares the navbar, the 60px body inset and Layout/Auth Hero with
   the registration flow; only the right pane differs.

   Right pane at 1366: 706 wide, 704 tall = a 648 column wrapper
   plus a 56 footer bar. The column itself is 320, centred on both
   axes, and the footer spans the full 706 with its own 60 gutters —
   which is why the login panel drops the pane padding the
   registration panel carries.                                    */
:root {
  --edaat-login-column-width: 320px; /* Figma: Auth column / Column wrapper */
  --edaat-login-wrap-height: 648px; /* 704 - 56 footer */
  --edaat-login-footer-height: 56px; /* Footer/Compact bar */
}

.edaat-auth__panel--login {
  justify-content: center;
  padding-inline: 0; /* the footer bar owns the 60 gutters */
  padding-block-start: 0;
}

.edaat-login__wrap {
  inline-size: var(--edaat-login-column-width);
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overflow-x: clip;
  justify-content: center;
}

.edaat-login__column {
  inline-size: 100%;
  gap: var(--edaat-space-48); /* Figma: Auth column gap 48 */
}

/* .edaat-login__form: layout is Bootstrap (w-100 d-flex flex-column gap-4) in the markup — exact equivalents, nothing left to declare here. */
/* Edaat/display-sm/Semi Bold — 28/36, tracking -0.28 */
.edaat-login__title {
  margin: 0;
  font-size: var(--edaat-type-display-sm-size);
  line-height: var(--edaat-type-display-sm-line);
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--edaat-text-brand);
}

.edaat-login__fields {
  inline-size: 100%;
  gap: var(--edaat-space-20); /* Figma: Fields gap 20 */
}

/* Form/Actions Layout=Full width, Actions=One — the primary fills the column */
.edaat-login__actions {
  gap: var(--edaat-space-12);
  inline-size: 100%;
}

.edaat-login__actions .edaat-btn {
  flex: 1 1 0;
}

/* .edaat-login__links: layout is Bootstrap (w-100 d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
.edaat-login__divider {
  block-size: 1px;
  inline-size: 100%;
  background: var(--edaat-border-subtle);
}

/* .edaat-login__linkstack: layout is Bootstrap (d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
/* Figma draws both lines without underline; hover adds it so the
   affordance is not colour-only. Resting pixels are unchanged. */
/* Used on both an <a> and a <button> ("Back To Login", "Forgot your
   Password?"), so it carries the button reset as well. */
.edaat-login__link {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-link);
  text-decoration: none;
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

/* The hint is a button that looks like a sentence. On a pointer device the
   hover underline was the only thing that said "this is a control"; on a
   touch screen there is no hover, so there was NOTHING - it read as body
   copy and the only way to find it was to tap it.

   COLOUR, NOT DECORATION, carries it now: --edaat-text-link, the same cyan
   every other link on the site uses, so the control is identifiable at rest
   at every width and the line stays clean. Hover still underlines, as an
   enhancement rather than the only affordance.

   Colour alone distinguishing a link inside body copy is the thing WCAG
   1.4.1 warns about - but that applies to a link sitting INSIDE a paragraph
   of the same text. This is a standalone control on its own line, in a
   stack of controls, so there is no surrounding sentence to confuse it
   with. Cyan on white is 4.56:1, which clears AA for this 14px text. */
.edaat-login__hint {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-link);
  text-decoration: none;
  width: fit-content;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  text-align: start;
}

.edaat-login__link:hover, .edaat-login__hint:hover {
  color: var(--edaat-text-brand);
}

/* The hint is one control but two pieces of language: a question, which is
   just prose, and the call to action, which is the part you click. Colouring
   the whole line as a link made the question look clickable too. The question
   takes body colour, the action keeps the link colour, and the whole control
   stays one button so the hit area is unchanged. */
.edaat-login__hint-q {
  color: var(--edaat-text-secondary);
}

.edaat-login__hint-cta {
  color: var(--edaat-text-link);
}

.edaat-login__hint:hover .edaat-login__hint-cta {
  color: var(--edaat-text-brand);
}

.edaat-login__link:focus-visible, .edaat-login__hint:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* ==================================================================
   RESET PASSWORD — the one line login does not have
   ================================================================ */
/* ============================ Reset password ============================
   Reset your password (biller 3012:8248 / client 3012:8720) reuses the
   login column exactly — 320 wrapper, Auth column gap 48, Form gap 24,
   Fields gap 20, Links gap 16. The only element the login screens do not
   have is the lead paragraph under the title. */
.edaat-login__lead {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
}

/* ==================================================================
   SUCCESS
   ================================================================ */
/* ============================ Success screen ============================
   Client Registration /3 — success (3012:8655). Not the auth split: a full
   width panel with the artwork at 15% behind it, the Success block centred
   on both axes, and Footer/Compact spanning the page.                   */
/* Same height model as .edaat-auth: fills the viewport under the navbar,
   panel takes the slack, Footer/Compact sits on the bottom edge. */
.edaat-success-page {
  display: flex;
  block-size: calc(100vh - var(--edaat-navbar-height));
}

/* A SWITCHED-TO VIEW IS A FOCUS TARGET, NOT A CONTROL.

   js/edaat-registration.js gives the incoming view `tabindex="-1"` and focuses
   it when the view holds no form field — today only the success screen — so the
   change is announced and Tab resumes inside it instead of collapsing to <body>.
   Chrome then matches :focus-visible on that container and paints its own
   `outline: auto 1px`, which MEASURED as a 1px ring around the entire success
   panel: a stray border across the whole screen, not a focus affordance.

   -1 is never in the tab order, so nobody can reach this element by keyboard and
   nothing here suppresses a real control's ring — the attribute selector pins the
   rule to exactly the elements the script marks. Buttons, links and fields inside
   the view keep their own :focus-visible treatment untouched. */
[data-view][tabindex="-1"]:focus {
  outline: none;
}

.edaat-success {
  flex: 1 1 auto;
  min-block-size: 0;
  gap: var(--edaat-space-60);
  padding: var(--edaat-space-60);
}

/* Figma: object-cover at opacity .15, behind everything, not interactive */
.edaat-success::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/success-panel.jpg") center/cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

/* Figma measures this block at 480 and sets the body copy on one line at
   exactly that width. The browser lays the same string at 481 — a 1px
   rasterisation difference, not a content difference — which forced a
   second line. 484 restores the single line with a small buffer; nothing
   else here is width-driven, since the icon, title and button all hug
   and centre. */
.edaat-success__block {
  /* above the artwork */
  inline-size: 484px;
  max-inline-size: 100%;
  gap: var(--edaat-space-24);
}

.edaat-success__icon {
  inline-size: 112px;
  block-size: 112px;
  flex: 0 0 auto;
}

/* Edaat/display-sm/Semi Bold — same ramp step as the Login title */
.edaat-success__title {
  margin: 0;
  font-size: var(--edaat-type-display-sm-size);
  line-height: var(--edaat-type-display-sm-line);
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--edaat-text-brand);
}

/* Edaat/body-lg/Regular — 18/28 */
.edaat-success__body {
  margin: 0;
  inline-size: 100%; /* the block owns the measure — see the note above */
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
  color: var(--edaat-text-secondary);
}

@media (max-width: 767.98px) {
  .edaat-success {
    padding: var(--edaat-space-32) var(--edaat-space-20);
    gap: var(--edaat-space-32);
  }
  .edaat-success__icon {
    inline-size: 88px;
    block-size: 88px;
  }
  .edaat-success__title {
    font-size: var(--edaat-type-heading-lg-size);
    line-height: var(--edaat-type-heading-lg-line);
  }
}
/* ==================================================================
   THE AUTH SURFACE, RESPONSIVE
   ================================================================ */
/* ============================ Responsive ============================
   Breakpoints are Bootstrap's, not ours. The split itself needs no rule
   here at all — `col-lg-5` / `col-lg-7` and `d-none d-lg-flex` in the
   markup do the widths and the stacking. What is left is the things a
   grid cannot express: the viewport height model, Figma's gutters, and
   the components inside a column.
   ==================================================================== */
/* ---------- Below xl (1200): tighten the gutters ---------- */
@media (max-width: 1199.98px) {
  .edaat-auth {
    padding-inline-start: var(--edaat-space-32);
  }
  .edaat-auth__hero {
    padding-block: var(--edaat-space-24) var(--edaat-space-32);
  }
  .edaat-auth__hero-card {
    padding: var(--edaat-space-40) var(--edaat-space-20);
  }
  .edaat-auth__panel {
    padding-inline: var(--edaat-space-32);
  }
  .edaat-footer-compact--bar {
    padding-inline: var(--edaat-space-32);
  }
}
/* ---------- Below lg (992): one column ----------
   The image column is dropped by `d-none d-lg-flex` in the markup, so the
   form has the row to itself. The auth area also stops being a fixed
   viewport pane: the document scrolls, and the inner scroll region is
   released so nothing is trapped in a short box. */
@media (max-width: 991.98px) {
  .edaat-auth {
    padding-inline-start: 0;
  }
  .edaat-auth__panel,
  .edaat-auth__panel--login {
    padding-inline: var(--edaat-space-24);
    padding-block-start: var(--edaat-space-24);
  }
  .edaat-auth__column {
    max-inline-size: 640px;
    margin-inline: auto;
  }
  .edaat-login__wrap {
    inline-size: 100%;
    max-inline-size: 360px;
    margin-inline: auto;
  }
  .edaat-footer-compact--bar {
    padding-inline: var(--edaat-space-24);
  }
}
/* ---------- Below md (768): the page takes over the scrolling ----------
   Down to here the viewport-height pane holds and only the form scrolls,
   which is the intent. On a phone that traps a long form in a short box,
   so the fixed height is released and the document scrolls instead. */
@media (max-width: 767.98px) {
  .edaat-auth {
    display: flex;
    block-size: auto;
    min-block-size: calc(100vh - var(--edaat-navbar-height));
  }
  .edaat-auth__row {
    flex: 1 1 auto;
  }
  .edaat-auth__panel, .edaat-auth__panel--login {
    justify-content: flex-start;
  }
  .edaat-reg__scroll {
    overflow: visible;
    flex: 0 0 auto;
    min-block-size: 0;
    padding-inline-end: 0;
  }
  .edaat-reg__foot {
    margin-block-start: var(--edaat-space-32);
  }
  .edaat-login__wrap {
    block-size: auto;
    flex: 0 0 auto;
    overflow: visible;
    justify-content: flex-start;
  }
  .edaat-login__column {
    gap: var(--edaat-space-32);
  }
  /* the auth area is min-height here, so pin the footer to the bottom of it */
  .edaat-footer-compact--bar {
    margin-block-start: auto;
  }
}
/* ---------- Below md (768): phone ----------
   Paired fields stack on their own — they are `col-12 col-md-6`. */
@media (max-width: 767.98px) {
  .edaat-auth__panel, .edaat-auth__panel--login {
    padding-inline: var(--edaat-space-20);
  }
  .edaat-footer-compact--bar {
    padding-inline: var(--edaat-space-20);
  }
  .edaat-stepper {
    gap: var(--edaat-space-8);
  }
  .edaat-step__label {
    font-size: var(--edaat-type-body-xs-size);
  }
  .edaat-reg__head {
    flex-wrap: wrap;
  }
  .edaat-reg__title {
    font-size: var(--edaat-type-heading-md-size);
    line-height: var(--edaat-type-heading-md-line);
  }
  .edaat-login__title {
    font-size: var(--edaat-type-heading-lg-size);
    line-height: var(--edaat-type-heading-lg-line);
  }
  /* Footer/Compact stops being one 56px row */
  .edaat-footer-compact {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--edaat-space-8) var(--edaat-space-16);
    block-size: auto;
    padding-block: var(--edaat-space-16);
  }
  .edaat-footer-compact--bar {
    block-size: auto;
  }
  .edaat-reg__actions {
    gap: var(--edaat-space-12);
  }
  .edaat-reg__actions .edaat-btn {
    flex: 1 1 0;
  } /* Back and Next share the row */
  /* 366 is wider than a 360px phone */
  .edaat-modal__box, .edaat-modal__box--md {
    inline-size: min(var(--edaat-modal-width-sm), 100vw - 32px);
  }
  .edaat-modal__actions {
    flex-wrap: wrap;
  }
  .edaat-modal__actions .edaat-btn {
    flex: 1 1 auto;
  }
}
/* ---- The compact footer belongs on the bottom edge ----
   On a login or reset view the form is short, so the footer sat directly
   under it with a screen's worth of white below. Two things were in the way:

   1. `.edaat-auth__row` carries `block-size: 100%`, and on mobile its parent
      has only a `min-block-size` — its `block-size` is `auto`. A percentage
      against an auto height resolves to auto, so the row collapsed to its
      content (453 inside a 699 box) and, being an explicit height, it also
      blocked the stretch that would otherwise have filled the parent.
   2. Inside the panel nothing absorbed the slack, so even a full-height
      panel would have left the gap under the footer rather than above it.

   Releasing the height lets `align-items: stretch` fill the row, and the
   form wrapper taking the slack pushes the footer to the bottom edge. */
@media (max-width: 767.98px) {
  /* `block-size: auto` alone was not enough — the row is a flex item and
     stretch was not filling it. The parent has a DEFINITE computed height
     (699px, from its own min-block-size), so a percentage minimum resolves
     against it where stretch did not. */
  .edaat-auth__row {
    block-size: auto;
    min-block-size: 100%;
  }
  .edaat-auth__panel--login .edaat-login__wrap {
    flex: 1 1 auto;
  }
}
@media (max-width: 767.98px) {
  .edaat-footer-compact--bar {
    padding-inline: 0;
  }
}
/* =============================================================
   HOME — the one page drawn at 1440, and the one carrying
   components from outside the Edaat system. Measured from
   `Home — Design System` (3012:8886).

   Its hero type comes from the DGA kit the original was built
   on (`colors/neutral/300`, `typography/font-size/display-10`),
   not Edaat's scale — 60px display and 18/1.5 body have no step
   on our ramp. Those values stay literal and are named here so
   they read as foreign rather than arbitrary.
   ============================================================= */
:root {
  --edaat-home-hero-display: 60px; /* DGA display-10; Edaat's own display-lg is 42 */
  /* Aliased, not pinned: this is a Layer 3 knob and its job is to point at a
     Layer 2 role, so changing the role changes the hero with it. */
  --edaat-home-hero-fg: var(--edaat-text-inverse); /* white on the photo */
  --edaat-home-hero-fg-muted: #f1f2f9; /* colors/neutral/300 */
  --edaat-home-cta-bg: #f3f4f6; /* button-background-neutral-default */
  --edaat-home-cta-fg: #161616; /* text/text-default */
}

/* ---------- Hero band (3012:8891 + 3012:8921 + 3012:8922) ----------
   1440 x 804: the gradient photograph runs the full band, the
   floating pill sits on it at y=40, the content group at y=104,
   and the slide dots at y=746. */
/* Slides are grid-stacked rather than absolutely positioned: they
   still overlay for the cross-fade, but each one contributes height,
   so below the drawn width the hero can grow with its copy instead
   of staying pinned at 804. */
/* Figma draws the hero 804 tall. On a screen taller than that the next
   section peeked above the fold, so the band also fills the viewport:
   `max(804px, 100svh)` keeps the drawn height as the floor and grows to
   the window from there. svh, not vh, so a phone's collapsing toolbar
   does not leave a gap.

   `hero-sky.svg` is the fallback under the photograph and nothing else —
   a vector rebuild of the same sky, for when the raster has not arrived. */
.edaat-home-hero {
  isolation: isolate; /* the hero owns its own stacking order */
  inline-size: 100%;
  grid-template-columns: 1fr;
  min-block-size: 100vh;
  min-block-size: 100svh;
  background: url("../images/home/hero-sky.svg") 0 0/100% 100% no-repeat;
  /* ONE AXIS ONLY. The artwork bleeds sideways and must be contained, but the
     navbar is nested INSIDE this box and its menu drops out of the bottom —
     clipping both axes swallowed half the menu (measured: a 184x270 panel cut
     off at the hero's edge, 3 of its 6 rows gone). `clip` on one axis is the
     one value that leaves the other genuinely visible; hidden/scroll/auto
     would force this axis to auto and add a scrollbar. Same trick, same
     reason, as .edaat-logo-strip. */
  overflow-x: clip;
}

/* One layer per slide. `hero` (1804:13677) is a two-variant component
   set — Default and Variant3 — and the two dots the original draws
   are those variants, so the variants ARE the slides. Each carries
   its own band: the shared gradient with that variant's artwork. */
/* The active slide is an ATTRIBUTE, not a script-only class, so the served
   markup is already in a valid state: slide 1 carries `data-active` in
   Home.html and the script only takes over from there. Keyed to a class the
   script alone can add, a hero that hides itself here is a full-viewport
   blank whenever that file does not arrive — and `visibility` takes the
   "Get Started" CTA out of the tab order and the a11y tree with it, so the
   page loses its only above-the-fold conversion path rather than just its
   looks. Same mechanism as `.edaat-auth__slide`, which was already right.

   `visibility 0s linear .6s` holds the OUTGOING slide visible for the length
   of the opacity fade. Without it the flip to hidden lands on the first frame
   whatever the opacity is doing, the declared fade never renders a pixel, and
   the bare sky shows between slides. The active rule repeats the transition
   with `visibility 0s` so the incoming direction stays instant. */
.edaat-home-hero__slide {
  grid-area: 1/1;
  /* A one-row grid so the band FILLS the slide. The slide is stretched to
     the hero's 100svh row, but the band is only as tall as its own
     min-block-size - so below 1440 the copy sat in the top 560 of a
     750-tall hero and read as "too high", which is exactly what it was.
     `__photo` is absolutely positioned, so it is not a grid item and
     nothing about the artwork moves. */
  grid-template-rows: 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.edaat-home-hero__slide[data-active] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}

/* Declared here, not inline: a url() inside a custom property is
   resolved against the stylesheet that USES it, so an inline
   document-relative path 404s against css/. */
/* Each slide also states the WINDOW the stacked mobile hero crops to, because
   the two artworks are not built the same way. Slide 1 has a small chart card
   floating clear of the dashboard, and that card has to appear whole, as it does at laptop size - so slide 1 reaches back to 783
   to take it in. Slide 2 has no such card and its mock-up starts at 865, so
   reaching back there would only drag in bare gradient. Same y band, same
   trailing edge, so both share one background-position.

   x 783-1439 and x 865-1439, y 198-682, of 1440 x 804. The arithmetic is in
   the stacked-hero block at the end of this file. */
.edaat-home-hero__slide--1 {
  /* MEASURED 2026-09-17: the artwork carries a hard 1-2px dark line down the
     leading edge of each window - the composited edge of the capture, not a
     drawn shadow (darkest pixel 33 against a column mean of 224). Trim it off
     the stacked shot. Slide 1 clears at image x 795, i.e. 12 of its 657: */
  --edaat-shot-trim: 1.827%;
  /* The laptop mask states the same trims in COLUMNS instead, because it has
     to place px-sized corner pieces against them and a percentage of the box
     cannot be used as a distance from an edge. Both windows, from this box's
     origin at image x 783: the dashboard starts at 873 (90 columns), and the
     floating card's own strip at 795 (12) x 409 (211 rows below the 198 the
     box starts at), running 93.116 x 180. Scanned off hero-band.png, and they
     agree with the percentages this file already carried. */
  --edaat-dash-col: 90;
  --edaat-card-col: 12;
  --edaat-card-row: 211;
  --edaat-card-cols: 93.116;
  --edaat-card-rows: 180;
  --edaat-card-r: 16px;
  --edaat-band: url("../images/home/hero-band.png");
  /* The window's width in image columns. The side-by-side shot is drawn at
     100vw x span / 1440 - this window at the scale the 1440 artboard draws
     it at - so both slides put the dashboard on screen at the same size even
     though their windows are not the same width. */
  --edaat-shot-span: 657;
  --edaat-shot-ratio: 657 / 485;
  --edaat-shot-size: 219.178%;
}

.edaat-home-hero__slide--2 {
  /* clears at image x 873, i.e. 8 of its 575 */
  --edaat-shot-trim: 1.391%;
  /* Same 873, but this box starts at 865, so 8 columns rather than 90. No card
     here, so the four --edaat-card-* properties are left UNSET and the var()
     fallbacks in the mask resolve them to 0, collapsing those four layers. */
  --edaat-dash-col: 8;
  --edaat-band: url("../images/home/hero-band-2.png");
  --edaat-shot-span: 575;
  --edaat-shot-ratio: 575 / 485;
  --edaat-shot-size: 250.435%;
}

/* The band is one photograph carrying the gradient AND the artwork, so
   the two cannot be scaled apart — which is exactly why it is one layer
   again. It is `cover`, so nothing in it is ever distorted, and the
   anchor decides what a box of the wrong ratio loses:

     >= 1000  anchored RIGHT — a taller box crops the leading edge, which
              is plain gradient, and the dashboard survives whole
     <  1000  anchored LEFT — the box is far taller than the photograph
              is deep, so the dashboard crops off the trailing edge and
              the copy keeps clean gradient under it. That is what the
              original already does at 1440, where the artwork runs to
              1669 and the frame cuts it.

   There is no animated layer over this any more: the photograph replaced
   it, so the WebGL field that used to paint the sky is gone. The WebGL implementation that drew it was deleted on 2026-09-17. */
.edaat-home-hero__photo {
  inset: 0;
  z-index: 0;
  background: var(--edaat-band) right center/cover no-repeat;
}

/* ---------- The field, wherever the mock-up is not drawn from it ----------
   Below 1280, and in portrait at any width, the mock-up is either drawn as
   its own box or not drawn at all. The photograph is then the FIELD only,
   and it must not leak the artwork composited into its trailing end.

   ONE DECLARATION DOES IT, AND IT IS ARITHMETIC RATHER THAN A GUESS. The
   leftmost mock-up pixel in either artwork is x 783 - slide 1 floating
   chart card, 82 ahead of the dashboard both slides share at x 865. Widen
   the box to 1440/783 = 183.908% of the hero and anchor it to the image
   leading edge: `cover` must then scale the image so that AT MOST 783 of
   its 1440 columns can fall inside the hero, whatever the viewport ratio,
   and the hero existing `overflow-x: clip` swallows the rest. There is no
   viewport at which the mock-up can appear.

   WHY THE BOX AND NOT background-size. A percentage background-size is
   width-driven, so it stops covering on a tall viewport and the sky shows
   through above and below. Widening the box leaves `cover` doing its own
   job - full coverage, no seam, one photograph - and only removes the case
   where cover would have been width-driven far enough to reach x 783.

   MEASURED: this changes NOTHING on a portrait viewport, where cover is
   already height-driven and the crop already stops short of 783. At
   768x1024 the visible window is image x 0-603 before and after. What it
   fixes is the landscape phone and the short wide window - at 844x390 cover
   was width-driven and drew all 1440 columns, dashboard included.

   THE BOX HANGS OFF THE SAME PHYSICAL SIDE IN BOTH DIRECTIONS, which is the
   one thing here that is not logical and cannot be. The edge being anchored
   is the IMAGE leading edge, not the page reading edge:
   `background-position: left` names a column of pixels, so if the box
   flipped with the direction the clipped-away end would change side while
   the background did not, and Arabic would be handed the dashboard. Stated
   logically here, which is correct in LTR on its own; overrides/_rtl.scss
   re-anchors it to the same physical edge under RTL, because the shared core
   is not allowed to write a physical left or right and should not. */
@media (max-width: 1279.98px), (max-aspect-ratio: 1/1) {
  .edaat-home-hero__photo {
    inline-size: 183.908%; /* 1440 / 783 */
    inset-inline-end: auto;
    background-position: left center;
  }
}
/* Below 1440 this is a plain flow container for the copy — it is what
   gives the hero its height. At 1440 it becomes the drawn stage. */
.edaat-home-hero__band {
  position: relative;
  z-index: 1;
  min-block-size: 640px;
  /* Centred - and the two block paddings differ BY THE HEIGHT THE NAVBAR
     OCCUPIES, which is the whole trick.

     The pill is absolutely positioned inside this box's top padding: 40
     from the top and 64 tall, so it eats 104 of it. Centre the copy in
     the content box and the copy is geometrically centred but LOOKS high,
     because the empty space a reader actually sees above it is 104 short.
     Symmetric padding was tried here first and was wrong for exactly
     that reason.

     So: padding-start - padding-end = 104, and the two visible gaps come
     out equal. Figma's own 200/96 already differed by 104 - the drawn
     value was right all along and only the narrower breakpoints, which
     were guessed at 88 and 80, were off. Below 420 the pill wraps to two
     rows and takes ~156, so the difference grows to match.

     Keep the SUM if you change these; it is what sets the band's height. */
  flex-direction: column;
  justify-content: center;
  padding-block: 200px 96px; /* sum 296, difference 104 */
  padding-inline: var(--edaat-space-60);
}

/* Navbar and dots are not part of a slide — they sit above all of them. */
.edaat-home-hero__chrome {
  inset: 0;
  z-index: 3;
}

.edaat-home-hero__chrome > * {
  pointer-events: auto;
}

.edaat-home-hero__chrome > .edaat-navbar--floating {
  position: absolute;
  inset-block-start: var(--edaat-space-40);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* Below lg Home's bar joins the other pages: full-bleed, with the page gutter
   as its own padding so the logo starts exactly where the content starts.
   It has to sit AFTER the rule above — same specificity, and source order is
   the only thing separating them. The chrome is already inset by the gutter,
   so the bar bleeds back out over that inset rather than off the viewport. */
@media (max-width: 991.98px) {
  .edaat-home-hero__chrome > .edaat-navbar--floating {
    inset-inline: calc(var(--edaat-navbar-float) * -1);
    transform: none;
    margin-inline: 0;
    padding-inline: var(--edaat-navbar-float);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* the active rule declares its own transition and outranks a bare class
     selector, so it has to be named here or the fade survives the setting */
  .edaat-home-hero__slide,
  .edaat-home-hero__slide[data-active] {
    transition: none;
  }
}
/* Figma trims these boxes to cap height, so the eyebrow measures 13
   rather than 24.3 and the gaps between them are 24 / 36 / 40 from
   cap to cap. text-box reproduces that exactly; without it the whole
   column sits ~11 low and every gap is wrong. */
.edaat-home-hero__copy {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-inline-size: 443px;
}

.edaat-home-hero__eyebrow,
.edaat-home-hero__title,
.edaat-home-hero__body {
  text-box: trim-both cap alphabetic;
}

.edaat-home-hero__eyebrow {
  margin: 0 0 24px;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.35;
  color: var(--edaat-home-hero-fg-muted);
}

.edaat-home-hero__title {
  margin: 0 0 36px;
  /* 60 is the drawn size and holds at 1440; below that it scales so
     a 25-character headline still fits a phone column. */
  font-size: clamp(36px, 3.4vw + 22px, var(--edaat-home-hero-display));
  line-height: 1.02;
  font-weight: 600;
  color: var(--edaat-home-hero-fg);
}

.edaat-home-hero__body {
  margin: 0 0 var(--edaat-space-40);
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.5;
  color: var(--edaat-home-hero-fg-muted);
}

/* Not an Edaat button: the original's neutral CTA, 40 tall, pill,
   body-md on a near-white fill.

   WEIGHT ONLY, 2026-09-13: Home's buttons carry the primary button's font
   weight, with the colours unchanged. .edaat-btn is 600,
   this was drawn at 500, and at 16px on a light pill the difference reads as
   a weaker button rather than a different one. Nothing else moves: the fill,
   the label colour, the height, the padding and the radius are all unchanged.

   Arabic renders this one step heavier again. Tajawal has no 600, so semibold
   resolves to 700 - a known property of the Arabic type family, not a
   separate bug. */
.edaat-home-hero__cta {
  gap: var(--edaat-space-4);
  block-size: 40px;
  padding-inline: calc(var(--edaat-space-16) - 1px);
  border: 1px solid transparent;
  border-radius: var(--edaat-radius-full);
  background: var(--edaat-home-cta-bg);
  color: var(--edaat-home-cta-fg);
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  /* .edaat-btn's weight - see the note above */
  text-decoration: none;
}

.edaat-home-hero__cta:hover {
  background: var(--edaat-white);
}

.edaat-home-hero__cta:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-white);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* Slide dots — 12x8 radius 10, gap 4, active white / rest #b8c0cc.
   Same control as the auth hero carousel. */
.edaat-home-hero__dots {
  z-index: 2;
  inset-block-end: var(--edaat-space-40);
  inset-inline: 0;
  gap: var(--edaat-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edaat-home-hero__dot {
  inline-size: 12px;
  block-size: 8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #b8c0cc;
  cursor: pointer;
}

.edaat-home-hero__dot[aria-current=true] {
  background: var(--edaat-white);
  cursor: default;
}

.edaat-home-hero__dot:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-white);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* ---------- Home hero — responsive ----------
   Figma draws Home at 1440 and nothing narrower, so 1440-up is the
   measured layout and everything below it is a judgement call:
   an 804 band with the stage centred at its drawn width, the copy at
   136 / 275.5 and the dots at 771 — against a flow column that grows
   with its own copy. */
@media (min-width: 1440px) {
  .edaat-home-hero {
    min-block-size: max(804px, 100svh);
  }
  .edaat-home-hero__band {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 1440px;
    min-block-size: 0;
    padding: 0;
  }
  /* Figma puts the copy's centre 63 below the band's (top 275.5, height
     379.1, in an 804 band). Anchoring it to the centre reproduces that
     exactly at 804 and keeps the same relationship to the artwork when
     the band grows, where a fixed top offset would leave it stranded. */
  .edaat-home-hero__copy {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(calc(-50% + 63px));
    inset-inline-start: 136px;
    inline-size: 443px;
    max-inline-size: none;
  }
  .edaat-home-hero__chrome {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%);
    inline-size: 1440px;
  }
  /* Figma's pills sit 25 off the bottom edge (top 771 + 8 in an 804
     band); as an end offset that holds at any height. */
  .edaat-home-hero__dots {
    inset-block-end: 25px;
    inset-block-start: auto;
  }
}
@media (max-width: 991.98px), (max-aspect-ratio: 1/1) {
  .edaat-home-hero__band {
    min-block-size: 560px;
    padding-block: 184px 80px; /* sum 264 as drawn, difference 104 */
    padding-inline: var(--edaat-gutter);
  }
  /* The pill is 798 and the chrome is full-bleed, so below that width
     it ran edge to edge with no inset at all — a floating pill has to
     float. Inset the box rather than padding it: the pill is absolutely
     positioned, so its 50% and its max-inline-size resolve against the
     padding box and padding alone changes nothing. */
  .edaat-home-hero__chrome {
    inset-inline: var(--edaat-gutter);
  }
}
@media (max-width: 767.98px) {
  .edaat-home-hero__band {
    min-block-size: 520px;
    padding-block: 172px 68px; /* sum 240 as drawn, difference 104 */
  }
}
@media (max-width: 419.98px) {
  /* the pill wraps to two rows below 420, so the copy needs the extra
     clearance the taller bar takes */
  /* the wrapped pill is ~116 tall, so it occupies ~156 - the difference
     grows with it. Sum 288, as drawn. */
  .edaat-home-hero__band {
    padding-block: 222px 66px;
  }
}
/* ---------- The mock-up beside the copy, 992-1279 ----------
   Requirement (2026-09-20): as the window narrows the shot must stay BESIDE the
   text and get smaller, never drop below it.

   THE GATE MOVED 1200 -> 992 on 2026-09-23, because 1200 was never the width
   at which the two columns stop fitting - it was just a round number. The
   fit is arithmetic and it is the WIDER of the two artworks that binds:

     copy       443 fixed (flex: 0 0 auto against its own cap), starting one
                band padding in, so it ends at 60 + 443 = 503
     shot       100vw * span / 1440, flush to the glass - slide 1 is the wide
                one at span 657, i.e. 0.45625 * W
     they meet  when 0.54375 * W = 503, i.e. at W = 925

   So the columns genuinely fit down to 925, and the gate is put at 992
   rather than 925 for two reasons that are not taste. First, 992 leaves a
   real gutter between them (36.4px at the gate, against 0 at 925). Second,
   the band's padding-inline drops from 60 to the page gutter below 992, and
   the shot's `margin-inline-end: calc(-1 * var(--edaat-space-60))` is what
   makes the artwork finish exactly ON the glass; below 992 that -60 would
   overshoot the 24 of padding and hang 36 of dashboard off the viewport for
   `overflow-x: clip` to eat. The two columns and the padding contract stop
   agreeing at the same place, and that place is lg.

   IT HAS TO BECOME ITS OWN BOX TO SHRINK AT ALL. On the artboard the field
   and the mock-up are one photograph painted `cover`, so on any window
   taller than 804/1440 the cover scale is driven by HEIGHT: narrowing the
   window does not shrink the artwork, it slides it left into the copy.
   MEASURED against a copy that ends at x 503, before this block existed:

     1366x768   dashboard starts at 816   clear
     1200x950   dashboard starts at 505   touching
     1024x768   dashboard starts at 459   44px INTO the text

   So the shot is cut out of the artwork as its own element and laid out as
   the second column. Same window, same masks, same 13.14 radius as the
   stacked box this replaces - what changes is where it sits and that its
   width is now stated rather than left to cover.

   DRAWN AT THE VIEWPORT OWN SCALE, which is what makes it shrink: the
   window is `span` image columns of 1440, so `100vw * span / 1440` is that
   window at exactly the scale the 1440 artboard draws it at, and it tracks
   the viewport down to the gate. `aspect-ratio` carries the height with it,
   so nothing is ever squashed or cropped further.

   WHICH EDGE IS WHICH, because everything below turns on it and getting it
   wrong ships a sliced dashboard facing the middle of the page:

     box LEADING edge   image x 865 (783 on slide 1) - where the dashboard
                        starts, and it carries the artwork OWN rounded
                        corners. This edge is meant to face the page.
     box TRAILING edge  image x 1440 - the artwork last column. The mock-up
                        is composited hard against it, so this edge is a cut
                        through the UI and has to end up against the glass.

   MIRRORED IN ARABIC ONLY, and that is not symmetry for its own sake. The
   box is flush to the inline-END edge, which is the physical RIGHT in
   English and the physical LEFT in Arabic - but the cut is on the image
   physical right either way, because the image is never mirrored. So:

     LTR   flush right  + no transform    cut meets the right glass   correct
     RTL   flush left   + scaleX(-1)      cut sent to the left glass  correct
     RTL   flush left   + no transform    cut faces the page          WRONG

   The third line was shipped on 2026-09-20 and reported the same day. The
   mirror is also what 1280-up already does with the whole photograph, so
   this makes the two sides of the 1280 step agree rather than disagree.
   Reversed Latin in the mock-up is not a new cost: the words were taken out
   of the artwork in Figma precisely so the desktop mirror could stand.

   The radius is therefore stated on the LEADING edge, logically here where
   inline-start is that edge in English, and swapped in overrides/_rtl.scss
   where the mirror moves it. */
@media (min-width: 992px) and (max-width: 1279.98px) and (min-aspect-ratio: 1/1) {
  .edaat-home-hero__band {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  /* The copy keeps its 443 measure and gives none of it up: the shot takes
     what is left over, never the other way round. `flex: 0 0 auto` against the
     cap already on .__copy is what guarantees the text is never compressed. */
  .edaat-home-hero__copy {
    flex: 0 0 auto;
  }
  .edaat-home-hero__band::after {
    content: "";
    flex: 0 0 auto;
    /* to the end of the row, and one band padding past it, so the artwork
       finishes ON the glass exactly as it does at 1440 */
    margin-inline-start: auto;
    margin-inline-end: calc(-1 * var(--edaat-space-60));
    inline-size: calc(100vw * var(--edaat-shot-span) / 1440);
    aspect-ratio: var(--edaat-shot-ratio);
    background-image: var(--edaat-band);
    /* The window, in the image own coordinates - the three numbers are the
       one calculation derived where the slide variables are set. 100% is the
       image trailing column and must NOT become a logical value: the image
       is never mirrored, so this is the same edge in Arabic. */
    background-position: 100% 62.069%;
    background-size: var(--edaat-shot-size) auto;
    background-repeat: no-repeat;
    /* THE RADIUS IS PINNED AT 16px, AND THAT IS WHY IT IS BUILT FROM
       GRADIENTS RATHER THAN FROM border-radius OR A SCALED SVG.

       Two earlier shapes both failed, and the reasons are worth keeping:

       border-radius is anchored to the ELEMENT box. That works on slide 2,
       where the box IS the dashboard window (span 575 = image x 865, the
       window's own leading edge). It CANNOT work on slide 1, whose box is
       widened to 657 to take in the floating card: there the box's leading
       edge is the CARD at image x 783 and the dashboard's is 90 columns
       further in, so the radius rounded a corner ~68px away from the window
       it was meant to round - MEASURED, slide 1 rendered a hard 90 degrees
       while slide 2 rendered a clean arc from the identical artwork.

       An SVG rounded-rect mask fixes WHERE the arc lands, but not its size:
       the viewBox scales with the layer and that scale is viewport-driven, so
       a radius stated in viewBox units drifts (18.0px at 992, 20.0 at 1100,
       23.3 at 1279 - measured). A static viewBox cannot carry a
       viewport-dependent unit, so an exact px is not expressible that way.

       So each window is assembled from FOUR mask layers whose corner pieces
       are sized in px: two rectangles whose union is the window minus its two
       leading corner squares, plus a quarter-disc in each of those squares.
       --edaat-shot-r is a real CSS length, so 16px is 16px at every width in
       this range, in both directions.

       EVERY NUMBER IS AN ARTWORK COLUMN, via --edaat-shot-u = 100vw/1440 - the
       length one column of the 1440-wide artwork occupies once the shot is
       drawn at 100vw x span/1440. That is the same unit the box itself is
       sized in, so the rectangles cannot drift out of step with it.

       The dashboard window is the same 567 x 485 columns on BOTH slides
       (image x 873..1440, y 198..683); only its offset from the box origin
       differs, because the origins differ - 90 columns on slide 1 (from 783),
       8 on slide 2 (from 865). Those 8 columns are the baked dark composite
       line described at the top of this file; they are what --edaat-shot-trim
       used to express as a percentage, and stating them in columns is what
       let slide 1 finally trim its own (it had silently stopped applying the
       variable - see the slide 1 note below).

       The card layers are always present and collapse to nothing on slide 2,
       where the --edaat-card-* properties are unset and their fallbacks make
       them 0: a zero-sized no-repeat layer paints nothing, so one mask
       declaration serves both slides and neither restates the other's.

       The quarter-discs feather over the last 4% (~0.6px) so the curve is
       antialiased; the layers overlap rather than abut, because two mask
       layers that merely meet leave a hairline seam.

       farthest-side, NOT closest-side. Each disc is centred ON the corner it
       rounds (at 100% 100% / at 100% 0), so two of the four sides of its own
       16x16 box are at distance 0 - closest-side sizes the circle to that 0
       and draws NOTHING. MEASURED: both windows rendered with a 16px square
       notch stepped out of each leading corner, which reads as a layout bug
       rather than as a missing gradient.

       Arabic needs nothing extra - _rtl.scss mirrors the element and the mask
       mirrors with it, so these physical lengths stay on the features they
       were measured against. */
    --edaat-shot-u: calc(100vw / 1440);
    --edaat-shot-r: 16px;
    --edaat-dash-x: calc(var(--edaat-shot-u) * var(--edaat-dash-col, 8));
    --edaat-dash-w: calc(var(--edaat-shot-u) * 567);
    --edaat-dash-h: calc(var(--edaat-shot-u) * 485);
    /* The card's four numbers are read with var() FALLBACKS rather than given
       defaults here, and that distinction is load-bearing: custom properties
       inherit, so declaring `--edaat-card-cols: 0` on this pseudo-element
       would OVERRIDE the value slide 1 sets on its own element and the card
       would never be revealed. A fallback only applies when the property is
       genuinely unset, which is exactly slide 2. */
    --edaat-card-rr: var(--edaat-card-r, 0px);
    --edaat-card-x: calc(var(--edaat-shot-u) * var(--edaat-card-col, 0));
    --edaat-card-y: calc(var(--edaat-shot-u) * var(--edaat-card-row, 0));
    --edaat-card-w: calc(var(--edaat-shot-u) * var(--edaat-card-cols, 0));
    --edaat-card-h: calc(var(--edaat-shot-u) * var(--edaat-card-rows, 0));
    --edaat-mask-layers:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0),
      radial-gradient(circle farthest-side at 100% 100%, #000 96%, transparent 100%),
      radial-gradient(circle farthest-side at 100% 0, #000 96%, transparent 100%),
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0),
      radial-gradient(circle farthest-side at 100% 100%, #000 96%, transparent 100%),
      radial-gradient(circle farthest-side at 100% 0, #000 96%, transparent 100%);
    --edaat-mask-sizes:
      var(--edaat-dash-w) calc(var(--edaat-dash-h) - 2 * var(--edaat-shot-r)),
      calc(var(--edaat-dash-w) - var(--edaat-shot-r)) var(--edaat-dash-h),
      var(--edaat-shot-r) var(--edaat-shot-r),
      var(--edaat-shot-r) var(--edaat-shot-r),
      var(--edaat-card-w) calc(var(--edaat-card-h) - 2 * var(--edaat-card-rr)),
      calc(var(--edaat-card-w) - var(--edaat-card-rr)) var(--edaat-card-h),
      var(--edaat-card-rr) var(--edaat-card-rr),
      var(--edaat-card-rr) var(--edaat-card-rr);
    --edaat-mask-spots:
      var(--edaat-dash-x) var(--edaat-shot-r),
      calc(var(--edaat-dash-x) + var(--edaat-shot-r)) 0,
      var(--edaat-dash-x) 0,
      var(--edaat-dash-x) calc(var(--edaat-dash-h) - var(--edaat-shot-r)),
      var(--edaat-card-x) calc(var(--edaat-card-y) + var(--edaat-card-rr)),
      calc(var(--edaat-card-x) + var(--edaat-card-rr)) var(--edaat-card-y),
      var(--edaat-card-x) var(--edaat-card-y),
      var(--edaat-card-x) calc(var(--edaat-card-y) + var(--edaat-card-h) - var(--edaat-card-rr));
    -webkit-mask-image: var(--edaat-mask-layers);
    -webkit-mask-size: var(--edaat-mask-sizes);
    -webkit-mask-position: var(--edaat-mask-spots);
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--edaat-mask-layers);
    mask-size: var(--edaat-mask-sizes);
    mask-position: var(--edaat-mask-spots);
    mask-repeat: no-repeat;
  }
  /* WHY SLIDE 1 NO LONGER OVERRIDES THE MASK AT ALL — kept because the bug it
     used to carry is an easy one to reintroduce.

     Slide 1 reaches back to image x 783 to take in its floating chart card,
     so its box holds TWO windows and the mask has to reveal both. That used to
     be an override on this selector, restating `mask-size` as
     `87.519% 100%, 14.173% 37.113%`.

     THE OVERRIDE SILENTLY DROPPED A VARIABLE. The generic rule trimmed the
     baked dark composite line with `calc(100% - var(--edaat-shot-trim))`;
     restating `mask-size` wholesale threw that calc away, so
     --edaat-shot-trim stayed defined, stayed correct, and stopped applying
     here. MEASURED: a 1-2px dark line down the whole leading edge of the
     dashboard, ending in SQUARE corners against a window whose own corners are
     round - which is exactly what "the corner edge shadow is sharp" was.
     Slide 2 never showed it only because its single-layer mask still went
     through the generic calc.

     The fix is structural rather than another override: the mask above is
     driven entirely by per-slide CUSTOM PROPERTIES, and this slide sets its
     four card numbers where it sets its span. There is no second mask
     declaration that can fall out of step with the first. */
}
/* ---------- Tablet and phone: no mock-up at all ----------
   Requirement (2026-09-20): below the tablet gate the shot goes entirely - no
   box, no reserved space, no placeholder, nothing standing in for it. The
   column is words again, so it also gives back the three rules that widened
   it to hold a picture and the band padding that stopped centring it; those
   are simply absent now rather than overridden, and the text-only values a
   few blocks up are what apply. The copy centres in the band exactly as it
   did before a picture was ever put in the column.

   THE GATE IS WIDTH OR SHAPE, and it needs both halves. 992 is where the
   copy and the shot stop fitting side by side - the arithmetic is in the
   block above - and it is also lg, so the band is already changing its
   padding and its height there rather than being cut at an unrelated number.
   Every iPad in landscape still clears it (1024, 1180, 1194, 1366), which is
   the point: those are two-column windows and they keep the picture.
   `max-aspect-ratio: 1/1` then takes every iPad in PORTRAIT whatever its
   width - including the 12.9 at 1024x1366, which is wider than the gate -
   and any desktop window turned taller than it is wide. Together they are
   what "no room for two columns" means.

   `content: none` RATHER THAN A WIDTH OR display:none. At exactly 1/1 this
   block and the 992-1279 block above both match and source order alone
   separates them, which is why this one is last. Removing the pseudo-element
   outright leaves no box for a later rule to get wrong, and nothing to
   reserve space, paint a background or cast a shadow.

   AND THE COLUMN CENTRES ITSELF once there is nothing beside it. The copy
   keeps its drawn 443 measure, so in a band wider than that it was pinned to
   the reading edge with the whole of the rest of the band empty - 301px of
   bare gradient at 768, which is exactly the space the picture vacates.
   `margin-inline: auto` splits that space instead of hanging it all off one
   side. NOTHING INSIDE THE COLUMN MOVES: the eyebrow, headline, body and CTA
   stay start-aligned as drawn (they are held there by `align-items-start` in
   the markup, a Bootstrap utility and therefore !important - this could not
   re-align them even if it wanted to), and below ~460 the column already
   fills the band, so auto resolves to 0 and a phone is untouched. Above
   1440 the copy is absolutely positioned at 136, where auto margins on a box
   with a definite inline-start and width resolve to 0 as well. */
@media (max-width: 991.98px), (max-aspect-ratio: 1/1) {
  .edaat-home-hero__band::after {
    content: none;
  }
  .edaat-home-hero__copy {
    margin-inline: auto;
  }
}
/* ==================================================================
   OUR CLIENTS / OUR PARTNERS — the marquee
   ================================================================ */
/* ---------- Our Clients / Our Partners (3012:8943) ----------
   1440 x 388: two blocks 60 apart inside 60 of block padding, each a
   label over a full-bleed 62-tall logo row.

   Both rows are marquees in the original — the inner strip is drawn
   wider than its frame (1440 shown of 3320, and 2919 offset to
   -1349) with the logos repeating, which is how a ticker is drawn in
   a static file. Built as a real one, from a single-cycle strip
   captured from Figma: two copies translated by half the track loops
   seamlessly. Figma cannot record direction or speed, so left at a
   calm walking pace; it stops for prefers-reduced-motion. */
.edaat-logo-band {
  inline-size: 100%;
  gap: var(--edaat-space-60);
  padding-block: var(--edaat-space-60);
  background: var(--edaat-bg-page);
}

/* .edaat-logo-band__group: layout is Bootstrap (d-flex flex-column align-items-center)
   in the markup — exact equivalents, nothing left to declare here. */
/* Edaat/legacy/auto/Inter Semi Bold 18/lh-auto — a legacy style: the
   letters are spaced in the copy itself, not by letter-spacing. */
.edaat-logo-band__label {
  margin: 0;
  /* Figma spaces the letters in the copy itself, so the word break is a
     DOUBLE space — which HTML collapses to one, running "OUR" into
     "CLIENTS". Preserved rather than rewritten with entities. */
  white-space: pre-wrap;
  padding: var(--edaat-space-10);
  font-size: var(--edaat-type-body-lg-size);
  line-height: 22px; /* Figma resolves this legacy auto leading to 22; the browser gives 21.6 */
  letter-spacing: -0.54px;
  color: var(--edaat-brand-indigo);
}

/* The space after each logo. 80 is the drawn value and holds at full width;
   on the narrow layouts it is most of a logo's own width, so two marks and a
   lot of nothing is all that fits on a phone. Brought in a step at a time.
   The marquee cycle follows it automatically - see .edaat-logo-strip__track. */
:root {
  --edaat-logo-gap: 80;
}

@media (max-width: 991.98px) {
  :root {
    --edaat-logo-gap: 56;
  }
}
@media (max-width: 575.98px) {
  :root {
    --edaat-logo-gap: 44;
  }
}
.edaat-logo-strip {
  inline-size: 100%;
  block-size: 62px;
  /* The marquee must be clipped horizontally, but a logo growing on
     hover must not be: the clients sheet carries ink on all 62 rows,
     so `overflow: hidden` would cut the mark itself. `clip` on one axis
     is the one value that leaves the other genuinely `visible` —
     hidden/scroll/auto would force this to `auto` and add a scrollbar.
     The strip keeps its drawn 62 either way, so the band stays 388. */
  overflow-x: clip;
}

/* The two belts run at ONE speed and in OPPOSITE directions.

   Equal velocity is not equal duration: the belts carry different
   cycles — clients 1698, partners 1350 — so a shared duration would
   run one 26% faster than the other. The speed is therefore the single
   value, in px per second, and each belt derives its own duration from
   its own cycle. Change the speed and both change together; add a logo
   and only that row's cycle needs updating.

   `--edaat-marquee-cycle` is the width of ONE copy of the row, which
   is what a -50% translation travels: the logo widths plus the trailing
   80 that rides on each of them. */
/* THE GAP AND THE LOOP ARE ONE NUMBER. The keyframes travel exactly
   --edaat-marquee-cycle pixels, which has to equal the width of ONE copy of
   the row: shrink the gap without shrinking the cycle and the belt jumps
   backwards every loop, because it has travelled further than one copy.

   So the cycle is no longer a number typed into the markup. The markup
   states the two things it actually knows - the sum of its logo widths and
   how many logos are in one copy - and the cycle is computed from them and
   the gap. Change the gap at a breakpoint and the loop follows on its own.

     clients   898 + 10 x gap      partners  790 + 7 x gap

   Everything stays unitless: the duration divides by a px-per-second speed
   and the keyframes multiply by 1px, so a length here would break both. */
.edaat-logo-strip__track {
  inline-size: max-content;
  block-size: 62px;
  --edaat-marquee-cycle: calc(var(--edaat-logo-sum) + var(--edaat-logo-count) * var(--edaat-logo-gap));
  --edaat-marquee-speed: 37.5;
  animation: edaat-marquee calc(var(--edaat-marquee-cycle, 1698) / var(--edaat-marquee-speed) * 1s) linear infinite;
}

/* Clients runs with the reading direction, partners against it. Same
   keyframes reversed — the row is two identical copies, so starting at
   -50% and travelling to 0 loops just as seamlessly. */
.edaat-logo-strip--partners .edaat-logo-strip__track {
  animation-direction: reverse;
}

/* Hovering a moving target is a nuisance, so the belt stops while the
   pointer is over it. That is what makes the per-logo hover usable. */
.edaat-logo-strip:hover .edaat-logo-strip__track {
  animation-play-state: paused;
}

/* Each logo is a window onto the strip rather than its own file: one
   sprite per row, sliced on the offsets Figma lays the row out on, so
   each can carry its own hover without 17 requests.

   Two sheets, cross-faded. Figma desaturates every logo with
   saturation -1, so the grey sheet is the drawn state exactly; the
   colour sheet is the same image hashes at saturation 0. Fading
   between them is truer than a CSS grayscale() filter, which uses a
   different luminance matrix and would not match the drawn grey —
   and several of these logos also carry their own exposure and
   contrast adjustments that a filter would not reproduce.

   The 80 gap rides on each logo as a trailing margin rather than on
   the track, so two cycles measure 2 x (row + 80) and a -50%
   translation lands exactly one cycle on — seamless. */
.edaat-logo-strip__logo {
  flex: 0 0 auto;
  inline-size: calc(var(--edaat-logo-w) * 1px);
  block-size: 62px;
  margin-inline-end: calc(var(--edaat-logo-gap) * 1px);
  background-image: var(--edaat-logo-sheet-grey);
  background-repeat: no-repeat;
  background-position: calc(var(--edaat-logo-x) * -1px) 0;
  transform-origin: center;
  /* Requirement (2026-09-10): the pointer follows the grow-and-colour hover
     so the mark reads as a thing you can point at. Note these are sprite
     WINDOWS in an aria-hidden track, not links — there is no per-logo URL
     in Figma — so this is an affordance without a destination. Give me the
     client and partner URL list and each becomes a real <a> instead. */
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* A logo lifts 8% under the pointer, which reads as one gesture with
   the colour arriving. 1.05–1.1 is the usable band for a mark this
   small: below it nothing registers, above it the row looks jumpy.
   The sheets are opaque white and the gaps are 80, so the grown box
   spills only white into empty space and never touches a neighbour —
   but it is raised anyway so it can never be overlapped. */
.edaat-logo-strip__logo:hover {
  transform: scale(1.08);
  z-index: 1;
}

.edaat-logo-strip__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--edaat-logo-sheet-colour);
  background-repeat: no-repeat;
  background-position: calc(var(--edaat-logo-x) * -1px) 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.edaat-logo-strip__logo:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* both states still apply, they just arrive without travel */
  .edaat-logo-strip__logo,
  .edaat-logo-strip__logo::after {
    transition: none;
  }
}
.edaat-logo-strip--clients {
  /* Marquee arithmetic, moved off the track element 2026-09-16. --logo-sum is
     the summed WIDTH of one cycle of marks (not counting gaps) and --logo-count
     how many there are; _track_ turns the pair into --edaat-marquee-cycle.
     They belong to the sheet, so they live with it. */
  --edaat-logo-sum: 898;
  --edaat-logo-count: 10;
  --edaat-logo-sheet-grey: url("../images/home/clients-strip.png");
  --edaat-logo-sheet-colour: url("../images/home/clients-strip-colour.png");
}

.edaat-logo-strip--partners {
  --edaat-logo-sum: 790;
  --edaat-logo-count: 7;
  --edaat-logo-sheet-grey: url("../images/home/partners-strip.png");
  --edaat-logo-sheet-colour: url("../images/home/partners-strip-colour.png");
}

/* Travel exactly ONE cycle, in px. A -50% translation only works for a
   two-copy track, and two copies are not enough: after moving a full
   cycle the belt has only `cycle` of content left, so any viewport
   wider than that shows white. Expressed as a length, the number of
   copies becomes free — add one and the loop still lands perfectly. */
@keyframes edaat-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--edaat-marquee-cycle) * -1px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .edaat-logo-strip__track {
    animation: none;
  }
}
/* ============================ Sprite slots ============================
   One modifier per window on the sheet. These were 51 inline style="" attrs
   on index.html until 2026-09-16; the values are unchanged, they have simply
   moved to where the rest of the sprite lives - no inline style attributes.

   The slot NUMBER is the identity: it is the mark order on the sheet itself,
   left to right, which is the only name these windows have - the track is
   aria-hidden and Figma gives the marks no labels. Numbering rather than
   nth-child because the track repeats each cycle three times for the loop,
   so position in the DOM is not the slot.

   x is the left edge on the sheet, w the mark width. Read off the Figma row:
   every gap between marks is a constant 80, so x(n) = sum(w) + 80n.
   ==================================================================== */
.edaat-logo-strip__logo--c1 {
  --edaat-logo-x: 0;
  --edaat-logo-w: 90;
}

.edaat-logo-strip__logo--c2 {
  --edaat-logo-x: 170;
  --edaat-logo-w: 70;
}

.edaat-logo-strip__logo--c3 {
  --edaat-logo-x: 320;
  --edaat-logo-w: 130;
}

.edaat-logo-strip__logo--c4 {
  --edaat-logo-x: 530;
  --edaat-logo-w: 93;
}

.edaat-logo-strip__logo--c5 {
  --edaat-logo-x: 703;
  --edaat-logo-w: 74;
}

.edaat-logo-strip__logo--c6 {
  --edaat-logo-x: 857;
  --edaat-logo-w: 90;
}

.edaat-logo-strip__logo--c7 {
  --edaat-logo-x: 1027;
  --edaat-logo-w: 120;
}

.edaat-logo-strip__logo--c8 {
  --edaat-logo-x: 1227;
  --edaat-logo-w: 69;
}

.edaat-logo-strip__logo--c9 {
  --edaat-logo-x: 1376;
  --edaat-logo-w: 60;
}

.edaat-logo-strip__logo--c10 {
  --edaat-logo-x: 1516;
  --edaat-logo-w: 102;
}

.edaat-logo-strip__logo--p1 {
  --edaat-logo-x: 0;
  --edaat-logo-w: 70;
}

.edaat-logo-strip__logo--p2 {
  --edaat-logo-x: 150;
  --edaat-logo-w: 152;
}

.edaat-logo-strip__logo--p3 {
  --edaat-logo-x: 382;
  --edaat-logo-w: 125;
}

.edaat-logo-strip__logo--p4 {
  --edaat-logo-x: 587;
  --edaat-logo-w: 111;
}

.edaat-logo-strip__logo--p5 {
  --edaat-logo-x: 778;
  --edaat-logo-w: 141;
}

.edaat-logo-strip__logo--p6 {
  --edaat-logo-x: 999;
  --edaat-logo-w: 93;
}

.edaat-logo-strip__logo--p7 {
  --edaat-logo-x: 1172;
  --edaat-logo-w: 98;
}

/* ==================================================================
   THE CHALLENGE WE SOLVE
   ================================================================ */
/* ---------- Offerings — "The Challenge We Solve" (3012:8952) ----------
   1440 x 1388, padding 120, on white. A bento: two 468 rows, each an
   illustration card beside a pair of stacked text cards, mirrored.
   1197 = 673 + 24 + 500 — the same 673/24/500 split the two rows on
   this page share.

   Several values here are `legacy/*` in Figma rather than tokens, and
   are written out as such: space 22 / 43 / 42 / 51 / 55 / 14,
   radius 24, and the card fills #edebff and #e4e2ff. */
:root {
  --edaat-offer-card-a: #edebff; /* legacy/color/edebff */
  --edaat-offer-card-b: #e4e2ff; /* legacy/color/e4e2ff */
  /* Aliased to the primitive: there is no semantic role for indigo-100 yet,
     so the ramp is the base. Add a bg/accent-muted role and point here at it
     if this surface ever needs to move independently of the ramp. */
  --edaat-offer-card-flat: var(--edaat-indigo-100); /* bg/accent-muted */
  --edaat-offer-lead: #6f6c8f; /* legacy/color/6f6c8f */
  /* Was #64748b, the drawn value. It clears AA on the white parts of this
     section (4.76:1) but NOT on the flat offer card, whose fill is
     #ededf5 - 4.09:1 against 16px body text, under the 4.5 floor.
     Darkened one notch: 5.48:1 on the card, 6.38:1 on white. */
  --edaat-offer-body: #556070; /* legacy/text-slate-alt, named "Body Text", darkened for AA */
  --edaat-offer-radius: 24px; /* legacy/radius/24 */
}

.edaat-offerings {
  inline-size: 100%;
  gap: var(--edaat-space-48);
  padding-block: var(--edaat-space-120);
  /* The bento is 1197 inside Figma's 1200 container — 3px of slack. A
     1440 window with a classic scrollbar leaves only 1185 between two
     120 gutters, which squeezed the illustration cards from 673 to
     660.8. The gutter gives way before the content does, and never
     grows past Figma's 120. Above 1440 the container centres. */
  padding-inline: max(0px, min(var(--edaat-space-120), (100% - 1197px) / 2));
  background: var(--edaat-bg-page);
}

.edaat-offerings__header {
  inline-size: 100%;
  max-inline-size: 1197px; /* spans the container so it lines up with the bento */
  gap: var(--edaat-space-24);
}

/* the type itself keeps Figma's 808 measure, flush with the bento's edge */
.edaat-offerings__header > * {
  inline-size: 100%;
  max-inline-size: 808px;
}

.edaat-offerings__eyebrow {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.35;
  color: var(--edaat-brand-indigo);
}

/* legacy/display-40: 40/48, tracking -0.03em */
.edaat-offerings__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-brand);
}

.edaat-offerings__lead {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 22px; /* Figma resolves this legacy auto leading to 22; the browser gives 21.3 */
  letter-spacing: -0.54px;
  color: var(--edaat-offer-lead);
}

.edaat-offerings__grid {
  inline-size: 100%;
  max-inline-size: 1197px;
  gap: 22px;
}

/* Layout is the Bootstrap grid: `row g-0 flex-column flex-xl-row` (the
   mirrored row swaps in `flex-column-reverse`), the stack as
   `col-12 col-xl-auto` and the feature as `col-12 col-xl`. Gutters are zeroed
   because the feature card PAINTS its box — a gutter would run its background
   into the gap. The 24 stays a flex `gap`. */
.edaat-offerings__row {
  gap: var(--edaat-space-24);
  min-block-size: 468px;
}

/* the pair of flat text cards */
/* Figma tops this column out rather than stretching it: row 1 comes to
   222 + 24 + 218 = 464 inside a 468 row. Letting the cards grow made
   them 224 and 220 instead. */
.edaat-offerings__stack {
  gap: var(--edaat-space-24);
}

/* `col-xl-auto` hugs; Figma pins this column at 500. */
@media (min-width: 1200px) {
  .edaat-offerings__stack {
    inline-size: 500px;
  }
}
.edaat-offer-card {
  flex: 0 0 auto;
  gap: var(--edaat-space-8);
  padding: var(--edaat-space-48);
  border-radius: var(--edaat-offer-radius);
  background: var(--edaat-offer-card-flat);
}

.edaat-offer-card__inner {
  inline-size: 100%;
  max-inline-size: 407px;
  gap: 14px;
}

.edaat-offer-card__icon {
  flex: 0 0 auto;
}

/* .edaat-offer-card__text: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* legacy/heading-20-tight */
.edaat-offer-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--edaat-text-brand);
}

.edaat-offer-card__body {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-offer-body);
}

/* the illustration cards */
.edaat-offer-feature {
  min-inline-size: 0;
  padding-block: 51px;
  border-radius: var(--edaat-offer-radius);
}

.edaat-offer-feature--a {
  background: var(--edaat-offer-card-a);
  padding-inline: 43px;
  gap: 51px;
}

.edaat-offer-feature--b {
  background: var(--edaat-offer-card-b);
  padding-inline: 42px;
  gap: 55px;
}

.edaat-offer-feature__art {
  flex: 0 0 auto;
}

/* trust-02 exports at 275x229 because its artwork overflows the
   248x208 frame Figma draws it in — negative insets on every side.
   The box keeps the drawn size and the art is offset to sit exactly
   where Figma puts it, overflowing as it does there. */
.edaat-offer-feature__art--trust {
  inline-size: 248px;
  block-size: 208px;
}

.edaat-offer-feature__art--trust img {
  position: absolute;
  inset-block-start: -16px;
  inset-inline-start: -13.2px;
  inline-size: 275px;
  block-size: 229px;
}

/* Figma fixes these two frames at 542 and 538 rather than letting them
   fill the padded box (which is 587 and 589) — so the measure, and with
   it the wrap points, has to be set rather than inherited. */
.edaat-offer-feature__text {
  inline-size: 100%;
  max-inline-size: 542px;
  gap: var(--edaat-space-12);
}

.edaat-offer-feature__title {
  margin: 0;
  font-weight: 600;
  color: var(--edaat-text-brand);
}

/* Figma draws these two titles differently: card A is the legacy
   24/lh-24 at -0.72, card B the DS heading-lg 24/32 at -0.24.
   Reproduced as drawn; worth reconciling on one of them. */
.edaat-offer-feature--a .edaat-offer-feature__title {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.72px;
}

.edaat-offer-feature--b .edaat-offer-feature__text {
  max-inline-size: 538px;
}

.edaat-offer-feature--b .edaat-offer-feature__title {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.24px;
}

.edaat-offer-feature__body {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-offer-body);
}

@media (max-width: 1439.98px) {
  .edaat-offerings {
    padding: var(--edaat-space-80) var(--edaat-space-60);
  }
}
@media (max-width: 1199.98px) {
  /* 673 + 24 + 500 no longer fits; each row becomes one column */
  .edaat-offerings__row {
    min-block-size: 0;
  }
  .edaat-offer-feature {
    padding-block: var(--edaat-space-48);
    gap: var(--edaat-space-32);
  }
}
@media (max-width: 991.98px) {
  .edaat-offerings {
    padding: var(--edaat-space-60) var(--edaat-space-24);
  }
  .edaat-offer-card {
    padding: var(--edaat-space-32);
  }
  .edaat-offerings__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}
@media (max-width: 767.98px) {
  .edaat-offerings {
    padding: var(--edaat-space-48) var(--edaat-space-20);
  }
  .edaat-offer-card {
    padding: var(--edaat-space-24);
  }
  .edaat-offer-feature--a, .edaat-offer-feature--b {
    padding-inline: var(--edaat-space-24);
  }
  .edaat-offer-feature__art {
    max-inline-size: 100%;
    block-size: auto;
  }
  .edaat-offerings__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
}
/* ---- The compliance illustration, below 768 ----
   The image is absolutely positioned inside a 248x208 box so it can bleed
   -16/-13.2 the way Figma draws it. The mobile rule sets every
   `.edaat-offer-feature__art` to `block-size: auto`, and a box whose only
   child is absolute collapses to ZERO height — so the 229-tall image
   reserved no space at all and painted straight over the card's title and
   body.

   Below 768 it stops bleeding and becomes an ordinary image: in flow, full
   width of its column, height from its own aspect ratio. The bleed is a
   desktop composition and there is no room for it on a phone anyway. */
@media (max-width: 767.98px) {
  .edaat-offer-feature__art--trust {
    inline-size: 275px;
    max-inline-size: 100%;
    block-size: auto;
  }
  .edaat-offer-feature__art--trust img {
    position: static;
    inline-size: 100%;
    block-size: auto;
  }
}
/* ==================================================================
   WHAT MAKES US DIFFERENT
   ================================================================ */
/* ---------- Key Features — "What Makes Us Different" ----------
   Two overlapping Figma frames, not one: `Frame 91` (3012:8892) is a
   backdrop at y 2002 x 876 whose violet gradient fades IN from
   transparent and so tints the bottom 578 of the Offerings section
   above it, and `Section Stats/V1` (3012:9099) is the content at
   y 2580 x 797 on a 7%-alpha blue wash. `Frame 10` inside the
   backdrop fades it back to white from 64.9% to 95%.

   Four decoration layers, then the content on top. The band is a
   later sibling than Offerings, so its upward overlap paints over it
   the way Figma stacks them. */
.edaat-kf {
  isolation: isolate;
  inline-size: 100%;
  padding-block: var(--edaat-space-120);
  /* THE SECTION GUTTER, DECLARED ONCE. The narrow breakpoints below set
     it, the section takes it as padding-inline, and the carousel viewport
     bleeds back out by exactly the same amount. Two places needing the
     same number is how they drift apart, so there is only one number.
     0 here: the wide layout has no inline padding, so nothing bleeds and
     the desktop is untouched by any of this. */
  --edaat-kf-gutter: 0px;
  /* Both axes: the flow lines run 42 past each edge, and the violet
     backdrop is drawn 578 above this section but must NOT show there —
     Offerings has an opaque white fill of its own and covers it. */
  overflow: clip;
  /* deliberately no background: the 7% wash is translucent, which is
     what lets the backdrop show through the top of this section. */
}

.edaat-kf__layer {
  inset-inline: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- The violet backdrop, removed 2026-09-08 ----------
   Figma has a second frame behind this section: `Frame 91` (3012:8892),
   1440 x 876 at y 2002 — i.e. starting 578 ABOVE this band. Inside it,
   `Rectangle 4302` is a wedge filled with a diagonal gradient to
   #F0EDFF (lavender) at 50% path opacity, and `Frame 10` (3012:8918)
   fades the whole thing back to white from 66.5% to 97.3% of its height.

   Reproduced faithfully, that painted the band TWO colours, because the
   backdrop is 876 tall starting 578 up and so covers only the top 298
   of a 797 band:

     section-y 0    lavender  235,242,255
     section-y 275  the wedge has faded out
     section-y 298  the backdrop box ends
     section-y 798  flat blue 241,251,255

   Figma composites the same way — sampled at the time as 236,245,255 at
   2580 easing to 241,251,255 by 2900 — so this was not a build error.
   But the lavender is a backdrop meant to sit behind Offerings, which is
   opaque white and hides it completely; it leaks into the top third of
   this band only because the frame happens to overhang. The two-tone was
   spotted and corrected. The band now carries its own 7% blue alone and
   is one colour top to bottom.

   To restore, put both layers back in Home.html before the tint and:

     .edaat-kf__layer--wash { inset-block-start: -578px; block-size: 876px;
       background: url("../images/home/kf-wash.svg") 0 0 / 100% 100% no-repeat; }
     .edaat-kf__layer--fade { inset-block-start: -578px; block-size: 876px;
       background: linear-gradient(180deg, rgba(255,255,255,0) 66.514%,
                                           rgba(255,255,255,1) 97.339%); }

   `images/home/kf-wash.svg` is kept for that. */
/* the section's own wash: rgb(57,196,255) at 7% */
.edaat-kf__layer--tint {
  inset-block: 0;
  background: rgba(57, 196, 255, 0.07);
}

/* Line 9 — 53 one-pixel strokes in legacy indigo, drawn 1524 wide at
   y 127 so they overhang both edges; stretched rather than cropped */
.edaat-kf__layer--lines {
  inset-block-start: 127px;
  block-size: 545px;
  background: url("../images/home/flow-lines.svg") 0 0/100% 100% no-repeat;
}

.edaat-kf__inner {
  z-index: 1;
  inline-size: 100%;
  gap: var(--edaat-space-40);
}

.edaat-kf__head {
  inline-size: 100%;
  gap: var(--edaat-space-24);
  padding-inline-end: var(--edaat-space-80); /* as drawn */
}

.edaat-kf__eyebrow {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.35;
  color: var(--edaat-brand-indigo);
}

.edaat-kf__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-brand);
}

/* the carousel: 1200 of viewport over a row of 370 cards, so a little
   over three show and the rest scrolls */
.edaat-kf__carousel {
  inline-size: 100%;
  max-inline-size: 1200px;
  gap: var(--edaat-space-40);
  padding-block-end: 0; /* the 16 moved into __viewport; 341 + 40 + 40 = 421 */
}

/* ---- THE RAIL RUNS TO THE SCREEN EDGE ----
   On a narrow screen the section carries inline padding, and the peeking
   next card was being cut off 20px short of the edge. A card that stops
   before the edge reads as a card that is finished; a card sliced BY the
   edge reads as a card there is more of - which is the whole job of the
   peek. So the scroller, and only the scroller, bleeds back out over the
   section padding on its end side.

   Three declarations, and each one is doing a separate job:

     inline-size  grows the box by the gutter so it actually reaches the
                  edge. A negative margin alone will not do it - a block
                  with a set width keeps that width and the margin only
                  moves what comes after.
     margin       takes that growth back out of the layout, so the box
                  overhangs its parent instead of widening the column.
     padding      gives the LAST card the same inset the first one has.
                  Overflow clips at the padding edge, so padding inside a
                  scroller is real scrollable room - without it the final
                  card would end flush against the screen.

   The START side is untouched, so the first card keeps its inset exactly
   as drawn. The controls below are NOT in here, so the counter and the
   arrows stay inside the gutter while the cards run past it.

   At the wide breakpoints the gutter is 0, which makes this
   calc(100% + 0px) with no margin and no padding - the same used values
   the rule had before. The desktop cannot be affected by it. */
.edaat-kf__viewport {
  inline-size: calc(100% + var(--edaat-kf-gutter));
  margin-inline-end: calc(-1 * var(--edaat-kf-gutter));
  padding-inline-end: var(--edaat-kf-gutter);
  /* 341, not the drawn 325 - and the section total is UNCHANGED. The 16
     that used to be padding-block-end on .edaat-kf__inner moved in here,
     so Frame 90 still measures 421 = 341 + 40 + 40 + 0.

     The reason is the zoom. Overflow clips at THIS box, and a scrolling
     axis forces the other one to auto, so overflow-y: visible is not
     available here - the card's slack inside this box is the entire
     budget for growing AND for its shadow. At 325 that was 13.5, which a
     1.05 zoom spends 7.5 of; 341 makes it 21.5 and leaves 14 for the
     shadow.

     Cost: the cards sit 8 lower and the dots 16 lower than drawn. That is
     the trade for a zoom that is not sliced off at the top and bottom. */
  block-size: 341px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edaat-kf__viewport::-webkit-scrollbar {
  display: none;
}

.edaat-kf__row {
  align-items: center;
  gap: var(--edaat-space-24);
  block-size: 100%;
  inline-size: max-content;
}

/* Neutral/Shadow 03 is 0 2 6 at 10%; this instance draws 0 2 3. */
.edaat-kf-card {
  /* Both values moved to the shared card-hover knobs (see the Feature
     card, above) when Our Services and About Edaat were asked for "the
     same zoom as What Makes Us Different". Same numbers, one place. The
     two aliases stay so the rules below still read in this section's
     own terms, and so this card can still be tuned on its own. */
  --edaat-kf-hover-dur: var(--edaat-card-hover-dur);
  --edaat-kf-hover-scale: var(--edaat-card-hover-scale);
  flex: 0 0 370px;
  inline-size: 370px;
  block-size: 298px;
  scroll-snap-align: start;
  gap: 20px;
  padding: 34.5px 40px;
  border-radius: 20px;
  background: var(--edaat-white);
  box-shadow: 0 2px 3px rgba(25, 33, 61, 0.1);
  transform-origin: center center;
  /* `scale` and `box-shadow` — deliberately NOT `transform`. The one-time
     scroll reveal further down this file owns `transform` on this card and
     transitions it at just under a second; a hover borrowing that duration
     would feel broken. `scale` is an independent property that composes
     with `transform`, so the reveal and the zoom never fight over one
     declaration. 100-300ms is the band a hover should land in. */
  transition: scale var(--edaat-kf-hover-dur) ease-out, box-shadow var(--edaat-kf-hover-dur) ease-out;
}

/* .edaat-kf-card__top: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* Figma gives all four cards a 75-tall icon FRAME — that is what keeps
   the four titles on a common line — and the artwork inside it has its
   own size and its own offset. The box is therefore the frame and the
   mark is drawn at natural size within it.

   `block-size: 75px` alone was badly wrong: an <img> in a flex column
   stretches to the cross size, so each mark was blown out to the full
   290 content width and, with the default `object-fit: fill`, stretched
   3.75x to 5.4x horizontally. `object-fit: none` draws it at its real
   size; `object-position` places it where Figma places it.

   The exports are inconsistent — cards 1 and 4 carry the whole 75-tall
   frame, cards 2 and 3 only the glyph — so the offsets differ. */
.edaat-kf-card__icon {
  inline-size: calc(var(--kf-icon-w) * 1px);
  block-size: 75px;
  object-fit: none;
  object-position: calc(var(--kf-icon-x, 0) * 1px) calc(var(--kf-icon-y, 0) * 1px);
}

/* Displays/Display 4/Medium — 18/1.15, colors/neutral/800 */
.edaat-kf-card__title {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.15;
  font-weight: 500;
  color: #170f49;
}

/* Paragraph/Small — 14/1.5, colors/neutral/600 */
.edaat-kf-card__body {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: 1.5;
  color: var(--edaat-offer-lead);
}

/* One step bolder under the pointer: the title Medium → Semi Bold, the
   body Regular → Medium. No transition — Google serves Inter here as
   four static instances, so a weight cannot interpolate and animating
   it only produces a flicker.

   Bolder is wider: cards 2 and 3 sit at 297.7 of their fixed 298 and
   still hold five lines, and card 4 gains a fourth line into the 42 it
   has spare. Measured — nothing spills the card, and because the body
   is the last child nothing outside it moves. */
.edaat-kf-card:hover .edaat-kf-card__title {
  font-weight: 600;
}

.edaat-kf-card:hover .edaat-kf-card__body {
  font-weight: 500;
}

/* ---------- The zoom: 1.03, and why not more ----------
   Perceived growth is the number of PIXELS an edge travels, not the
   ratio. That is the whole reason a card and a logo take different
   numbers: the 90px logos in the belt above lift 8% and each edge moves
   about 3.5px; the same travel on this 370px card is 1.019. 1.02-1.03 is
   the published band for a card at this size, and the common pattern
   pairs a SMALL scale with added elevation rather than a large scale.
   1.03 moves each side edge 5.6px and the top and bottom edges 4.5px.

   1.05 is the CEILING, asked for and taken. Two hard limits set it, and
   neither of them is taste:

   - 14px body text re-rasterises when its layer is scaled. 1.05 is the
     last step where that stays invisible on a non-retina screen, and
     this card's body IS 14/1.5. Past it the copy goes soft, which is a
     worse defect than a smaller zoom. Below 992 the body is already at
     the 16px mobile floor and has more headroom, so the desktop case is
     what sets the limit.
   - the viewport must clip on y. It scrolls on x, and a scrolling axis
     forces the other axis to `auto` - so `overflow-y: visible` is not
     available here. (`overflow-x: clip; overflow-y: visible` works on
     .edaat-logo-strip precisely because nothing there scrolls.) The
     viewport was therefore taken from the drawn 325 to 341 - see the
     note on .edaat-kf__viewport, where the section total of 421 is
     preserved - so the slack is 21.5. The zoom spends 7.5 and leaves 14,
     which is what the 0 4 14 hover shadow needs. Below 992 the viewport
     is auto-height and takes padding instead.

   No `will-change`: `scale` is already composited, and a permanent hint
   on four cards costs memory for nothing.

   Not gated behind `(hover: hover)`, matching the logo belt above: on a
   touch screen a tapped card stays zoomed until something else is
   tapped, which is the behaviour this page already has. */
.edaat-kf-card:hover {
  scale: var(--edaat-kf-hover-scale);
  box-shadow: 0 4px 14px rgba(25, 33, 61, 0.18);
  z-index: 1; /* a flex item honours this with no `position` */
}

/* The reader has asked for less motion: both states still apply, they
   just arrive without travel - the same treatment the logo hover takes. */
@media (prefers-reduced-motion: reduce) {
  .edaat-kf-card {
    transition: none;
  }
}
.edaat-kf__controls {
  inline-size: 100%;
  min-block-size: 40px; /* Frame 88 is 40; the instance's remaining 16 is
   padding below it, not a taller control row —
   at 56 the dots sat 8 low. */
  gap: var(--edaat-space-24);
}

/* ---- THE SLIDE COUNTER ----
   Replaces the row of dots, at every width. Eight dots tell a reader how
   far along they are only by counting them; "3 / 8" says it outright, and
   it costs one line of space instead of eight targets.

   `tabular-nums` is not decoration: without it the box twitches as the
   digits change, because a proportional 1 is narrower than a 4. The two
   colours carry the same contrast the dots did - the current position in
   the heading colour, the rest of the phrase quieter.

   The number in the markup is a real starting value, not a placeholder:
   with no script the counter reads 1 / 8, which is exactly where the rail
   is sitting. The script corrects the total from the DOM on load, so the
   authored number can never drift from the number of cards. */
.edaat-kf__count {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  font-variant-numeric: tabular-nums;
  color: var(--edaat-text-tertiary); /* gray-500, 4.81:1 at 14px */
}

.edaat-kf__count-current {
  color: var(--edaat-text-heading);
}

.edaat-kf__arrows {
  gap: 20px;
}

.edaat-kf__arrow {
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0.588px solid var(--edaat-neutral-300, #f1f2f9);
  border-radius: var(--edaat-radius-full);
  background: linear-gradient(180deg, var(--edaat-bg-page) 0%, #f1f2f9 100%);
  box-shadow: inset 0 -1.176px 1.176px rgba(150, 161, 172, 0.12);
  cursor: pointer;
}

.edaat-kf__arrow--next {
  border-color: var(--edaat-brand-cyan);
  background: var(--edaat-brand-cyan);
  box-shadow: inset 0 -2.353px 2.353px rgba(80, 70, 189, 0.6), inset 0 1.176px 1.176px rgba(255, 255, 255, 0.35), inset 0 3.529px 4.706px rgba(223, 229, 255, 0.3), 0 2.353px 1.765px rgba(55, 52, 209, 0.21);
}

.edaat-kf__arrow img {
  display: block;
  inline-size: 18.824px;
  block-size: 18.824px;
}

.edaat-kf__arrow[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.edaat-kf__arrow:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

@media (max-width: 1439.98px) {
  .edaat-kf {
    padding-block: var(--edaat-space-80);
  }
  .edaat-kf__head {
    padding-inline-end: 0;
  }
}
/* THE GUTTER RUNS DOWN FROM THE CAROUSEL'S CAP, NOT FROM `lg`.

   This lived in the down(lg) block, so the section only took a gutter under
   992 and had NO inline padding above it, while every sibling keeps
   --edaat-gutter at every width. MEASURED at 1024x1366: siblings 40, this
   section 0, first card at x=0, counter and arrows flush to the screen.

   1320, not 992, is the boundary: .edaat-kf__carousel is capped at 1200, so a
   wider viewport already leaves (100vw-1200)/2 a side, and that only reaches
   the 60 gutter at 1200+2*60. Between 992 and 1319 it was unpadded AND
   uncapped - which is every landscape iPad, plus Pro 12.9/13 portrait.

   Gutter and bleed stay ONE number so the cards still scroll out to the screen
   edge; above 1320 both go to 0, because a capped carousel that bleeds would
   hang past its own centred box on one side. MEASURED: nothing moves at 1320+. */
@media (max-width: 1319.98px) {
  .edaat-kf {
    --edaat-kf-gutter: var(--edaat-gutter);
    padding-inline: var(--edaat-kf-gutter);
  }
}
@media (max-width: 991.98px) {
  .edaat-kf {
    padding-block: var(--edaat-space-60);
  }
  .edaat-kf__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}
@media (max-width: 767.98px) {
  .edaat-kf {
    padding-block: var(--edaat-space-48);
  }
  .edaat-kf__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
  .edaat-kf-card {
    flex-basis: 300px;
    inline-size: 300px;
    padding-inline: var(--edaat-space-24);
  }
}
/* ======================= Key-feature icon crops =======================
   One modifier per artwork, named for the file it crops (kf-accept.svg ->
   --accept). Was 8 inline style="" attrs on index.html until 2026-09-16;
   values unchanged.

   These are not a design decision, they are a correction for inconsistent
   EXPORTS - as the block above says, cards 1 and 4 carry the whole 75-tall
   frame and cards 2 and 3 only the glyph, so each needs its own width and
   nudge. --kf-icon-x / --kf-icon-y default to 0 in the base rule and are
   only stated where the export is actually off.
   ==================================================================== */
.edaat-kf-card__icon--accept {
  --kf-icon-w: 65.336;
}

.edaat-kf-card__icon--reminders {
  --kf-icon-w: 69.963;
  --kf-icon-x: 3;
  --kf-icon-y: 4;
}

.edaat-kf-card__icon--zatca {
  --kf-icon-w: 45.323;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--flexible {
  --kf-icon-w: 58;
}

.edaat-kf-card__icon--easy-platform {
  --kf-icon-w: 55;
  --kf-icon-y: 10;
}

.edaat-kf-card__icon--distributing {
  --kf-icon-w: 63;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--branding {
  --kf-icon-w: 64;
  --kf-icon-y: 9.76;
}

.edaat-kf-card__icon--reporting {
  --kf-icon-w: 59;
  --kf-icon-y: 8;
}

.edaat-kf-card__icon--security {
  --kf-icon-w: 52.814;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--integration {
  --kf-icon-w: 63;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--operations {
  --kf-icon-w: 64;
  --kf-icon-y: 6.98;
}

.edaat-kf-card__icon--fraud {
  --kf-icon-w: 63;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--messages {
  --kf-icon-w: 59.7957;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--marketing {
  --kf-icon-w: 64;
  --kf-icon-y: 7.89;
}

.edaat-kf-card__icon--refund {
  --kf-icon-w: 63;
  --kf-icon-y: 6;
}

.edaat-kf-card__icon--ai {
  --kf-icon-w: 63;
  --kf-icon-y: 6;
}

/* ---- Key Features cards, once the body text went to 16 ----
   The card is a FIXED 298 from Figma, and 298 was measured against 14px
   body copy. Raising it to 16 for the mobile reading floor made the
   longest card's content 326 tall inside a 298 box: the text ran 28 past
   the card edge and ate all 34.5 of the bottom padding. Caused by the
   type change, so it is fixed here rather than by reverting it — a fixed
   height that only holds for one font size is the actual fault.

   `min-block-size` keeps Figma's 298 as the floor for the short cards, so
   nothing shrinks; `stretch` then levels every card in the row to the
   tallest, which keeps the row tidy instead of ragged now that they can
   differ. The viewport loses its fixed height (341 since the zoom went to
   1.05) and takes padding instead —
   it clips on the y axis, and without that room the card's drop shadow
   would be cut off. */
@media (max-width: 991.98px) {
  .edaat-kf__viewport {
    block-size: auto;
    /* 6/16 held the drawn 0 2 3 shadow. The hover zoom needs 4.5 for the
       grown edge plus the 0 2 10 shadow's reach on top of it - 12.5 above
       and 16.5 below - so the padding was widened to fit both. The box is
       auto-height here, so this costs layout nothing but its own height. */
    padding-block: 14px 24px;
  }
  .edaat-kf__row {
    block-size: auto;
    align-items: stretch;
  }
  .edaat-kf-card {
    block-size: auto;
    min-block-size: 298px;
  }
}
/* ==================================================================
   HOW EDAAT WORKS
   ================================================================ */
/* ---------- How Edaat Works (3012:9161) ----------
   1440 x 669, padding-block 120, on white. A header over four steps
   with dashed arcs between them.

   The steps sit on a 1200 grid: four 259.5 columns with 54 between,
   which is what Figma's 0 / 316.63 / 633.26 / 940.5 offsets come to
   (its last column is 9 tighter than the other two — evened up here).

   Each tile is 98.29 square with radius 25 on three corners and none
   at the bottom-leading one, a cyan-to-green gradient, an
   overlay-blended texture, and a soft dark cast behind it. */
.edaat-flow {
  inline-size: 100%;
  padding-block: var(--edaat-space-120);
  background: var(--edaat-bg-page);
}

.edaat-flow__head {
  inline-size: 100%;
  max-inline-size: 808px;
  gap: var(--edaat-space-24);
  margin-block-end: var(--edaat-space-48);
}

.edaat-flow__eyebrow {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 1.35;
  color: var(--edaat-brand-indigo);
}

.edaat-flow__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-brand);
}

.edaat-flow__lead {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 540px;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 21.6px;
  letter-spacing: -0.54px;
  color: var(--edaat-offer-lead);
}

.edaat-flow__steps {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 54px;
}

/* .edaat-flow__step: layout is Bootstrap (d-flex flex-column align-items-center text-center) in the markup — exact equivalents, nothing left to declare here. */
/* Ellipse 79 — the dashed arc, 173 x 21, drawn between the columns and
   flipped on the middle one. Decorative, so it goes when the row does.

   `step-connector.png` is a light neutral GREY, not a brand colour - the
   mark is a hairline dashed curve with a solid head. gray-400 is the ramp
   step it sits on, and the one-column arrow below is bound to the same
   value so the two treatments cannot drift apart. */
:root {
  --edaat-step-connector: var(--edaat-gray-400);
}

.edaat-flow__arc {
  position: absolute;
  z-index: 0;
  inline-size: 173.5px;
  block-size: 22px;
  background: url("../icons/home/step-connector.svg") 0 0/100% 100% no-repeat;
}

.edaat-flow__arc--1 {
  inset-inline-start: 200px;
  inset-block-start: 11px;
}

.edaat-flow__arc--2 {
  inset-inline-start: 513.5px;
  inset-block-start: 65px;
  transform: scaleY(-1);
}

.edaat-flow__arc--3 {
  inset-inline-start: 827px;
  inset-block-start: 11px;
}

.edaat-flow__tile {
  z-index: 1;
  place-items: center;
  inline-size: 98.29px;
  block-size: 98.29px;
  border-start-start-radius: 25px;
  border-start-end-radius: 25px;
  border-end-end-radius: 25px;
  border-end-start-radius: 0;
  background: url("../icons/home/step-tile.svg") 0 0/100% 100% no-repeat;
  /* the blurred black square Figma sits behind each tile */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

/* the texture, blended the way Figma blends it */
.edaat-flow__tile-mask {
  inset: 0;
  mix-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* nth-of-TYPE, not nth-child: the three connector spans are children of the
   same list, so the first step is the list's FOURTH child. Keyed on
   nth-child, masks 1 to 3 matched nothing and step-mask-4 landed on Billing.
   The reveal timeline below counts the steps the same way. */
.edaat-flow__step:nth-of-type(1) .edaat-flow__tile-mask {
  background-image: url("../icons/home/step-mask-1.svg");
}

.edaat-flow__step:nth-of-type(2) .edaat-flow__tile-mask {
  background-image: url("../icons/home/step-mask-2.svg");
  /* this one is 81.6 wide and inset 8.58, not full-bleed */
  inset-inline: 8.58px auto;
  inline-size: 81.6px;
}

.edaat-flow__step:nth-of-type(3) .edaat-flow__tile-mask {
  background-image: url("../icons/home/step-mask-3.svg");
}

.edaat-flow__step:nth-of-type(4) .edaat-flow__tile-mask {
  background-image: url("../icons/home/step-mask-4.svg");
}

.edaat-flow__tile img {
  position: relative;
  z-index: 1;
  display: block;
}

/* legacy/auto/Inter Semi Bold 20/lh-auto */
.edaat-flow__step-title {
  margin: 19.37px 0 4.31px;
  font-size: 20px;
  line-height: normal;
  font-weight: 600;
  color: var(--edaat-text-brand);
}

/* legacy/body-16-auto. Figma fixes this box at 70.769 even though the
   longest of the four wraps to three lines, so the height is pinned
   rather than left to the copy — that is what makes the section 669. */
.edaat-flow__step-body {
  margin: 0;
  min-block-size: 70.769px;
  font-size: var(--edaat-type-body-md-size);
  line-height: normal;
  color: var(--edaat-offer-body);
}

@media (max-width: 1439.98px) {
  .edaat-flow {
    padding-block: var(--edaat-space-80);
    padding-inline: var(--edaat-gutter);
  }
  /* The arcs were hidden here, at 1439, and that was 120px too early.

     Their offsets (200 / 513.5 / 827) are coordinates in the drawn 1200
     grid - the export of the whole row confirms its x-axis IS this
     grid's axis - so they are correct for as long as the grid is
     actually 1200 wide. It is capped at 1200 by max-inline-size, and
     this block adds 60 of inline padding, so the grid stays at its full
     1200 down to a 1320 viewport. Between 1320 and 1439 the connectors
     were being hidden while their geometry was still exact.

     Below 1320 the grid starts shrinking and the fixed offsets stop
     landing in the gaps, so that is where they genuinely have to go. */
}
@media (max-width: 991.98px) {
  .edaat-flow {
    padding-block: var(--edaat-space-60);
  }
  .edaat-flow__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--edaat-space-40);
  }
  .edaat-flow__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}
/* ---------- Tablet: the connectors come back, straight and horizontal ----------
   Requirement (2026-09-23): the arrows must not disappear at tablet sizes, and
   they are to be the SAME mark the one-column layout draws, not a second
   invention. Below 1320 every connector was `display: none` and only returned
   below 576, so three arrows were missing on every iPad but the 12.9 in
   landscape - measured on the shipped page: 1194, 1180 and 1024 four across,
   and 834, 820, 768 two across, all 0/3.

   The arc PNG genuinely cannot survive there: it is 173.5 wide, drawn for the
   1200 grid, positioned by hard-coded offsets (200 / 513.5 / 827) that only
   land in the gaps while the grid is its full 1200. So this does what the
   one-column layout already does - drop the image, redraw the same dashed line
   and solid head in CSS - along the inline axis, because here the steps sit
   beside each other rather than above one another. The three spans are already
   in the markup, so nothing is added to the page; `order` interleaves them,
   which keeps them in the gaps with no offset to go stale.

   ALL LOGICAL, SO ARABIC NEEDS NO CORRECTION: the stem runs `inset-inline: 0
   9px`, the head sits at `inset-inline-end: 0` with `border-inline-start` as
   its solid edge, and the vertical form below centres with `margin-inline:
   auto` rather than a translate - a `translate: -50%` is physical and is
   exactly what the one-column arrows have to undo in _rtl.scss. */
@media (min-width: 576px) and (max-width: 1319.98px) {
  .edaat-flow__arc {
    display: block;
    /* relative, not static: the stem and head are absolute and would
       otherwise resolve against .edaat-flow__steps */
    position: relative;
    inset: auto;
    inset-inline-start: auto;
    inset-block-start: auto;
    inline-size: 34px;
    block-size: 14px;
    background: none; /* drops the arc PNG */
    transform: none; /* arc--2 is flipped for the curved row */
    /* Level on the TILE, not the step: the tile is 98.29 and is the first
       thing in the step, so this puts the line through the artwork. */
    align-self: start;
    margin-block-start: 42.145px;
  }
  /* repeated rather than left to source order - the base --2 rule flips the
     arc at the same specificity, so only position in the file separates them */
  .edaat-flow__arc--2 {
    transform: none;
  }
  .edaat-flow__step:nth-of-type(1) {
    order: 1;
  }
  .edaat-flow__arc--1 {
    order: 2;
  }
  .edaat-flow__step:nth-of-type(2) {
    order: 3;
  }
  .edaat-flow__arc--2 {
    order: 4;
  }
  .edaat-flow__step:nth-of-type(3) {
    order: 5;
  }
  .edaat-flow__arc--3 {
    order: 6;
  }
  .edaat-flow__step:nth-of-type(4) {
    order: 7;
  }
  /* the dashed stem: 4 on, 4 off, stopping 9 short of the head */
  .edaat-flow__arc::before {
    content: "";
    position: absolute;
    inset-inline: 0 9px;
    inset-block-start: 50%;
    translate: 0 -50%;
    block-size: 2px;
    background: repeating-linear-gradient(to right, var(--edaat-step-connector) 0 4px, transparent 4px 8px);
  }
  /* the head */
  .edaat-flow__arc::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    border-block: 5px solid transparent;
    border-inline-start: 9px solid var(--edaat-step-connector);
  }
}
/* Four across, AND THE ROW DOES NOT MOVE A PIXEL: three gaps of 54 spend 162px
   on empty space, and 3 x 34 + 6 x 10 is 162 as well, so the step columns
   resolve to the width and x they already had and only the gaps gain a mark. */
@media (min-width: 992px) and (max-width: 1319.98px) {
  .edaat-flow__steps {
    grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr;
    column-gap: var(--edaat-space-10);
  }
}
/* Two across, where the geometry CANNOT be preserved: a 34px connector plus
   clearance has to come out of one 40px gap, and 3px either side would put the
   head against copy that already runs the full column. The steps give up 13px
   each at 768 and the connector gets a real gutter.

   The 2 -> 3 link crosses the row break, so it is the vertical arrow - the same
   mark again, turned back on to the axis the flow actually travels - spanning
   the row so it sits between the pairs rather than inside one. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .edaat-flow__steps {
    grid-template-columns: 1fr 34px 1fr;
    column-gap: var(--edaat-space-16);
    row-gap: var(--edaat-space-24);
  }
  .edaat-flow__arc--2 {
    grid-column: 1/-1;
    justify-self: center;
    align-self: auto;
    margin-block-start: 0;
    inline-size: 14px;
    block-size: 34px;
  }
  .edaat-flow__arc--2::before {
    inset-inline: 0;
    margin-inline: auto; /* centred logically — no physical translate */
    inset-block: 0 9px;
    translate: none;
    inline-size: 2px;
    block-size: auto;
    background: repeating-linear-gradient(to bottom, var(--edaat-step-connector) 0 4px, transparent 4px 8px);
  }
  .edaat-flow__arc--2::after {
    inset-inline: 0;
    margin-inline: auto;
    inset-block: auto 0;
    translate: none;
    inline-size: 0; /* a border triangle has no content box */
    border-inline: 5px solid transparent;
    border-block-start: 9px solid var(--edaat-step-connector);
    border-block-end: 0;
  }
}
/* ---------- One column: the connectors come back, straight ----------
   The drawn connector is a dashed ARC, angled for a four-across row, and
   it is hidden below 1440 because at any narrower grid it points at
   nothing. Stacked one-per-row the relationship is simply "next", so the
   same dashed line is redrawn vertical with a head on it - asked for, and
   the honest translation of the mark rather than a rotated arc.

   Drawn in CSS rather than exported: it is two rectangles and a triangle,
   the arc PNG cannot be straightened, and no straight variant of it
   exists in the file to fetch.

   The three arcs are already in the markup, one between each pair of
   steps, so nothing new is added - they stop being absolutely positioned
   decoration and become real grid items, interleaved with `order`. That
   is what keeps them in the gaps without a hard-coded offset, which is
   what broke on the arc row in the first place. The gap tightens to 16
   because the connector now occupies a row of its own. */
@media (max-width: 575.98px) {
  .edaat-flow__steps {
    grid-template-columns: 1fr;
    gap: var(--edaat-space-16);
  }
  .edaat-flow__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
  .edaat-flow__step:nth-of-type(1) {
    order: 1;
  }
  .edaat-flow__step:nth-of-type(2) {
    order: 3;
  }
  .edaat-flow__step:nth-of-type(3) {
    order: 5;
  }
  .edaat-flow__step:nth-of-type(4) {
    order: 7;
  }
  .edaat-flow__arc {
    display: block;
    /* relative, not static: the stem and the head below are absolute and
       would otherwise resolve against .edaat-flow__steps */
    position: relative;
    /* the shorthand AND both logical longhands the base rule sets - the
       two cascade to the same physical property, but spelling them out
       leaves nothing to reason about */
    inset: auto;
    inset-inline-start: auto;
    inset-block-start: auto;
    order: 2;
    justify-self: center;
    inline-size: 14px;
    block-size: 34px;
    background: none; /* drops the arc PNG */
    transform: none; /* arc--2 is flipped for the curved row */
  }
  /* `transform: none` is repeated here rather than left to source order:
     the base --2 rule flips the arc for the curved row and matches this
     one's specificity exactly, so only position in the file separates
     them. Repeating it costs a line and removes the dependency. */
  .edaat-flow__arc--2 {
    order: 4;
    transform: none;
  }
  .edaat-flow__arc--3 {
    order: 6;
  }
  /* the dashed stem: 4 on, 4 off, stopping short of the head */
  .edaat-flow__arc::before {
    content: "";
    position: absolute;
    inset-block: 0 9px;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 2px;
    background: repeating-linear-gradient(to bottom, var(--edaat-step-connector) 0 4px, transparent 4px 8px);
  }
  /* the head */
  .edaat-flow__arc::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 9px solid var(--edaat-step-connector);
  }
  /* ---- and the description stops running the full width ----
     Asked for. 28ch is about 250px against the 335 a step gets at 375,
     which is a comfortable measure for centred copy and stops the two
     long descriptions reaching both edges.

     The 70.769 pinned height goes with it: that number exists to hold
     four columns on a common baseline at the drawn width, and one
     column has no such row to level. Keeping it left dead space under
     "Collect your receivables." */
  .edaat-flow__step-body {
    max-inline-size: 28ch;
    margin-inline: auto;
    min-block-size: 0;
  }
}
/* ==================================================================
   TRUST & CREDIBILITY
   ================================================================ */
/* ---------- Trust & Credibility (3012:9274) ----------
   1440 x 528. Padding-top 60 on the frame, bottom 60 on the stats
   block: 60 + 144 + 60 + 204 + 60 = 528.

   Same backdrop construction as Layout/Page Hero and the same
   photograph, but its own numbers — the photo is at 15% here against
   the hero's 20%, and the wash is sky-blue at 12% where the hero is
   violet at 3%. Two frames, two rules.

   The three cards hug their content, so their widths are arithmetic
   rather than chosen: 24 + max(label 192, unit 204, number) + 24
   gives Figma's own 252 / 252 / 276.

   Each digit sits in a 45-wide cell (Figma masks a 45 x 77 window per
   digit) and the "+" takes its natural 48, so the number rows come to
   138 / 183 / 228 — which is what makes card 3 the wide one. */
.edaat-trust {
  inline-size: 100%;
  padding-block-start: var(--edaat-space-60);
  overflow: clip;
  background: var(--edaat-bg-page);
}

.edaat-trust::before,
.edaat-trust::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.edaat-trust::before {
  background-image: url("../images/page-hero-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

.edaat-trust::after {
  background-image: var(--edaat-band-fade), linear-gradient(90deg, rgba(57, 196, 255, 0.12) 0%, rgba(57, 196, 255, 0.12) 100%);
}

.edaat-trust > * {
  position: relative;
  z-index: 1;
}

/* Top Container — 144 tall: eyebrow 24, gap 24, heading 96. */
/* .edaat-trust__head: layout is Bootstrap (w-100 d-flex flex-column align-items-center gap-4 text-center) in the markup — exact equivalents, nothing left to declare here. */
/* legacy/auto/Inter Semi Bold 18/lh-p135, letter-spacing 4% */
.edaat-trust__eyebrow {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.72px;
  color: var(--edaat-brand-indigo);
}

/* legacy/auto/Inter Semi Bold 40/lh-48, letter-spacing -3% */
.edaat-trust__title {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 880px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-brand);
}

/* Section Stats/V1 — the 60 below the cards lives here, as in Figma. */
/* Layout is the Bootstrap grid: `row g-0 justify-content-center
   align-items-center`, cards as `col-auto`. Gutters are zeroed because the
   cards PAINT their boxes; the 40 stays a flex `gap`. */
.edaat-trust__stats {
  inline-size: 100%;
  margin-block-start: var(--edaat-space-60);
  padding-block-end: var(--edaat-space-60);
  gap: var(--edaat-space-40);
}

.edaat-trust__card {
  gap: var(--edaat-space-12);
  padding: var(--edaat-card-padding);
  border-radius: var(--edaat-radius-12);
  background: var(--edaat-bg-page);
  /* legacy 0 2 3 at 10% — one step tighter than Elevation/sm, and the
     card has no border: the shadow is the whole edge. */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* legacy/auto/Inter Medium 18/lh-p115 */
.edaat-trust__label {
  margin: 0;
  inline-size: 192px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--edaat-text-brand);
}

/* Paragraph/Small on legacy/color/6f6c8f */
.edaat-trust__unit {
  margin: 0;
  inline-size: 204px;
  font-size: var(--edaat-type-body-sm-size);
  line-height: 1.5;
  color: var(--edaat-offer-lead);
}

.edaat-trust__value {
  margin: 0;
  block-size: 90px;
  font-size: 70px;
  line-height: 90px;
  color: var(--edaat-brand-cyan);
  font-variant-numeric: tabular-nums;
}

/* one 45-wide window per digit, glyph centred — Figma's masked reel */
.edaat-trust__digit {
  flex: 0 0 auto;
  inline-size: 45px;
}

/* Figma measures the plus at 48 where Google Fonts' Inter advances it
   45.27, which would pull each number — and card 3 — 2.73 narrow. The
   cell is pinned to Figma's 48 with the glyph centred, so the ink
   lands on the same centre either way. */
.edaat-trust__plus {
  flex: 0 0 auto;
  inline-size: 48px;
  text-align: center;
}

@media (max-width: 1439.98px) {
  .edaat-trust {
    padding-inline: var(--edaat-gutter);
  }
}
@media (max-width: 991.98px) {
  .edaat-trust__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}
@media (max-width: 767.98px) {
  .edaat-trust__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
  .edaat-trust__stats {
    gap: var(--edaat-space-24);
  }
}
/* ==================================================================
   TESTIMONIALS
   ================================================================ */
/* ---------- Testimonials (3012:9303) ----------
   1440 x 810: padding 60 top, legacy/space/30 bottom, around a
   1440 x 720 clipped stage.

   The stage is where the composition lives, and it is deliberately
   wider than the page: the indigo circle bleeds 266 past the right
   edge and the card rail 497. Figma clips both, and a clipping frame
   in Figma casts its drop shadow from its own rectangle rather than
   its contents — so the stage's 0 4 2 at 25% is a box-shadow on a
   full-width band, not a filter over the artwork and the copy.

   Neither circle needs an export. Figma drew both as flat colour — the
   halo #1C55E0 at 4% and the disc brand/indigo, whose "gradient" carries
   a single stop. Both were restyled on 2026-09-09: the disc is now a
   CSS radial wash that fades out entirely and the halo has become a
   hairline ring. See the rules for why.

   The rail is a real scroll container from the card's own 707 to the
   stage's right edge — 733 of window over 1230 of cards, which is
   exactly the card-plus-peek Figma draws, and makes the two arrows do
   something. It reuses the [data-carousel] behaviour from Key
   Features. */
:root {
  --edaat-tm-body: #1e1e1e; /* legacy/color/1e1e1e */
  /* The disc, restyled 2026-09-09. It used to be a solid --edaat-brand-indigo
     806 across — the only block of full-saturation colour on the page outside
     the navy CTA card, which is why it read as belonging to some other design.
     Everything else in this family is soft: the Challenge cards, the Key
     Features wash at 7%, the flat card at #ededf5.

     DEEPENED one step on 2026-09-09, second revision — the first pass read too
     faint once the light was concentrated off-centre. Every value in the
     treatment moved together rather than only the fill, so the relationship
     between wash, rings and nodes is unchanged and only its weight weight went up.

     The mid stop is the old core, and the core is a new value: #d5cfff, one step
     deeper than `offer-card-b`. It is the ONLY colour in this section the design
     system did not already own, and it is here because the system's lavender
     ramp stops at #e4e2ff and then jumps to indigo-300 #b2b3d6, which is far too
     dark for a wash. Kept as a component token, not a primitive: it is one
     decorative fill, not a new step everything else should reach for. */
  --edaat-tm-wash-core: #d5cfff; /* one step below the previous core */
  --edaat-tm-wash-mid: #ded9ff; /* the previous core */
  --edaat-tm-orbit: rgba(84, 86, 161, 0.32); /* brand indigo, was 24% */
  --edaat-tm-orbit-far: rgba(84, 86, 161, 0.14); /* brand indigo, was 10% */
  --edaat-tm-node: var(--edaat-brand-indigo); /* full strength, 20px of it */
  --edaat-tm-node-soft: rgba(84, 86, 161, 0.70); /* brand indigo, was 55% */
  /* THE ORBIT CENTRE, AS ONE NUMBER - measured from the frame's TRAILING
     edge. The disc, the far ring and the orbit are all concentric on it, so
     it has to be one value or they drift apart; each element derives its own
     inset by subtracting its own radius.

     It was 174, which put the 806 disc 229px off the edge and left a corner
     wash rather than a circle. 420 clears the disc's own 403 radius, so the
     whole circle now lands inside the frame with a little air behind it.
     Requirement (2026-09-15): a full circle instead of a spotlight. */
  /* IT HAS TO FIT THE SECTION TO READ AS A CIRCLE. The frame is 720 tall and
     clips; the disc was 806, so it was always cut top and bottom and could
     only ever read as a wash. 520 fits with room to spare, and the section's
     own vertical fade then dissolves its top and bottom rather than cutting
     them - which is the gradient above and below that was asked for.

     cy pulls the centre up out of the card. The card occupies the lower half
     of the frame, so a vertically centred circle hides its middle behind an
     opaque white panel; at 40% the whole upper arc is in the open. */
  --edaat-tm-orbit-d: 806px;
  --edaat-tm-orbit-cx: 420px;
  --edaat-tm-orbit-cy: 50%;
  /* how much of the circle's own height is spent fading in at the top and
     out at the bottom, so it never presents a hard edge to the section. */
  --edaat-tm-wash-fade: 28%;
  /* Where the light sits inside the disc, and how far it reaches. Centred and
     full-radius reads as a circle that fades out; off-centre and short reads
     as a spotlight thrown from the corner, which is what this replaced. */
  --edaat-tm-wash-focus: 50% 50%;
  /* The section's own vertical fade: the colour gradients out above and below
     rather than meeting the section edge. These two stops are the clear band -
     everything outside them ramps to white. */
  --edaat-tm-fade-top: 26%;
  --edaat-tm-fade-bottom: 74%;
}

.edaat-tm {
  inline-size: 100%;
  padding-block: var(--edaat-space-60) 30px; /* legacy/space/30 */
  overflow: clip;
  background: var(--edaat-bg-page);
}

.edaat-tm::before,
.edaat-tm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.edaat-tm::before {
  background-image: url("../images/home/testimonials-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

/* the white fade holds its clear band 20.227 - 75.87 here, where the
   page hero holds 25.151 - 75.377: a different frame, its own stops */
.edaat-tm::after {
  background-image: linear-gradient(180deg, var(--edaat-bg-page) 0%, rgba(255, 255, 255, 0) var(--edaat-tm-fade-top), rgba(255, 255, 255, 0) var(--edaat-tm-fade-bottom), var(--edaat-bg-page) 100%), linear-gradient(90deg, rgba(74, 58, 255, 0.03) 0%, rgba(74, 58, 255, 0.03) 100%);
}

/* ---------- The card width is ONE declared length ----------
   The rail was one card wide and the card was inline-size: 100% of it.
   That is a percentage against a scroll container, and it did not hold -
   the cards came out a fraction of their width and two showed at once,
   with the padding and the white plate collapsing with them.

   Both now read the SAME custom property, so there is no percentage to
   resolve and no way for them to disagree. Change the width in one place
   and the rail, the card and the snap arithmetic all follow.

   --edaat-tm-zoom-room is the slack the rail carries around the card for
   the hover zoom. The rail scrolls on x, which forces overflow-y to auto,
   so a zoom with no room is clipped on BOTH axes - and with
   align-items: stretch the card fills the rail exactly, leaving none.
   The room is padding on the rail: overflow clips at the padding edge, so
   padding is the one thing that buys space without changing the card.

   It is 0 below 1200. There the card wants the full width of a phone and
   there is no pointer to hover with, so the room would only make the card
   narrower for nothing. --edaat-tm-hover-scale drops to 1 with it. */
:root {
  --edaat-tm-card-w: 600px; /* as drawn */
  --edaat-tm-zoom-room: 34px;
}

.edaat-tm__stage {
  z-index: 1;
  inline-size: 100%;
  overflow: clip;
  /* Figma declares 0 4 2 at 25% on testimonial_2, and reading it as a
     clipping frame's rectangular shadow put a full-width grey rule
     across the section join that Figma does not draw. Not reproduced. */
}

/* Figma's 1440 frame, centred: above 1440 the composition holds
   together and the band's photograph carries the rest. */
.edaat-tm__frame {
  inline-size: 1440px;
  max-inline-size: 100%;
  block-size: 720px;
  margin-inline: auto;
}

.edaat-tm__circle {
  z-index: 0;
  inset-block-start: var(--edaat-tm-orbit-cy);
  transform: translateY(-50%);
  border-radius: 50%;
}

/* An orbit with two nodes riding it.

   Three circles at three weights — a far one at 7% that bleeds off the top and
   bottom of the section, the orbit itself at 18%, and two solid nodes on it.
   All concentric with the wash's box, whose centre sits 174 inside the
   trailing edge.

   The nodes are the ONE place on this page where brand indigo appears at full
   strength over a large pale field, and that is the point: #5456a1 is a text,
   stroke and small-fill colour here. Twenty pixels of it reads as an accent;
   the 806 disc it replaced read as a different design.

   Positions are polar, written as percentages of the orbit's own box — a point
   at angle a sits at `50% + 50%·cos a, 50% + 50%·sin a`, so both scale with
   the ring and neither needs a magic pixel. -100deg and 78deg were chosen
   because they CLEAR THE CARD: the rail paints above the circles, and at the
   resting position a node near either side of the orbit would be swallowed by
   the 600-wide card. Above and below it, they are seen. */
/* THE ORBIT IS GONE, removed 2026-09-15. What moved was the 600 ring turning once every 200s carrying
   two solid nodes, plus the wash breathing on an 18s scale - so the ring, its
   two nodes, the far ring that framed the wash, and BOTH timelines have been
   taken out together rather than just stopped. A ring left in place with its
   animation removed is a bare circle parked on a background, which is the
   thing the orbit existed to avoid.

   The section is now one static gradient circle. --edaat-tm-orbit,
   --edaat-tm-orbit-far, --edaat-tm-node and --edaat-tm-node-soft are left
   declared and unused: they are measured values, and re-deriving them costs
   more than the four lines they occupy if the orbit is ever wanted back. */
/* `closest-side` is the load-bearing keyword: it puts 100% of the gradient at
   the distance to the NEAREST edge rather than to the far corner, so the wash
   reaches zero opacity well inside its own box and there is no boundary
   anywhere. The default `farthest-corner` would still be faintly tinted where
   the box ends and leave the ghost of a rim — which is the whole problem being
   solved, since a crisp edge against white is what makes a shape look pasted on.

   The light sits at 34% 30%, not at the centre. A centred glow inside a
   concentric ring is the default form and reads as a bullseye; moving it
   up-left breaks that symmetry, so the ring stops looking like a frame around
   the light and starts looking like an orbit it sits inside.

   That offset also sets the size, and deliberately: with the light at 30% down,
   the nearest edge is the top, so `closest-side` resolves to 0.30 of the box —
   242 of the circle's 403. A concentrated glow rather than a wash filling the
   whole disc. It stays proportional at every breakpoint for free, which an
   explicit px radius would not.

   One more thing it buys: the breathing scale runs from the BOX centre, so an
   off-centre feature drifts diagonally as it grows instead of just swelling. */
.edaat-tm__circle--disc {
  inline-size: var(--edaat-tm-orbit-d);
  block-size: var(--edaat-tm-orbit-d);
  inset-inline-end: calc(var(--edaat-tm-orbit-cx) - var(--edaat-tm-orbit-d) / 2);
  background: radial-gradient(circle closest-side at var(--edaat-tm-wash-focus), var(--edaat-tm-wash-core) 0%, var(--edaat-tm-wash-mid) 72%, rgba(222, 217, 255, 0) 100%); /* the mid stop at 0 alpha, not `transparent`:
      fading to transparent interpolates through
      transparent BLACK and greys the edge */
  /* THE TOP AND BOTTOM GO TRANSPARENT, SO THE SECTION NEVER CUTS IT.
     Found 2026-09-15: the wash met the
     section boundary and `overflow: clip` sliced it, leaving a dead straight
     horizontal edge across the colour. A radial gradient cannot help - it
     fades towards its own rim, and the cut is somewhere else entirely.

     So the fade is a MASK, not a colour: the circle keeps its own radial
     falloff and is additionally faded to nothing towards the top and bottom
     of its own box. Whatever the section does to it after that, there is no
     opaque colour left at the edge to cut. It also means the wash can be any
     size, at any breakpoint, without anyone having to check whether it still
     fits - which is what let the 806 disc go unnoticed. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--edaat-tm-wash-fade), #000 calc(100% - var(--edaat-tm-wash-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--edaat-tm-wash-fade), #000 calc(100% - var(--edaat-tm-wash-fade)), transparent 100%);
}

/* section (3012:9352) — 393 wide at x 115, centred on the stage */
.edaat-tm__head {
  position: absolute;
  z-index: 1;
  inset-inline-start: 115px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 393px;
  gap: var(--edaat-space-32);
}

/* Badge — 135 x 48 in Figma: padding-block 12, padding-inline-end 16, no
   leading pad and no fill, so it is a spacing frame rather than a pill.

   The 12 top and bottom are NOT reproduced. They made this heading's
   rhythm eyebrow -> 36 -> title where The Challenge We Solve, which is
   the same three-line heading, runs eyebrow -> 24 -> title. Asked to
   match, and 24/24 is the value the rest of the page uses, so the badge
   frame's padding goes and the two headings now measure the same.
   The inline-end padding stays: it is trailing space in a 393 column and
   affects no vertical rhythm. */
.edaat-tm__eyebrow {
  margin: 0;
  padding-inline-end: var(--edaat-space-16);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.72px;
  color: var(--edaat-brand-indigo);
}

.edaat-tm__title {
  margin: var(--edaat-space-24) 0 0;
  inline-size: 100%;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-brand);
}

/* The section description, added 2026-09-10. Figma
   draws NO lead on this section - this copy is written, not extracted,
   and is flagged as such in the changelog.

   Set to match `.edaat-offerings__lead` on The Challenge We Solve, which
   is the block it was asked to follow: body-lg on the muted lead colour,
   Figma's legacy 22 leading with its -0.54 tracking, and the same 24
   above it that the offerings header puts between its three lines. */
.edaat-tm__lead {
  margin: var(--edaat-space-24) 0 0;
  inline-size: 100%;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 22px; /* Figma's legacy auto leading, as on the offerings lead */
  letter-spacing: -0.54px;
  color: var(--edaat-offer-lead);
}

.edaat-tm__slider {
  gap: var(--edaat-space-20);
}

.edaat-tm__arrow {
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Figma draws an up and a down chevron and rotates each -90, so the
   pair reads back and forward. Kept as the rotation it is. */
.edaat-tm__arrow img {
  display: block;
  inline-size: 24px;
  block-size: 24px;
  transform: rotate(-90deg);
}

.edaat-tm__arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.edaat-tm__arrow:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* ---------- Testimonials: no ambient motion ----------
   This section used to carry two timelines - the wash breathing on 18s and
   the orbit turning once every 200s with two nodes riding it - plus a third
   keyframe set for the narrow corner variant. All three are gone, with the
   ring and nodes they moved, on request. Nothing in this section animates
   now, which is why there is no prefers-reduced-motion entry for it either:
   the only motion left is the arrows own hover transition. */
/* ---------- Testimonials, the arrows ----------
   They had no hover state at all — the only control in the section gave
   no sign it was one. Each leans the way it travels, which also tells a
   reader which arrow does what before they click it. The transform goes
   on the BUTTON: the icon inside carries `rotate(-90deg)` and animating
   that would wipe the rotation. */
.edaat-tm__arrow {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.edaat-tm__arrow[data-carousel-prev]:hover:not([disabled]) {
  transform: translateX(-3px);
}

.edaat-tm__arrow[data-carousel-next]:hover:not([disabled]) {
  transform: translateX(3px);
}

.edaat-tm__arrow:hover:not([disabled]) {
  opacity: 0.72;
}

/* Matched to the hover rules above, attribute for attribute. Without it
   the press rule scores 3 against their 4 and loses — and since a click
   always happens while hovering, the press feedback would never once be
   seen. */
.edaat-tm__arrow[data-carousel-prev]:active:not([disabled]),
.edaat-tm__arrow[data-carousel-next]:active:not([disabled]) {
  transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .edaat-tm__arrow {
    transition: none;
  }
}
/* testmonial (3012:9314) — cards start at 707 and run off the edge */
/* ---------- One card at a time, centred ----------
   Added 2026-09-10. The rail is now EXACTLY one card wide, so the
   scroll container shows one card and clips the rest - and the two insets
   plus a definite width plus margin-inline:auto is what centres an
   absolutely positioned box inside the area left of it.

   Rail width == card width also makes the scroll arithmetic exact:

     max scroll   = 6W + 5g - W = 5W + 5g
     card 6 lands at              5(W + g) = 5W + 5g

   equal, so every card including the last snaps flush. That is what the
   trailing spacer added on 2026-09-09 was working around, and it has been
   removed rather than left as dead weight.

   align-items is STRETCH, not center: the cards were sized by their own
   copy, so a short quote gave a visibly shorter card. Stretch levels every
   card to the tallest - which is the first one, as asked. */
.edaat-tm__rail {
  position: absolute;
  z-index: 1;
  inset-inline: 707px 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  /* border-box, so this total minus the two paddings leaves a content box
     of exactly one card - which is what shows one card and clips the
     rest, and what keeps max-scroll and the last card's offset equal. */
  inline-size: calc(var(--edaat-tm-card-w) + 2 * var(--edaat-tm-zoom-room));
  padding: var(--edaat-tm-zoom-room);
  margin-inline: auto;
  gap: 30px; /* legacy/space/30 */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edaat-tm__rail::-webkit-scrollbar {
  display: none;
}

/* ---------- REMOVED 2026-09-10: the curved fade ----------
   It masked the rail's leading edge so a half-visible outgoing card
   dissolved along an elliptical ramp. With one card per view there is no
   half-visible card left to dissolve, and the mask would only soften the
   left edge of the single card being read. Kept below, commented, because
   it is exactly right again the moment a sliver of the neighbours is
   wanted back - uncomment and give the rail some width beyond 600.

   The .is-scrolled hook it used is still live in the carousel sync(), so
   nothing else has to be restored with it.

   Original, verbatim:

   .edaat-tm__rail { --edaat-tm-fade-hold: 72%; --edaat-tm-fade-bow: 130%; }
   .edaat-tm__rail.is-scrolled {
     mask-image: radial-gradient(105% var(--edaat-tm-fade-bow) at 100% 50%,
                   #000 var(--edaat-tm-fade-hold), transparent 99%);
     mask-repeat: no-repeat;
   }

   --- the note it carried ---
   ---------- The outgoing card dissolves along a curve ----------
   Added 2026-09-10, in place of the hard edge the stage's clip gave.

   Not a geometric cut - an alpha mask whose ramp is an ELLIPSE centred off
   the rail's right edge. Because the ramp is elliptical the fade line
   BOWS: it bites deepest at the top and bottom of a card and least across
   its middle, which is what a curved edge reads as. A linear-gradient
   would fade just as softly and be dead straight.

   Two knobs. `hold` is how far out the mask stays fully opaque, so it
   sets how wide the fade band is; `bow` is the ellipse's vertical radius,
   and LOWER bows harder - at 100% the curve is a circle's edge, at 400% it
   is nearly straight.

   Only under `.is-scrolled`. At rest the first card sits flush against the
   rail's leading edge, so an always-on fade would soften a card that is
   not going anywhere. The class comes from the carousel's own sync(). */
/* REMOVED 2026-09-10 - the rail is now exactly one card wide, so
   max scroll and the last card's offset are equal by construction and
   nothing needs padding out. The reasoning is kept because it applies to
   any bleeding rail:

   A trailing spacer, one flex item wide, so the LAST card can scroll to
   the rail's start edge.

   The rail deliberately has no end padding - it bleeds off the screen so
   the next card peeks in. The cost is that its scrollable length ends
   with the last card's right edge, so where a card is nearly as wide as
   the rail there is not enough travel left to bring that card to the
   start: it stops short by exactly the frame's leading padding and sits
   that far right of the heading above it. Which is what "the second card
   is not centred" was.

   The spacer is that same leading padding, so the last card comes to rest
   in precisely the place the first one occupies. `::after` rather than
   `padding-inline-end`, which flex scroll containers have a long history
   of dropping on the last item. Only where the cards are sized from the
   viewport - above that the card is a fixed 600 in a much wider rail and
   already lands fully visible. */
.edaat-tm-card {
  --edaat-tm-hover-dur: .25s;
  --edaat-tm-hover-scale: 1.03;
  margin: 0; /* figure carries a UA 16px 40px */
  /* the same declared length the rail sizes itself from */
  flex: 0 0 var(--edaat-tm-card-w);
  inline-size: var(--edaat-tm-card-w);
  scroll-snap-align: start;
  gap: var(--edaat-space-24);
  /* 32, down from Figma's 40 - reduced 2026-09-10.

     The height comes down with it, and note the WIDTH deliberately does
     not: narrowing the card narrows the text measure, quotes wrap to more
     lines and the card gets TALLER, which is the opposite of smaller. At
     32 the measure actually widens from 520 to 536, so no quote can gain
     a line and nothing can overflow. */
  padding: var(--edaat-space-32);
  border-radius: var(--edaat-radius-12);
  background: var(--edaat-bg-page); /* the token IS var(--edaat-bg-page) */
  /* Figma: 0px 0px 20px rgba(0,0,0,0.05). Blur 20, not the 10 that was
     here. No shadow token matches it - the ramp runs xs/sm/md/lg/xl and
     none of them is a flat 0-offset 20 - so it is written out. */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  /* Figma draws this card at a FIXED 324. Taken as a MINIMUM, with
  the reduction came out of the
       padding and the avatar, not out of the text.

       288 is a floor for the case where every quote is short. In practice
       the five-line card sets the row at 300 and stretch levels the rest. */
  min-block-size: 288px;
  transform-origin: center center;
  /* scale, not transform: the section reveal owns transform on this card
     and runs it at about a second. Same reasoning, and the same trap, as
     .edaat-kf-card. */
  transition: scale var(--edaat-tm-hover-dur) ease-out, box-shadow var(--edaat-tm-hover-dur) ease-out;
}

/* ---------- The hover zoom ----------
   1.03, and it is the same PIXEL travel as the 1.05 on the 370-wide Key
   Features card - 9px per side edge. Perceived growth is pixels, not
   ratio, so a 600-wide card takes a smaller number to move the same
   amount. Going to 1.05 here would travel 15px a side and read as a jump.

   Budget against the 34 of room, on the 600x324 card: the zoom travels 9
   across and 4.9 down, and the hover shadow reaches 8 + 20 = 28 below.
   9 + 20 = 29 sideways and 4.9 + 28 = 33 down, both inside 34. That is
   what sizes the shadow: it has to read as DEEPER than the resting
   0 0 20 at 5% - hence 8/20 at 12% - without reaching past the room.

   Below 1200 the scale variable is 1, so this rule is a no-op rather than
   a clipped zoom on a phone. */
.edaat-tm-card:hover {
  scale: var(--edaat-tm-hover-scale);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .edaat-tm-card {
    transition: none;
  }
}
.edaat-tm-card__who {
  inline-size: 100%;
  gap: 15px; /* legacy/space/15 */
}

/* image_placeholder — an 80 round window over a 79 x 70 mark, so the
   logo keeps its own shape and only its corners are taken. */
/* 72, down from the drawn 80 - the circle is the tallest thing in the card
   after the quote itself, so it is where the other 8px of the reduction
   comes from. Everything inside it is scaled by the same 0.9 so the logo
   keeps its position in the circle rather than being re-cropped. */
.edaat-tm-card__avatar {
  flex: 0 0 auto;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 100px; /* legacy/radius/100 */
  overflow: clip;
}

/* A window onto the SAME clients strip the belt at the top of the page
   uses, rather than ten new files: --tm-logo-x and --tm-logo-w are that
   belt's own numbers, and the sprite is 1618 x 62.

   The mark is fitted to 64 x 48 inside the 80 circle - by width for the
   wide logos, by height for the narrow ones, whichever is the binding
   constraint. Without the height term a 74-wide mark would scale to 0.87
   and stand 54 tall in an 80 circle with no room around it. */
.edaat-tm-card__avatar--logo {
  --tm-sprite-w: 1618;
  --tm-fit-w: 58; /* 64 x 0.9, for the 72 circle */
  --tm-fit-h: 44; /* 48 x 0.9 */
  /* fallbacks so a card that forgets its two custom properties still
     renders a logo rather than dropping the whole declaration - a var()
     that resolves to nothing invalidates the property at computed-value
     time, not just that one term */
  --tm-scale: min(var(--tm-fit-w) / var(--tm-logo-w, 90), var(--tm-fit-h) / 62);
  background-image: url("../images/home/clients-strip-colour.png");
  background-repeat: no-repeat;
  background-size: calc(var(--tm-sprite-w) * var(--tm-scale) * 1px) auto;
  background-position: calc(var(--tm-logo-x, 0) * var(--tm-scale) * -1px) center;
}

.edaat-tm-card__avatar img {
  position: absolute;
  /* Figma's 79 x 70 at 1 / 0.0625 inside an 80 circle, all x 0.9 for 72.
     Without scaling, a 79-wide image in a 72 box would be cropped. */
  inset-inline-start: 0.9px;
  inset-block-start: 0.056px;
  inline-size: 71.1px;
  block-size: 63px;
  object-fit: cover;
}

/* Figma sets this one line in Manrope ExtraBold 20 — the only
   non-Inter type on the page. Rendered in Inter Bold, which is the
   system's decided typeface; see the changelog. */
.edaat-tm-card__name {
  margin: 0;
  font-size: 20px;
  line-height: normal;
  color: var(--edaat-text-link);
}

/* body-lg/Regular on legacy/color/1e1e1e */
.edaat-tm-card__quote {
  margin: 0;
  inline-size: 100%;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 28px;
  color: var(--edaat-tm-body);
}

/* Below Figma's frame the left column takes the container gutter and
   the rail follows it; the composition itself is unchanged. */
@media (max-width: 1439.98px) {
  .edaat-tm__head {
    inset-inline-start: var(--edaat-space-60);
  }
  .edaat-tm__rail {
    inset-inline-start: 513px;
  }
}
/* Under 1200 there is no room for a 393 column beside a 600 card, so
   the stage stacks and the disc becomes a corner bleed behind it. */
@media (max-width: 1199.98px) {
  .edaat-tm__frame {
    block-size: auto;
    display: flex;
    flex-direction: column;
    gap: var(--edaat-space-40);
    padding: var(--edaat-space-60);
  }
  /* Both come out of the absolute composition. The width is released for
     the HEAD only: the rail must keep the one-card width it is given in
     the base rule, or it stretches to the frame and shows two cards -
     which is exactly what went wrong on 2026-09-10. Its own
     margin-inline: auto then centres it as a flex item. */
  .edaat-tm__head,
  .edaat-tm__rail {
    position: static;
    transform: none;
  }
  .edaat-tm__head {
    inline-size: auto;
  }
  /* One card, centred here too - so the frame's padding becomes
     SYMMETRIC. It had no trailing padding only so the rail could bleed
     off the screen edge; nothing bleeds now, and the heading no longer
     has to carry its own end padding to compensate. */
  /* no pointer to hover with and the card wants the full width, so the
     room collapses and the zoom becomes a no-op */
  :root {
    --edaat-tm-zoom-room: 0px;
  }
  .edaat-tm-card {
    --edaat-tm-hover-scale: 1;
  }
  .edaat-tm__head {
    max-inline-size: 540px;
    padding-inline-end: 0;
  }
  .edaat-tm__circle {
    inset-block: auto -160px;
    transform: none;
  }
  .edaat-tm__circle--disc {
    inline-size: 560px;
    block-size: 560px;
    inset-inline-end: -200px;
  }
}
@media (max-width: 991.98px) {
  .edaat-tm__frame {
    padding: var(--edaat-space-48) var(--edaat-space-24);
  }
  :root {
    --edaat-tm-card-w: min(600px, calc(100vw - 48px));
  }
  .edaat-tm__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
  /* width comes from the rail now, and the frame provides the gutter */
}
@media (max-width: 767.98px) {
  .edaat-tm__frame {
    padding: var(--edaat-space-40) var(--edaat-space-20);
  }
  :root {
    --edaat-tm-card-w: min(600px, calc(100vw - 40px));
  }
  .edaat-tm__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
  .edaat-tm-card {
    padding: var(--edaat-space-24);
  }
  .edaat-tm__circle--disc {
    inline-size: 380px;
    block-size: 380px;
    inset-inline-end: -140px;
    inset-block-end: -120px;
  }
}
/* ==================== Testimonial avatar sprite slots ====================
   One modifier per organisation. Was 5 inline style="" attrs on index.html
   until 2026-09-16; values unchanged.

   Named for the organisation (its own aria-label), not numbered like the belt
   modifiers in _home-clients.scss - here the mark IS attributable, because the
   card names who is speaking. The slot each one reuses on the shared clients
   sheet is noted so the two files can be checked against each other.
   ====================================================================== */
.edaat-tm-card__avatar--swa {
  --tm-logo-x: 0;
  --tm-logo-w: 90;
} /* Saudi Water Authority - clients slot c1 */
.edaat-tm-card__avatar--riyadh-chamber {
  --tm-logo-x: 320;
  --tm-logo-w: 130;
} /* Riyadh Chamber - clients slot c3 */
.edaat-tm-card__avatar--moh {
  --tm-logo-x: 703;
  --tm-logo-w: 74;
} /* Ministry of Housing - clients slot c5 */
.edaat-tm-card__avatar--kaec {
  --tm-logo-x: 1027;
  --tm-logo-w: 120;
} /* King Abdullah Economic City - clients slot c7 */
.edaat-tm-card__avatar--simah {
  --tm-logo-x: 1516;
  --tm-logo-w: 102;
} /* SIMAH - clients slot c10 */
/* ==================================================================
   GET IN TOUCH
   ================================================================ */
/* ---------- Get in touch (3012:9401) ----------
   1248 x 339 at x 96 — a 1248 x 279 card with legacy/space/60 below
   it, centred in the 1440 page.

   Three things are drawn rather than exported:

   - the glow is one circle, r 361 of brand/indigo under a Gaussian
     blur of stdDeviation 289.495, which is `filter: blur(289.495px)`
     one for one. Figma's own export bakes it into an 1880-square SVG;
     a div is the same picture, at any size, for no bytes.
   - the "clip path group" mask is a plain 456 black rectangle, so it
     is `overflow: clip` and needs no mask at all.
   - the arcs sit 456 square against the card's right edge —
     792 + 456 = 1248 exactly — so they anchor there and stay put. */
:root {
  --edaat-cta-bg: #001a57; /* Primary blue dark */
  --edaat-cta-copy: #ebf1ff; /* Primary blue light */
}

.edaat-cta {
  inline-size: 100%;
  padding-block-end: var(--edaat-space-60);
  background: var(--edaat-bg-page);
}

.edaat-cta__card {
  inline-size: 100%;
  max-inline-size: 1248px;
  overflow: clip;
  border-radius: 32px; /* legacy/radius/32 */
  background: var(--edaat-cta-bg);
  /* 55.5625 + 167 + 56.4375 = 279. Figma's content frame sits half a
     pixel above centre, so the two block paddings differ. */
  padding: 55.5625px 58px 56.4375px;
}

.edaat-cta__glow {
  z-index: 0;
  inset-inline-start: 19.47%; /* 243 of 1248 */
  inset-block-start: 200px;
  inline-size: 722px;
  block-size: 722px;
  border-radius: 50%;
  background: var(--edaat-brand-indigo);
  filter: blur(289.495px);
}

/* Clip path group (3012:9414) — the group carries opacity .3 inside
   the file and the frame another .6, so the arcs land at .18. */
.edaat-cta__arcs {
  z-index: 0;
  inset-inline-end: 0;
  inset-block-start: -21.9375px;
  inline-size: 456px;
  block-size: 456px;
  overflow: clip;
  opacity: 0.6;
}

.edaat-cta__arcs img {
  position: absolute;
  inset-inline-start: -273.78px;
  inset-block-start: -377.386px;
  inline-size: 1583.42px;
  block-size: 1578.31px;
  max-inline-size: none;
}

.edaat-cta__body {
  z-index: 1;
  gap: 25px; /* legacy/space/25 */
}

.edaat-cta__copy {
  inline-size: 100%;
  max-inline-size: 546px;
  gap: var(--edaat-space-16);
}

/* legacy/display-40/Semi Bold */
.edaat-cta__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--edaat-text-inverse, #ffffff);
}

/* legacy/auto/Inter Regular 16/lh-auto, letter-spacing -3% */
.edaat-cta__lead {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  /* Figma calls this lh-auto and resolves it to 19, where the browser
     resolves Inter 16 to 20 — a 2 per line that the fixed 279 card has
     no room for, so it is pinned to the value Figma actually draws. */
  line-height: 19px;
  letter-spacing: -0.48px;
  color: var(--edaat-cta-copy);
}

.edaat-cta__arrow {
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
}

/* 13.5925 x 7.66803 turned a quarter turn to point along the reading
   direction. Figma stores -90.72; the 0.72 is a rotation artefact. */
.edaat-cta__arrow img {
  display: block;
  inline-size: 13.5925px;
  block-size: 7.66803px;
  transform: rotate(-90deg);
}

@media (max-width: 1439.98px) {
  .edaat-cta {
    padding-inline: var(--edaat-gutter);
  }
}
@media (max-width: 991.98px) {
  .edaat-cta {
    padding-block-end: var(--edaat-space-48);
  }
  .edaat-cta__card {
    padding: var(--edaat-space-40);
  }
  .edaat-cta__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
  /* the arcs are drawn for a 1248 card; below that they crowd the copy */
  .edaat-cta__arcs {
    inline-size: 300px;
    block-size: 300px;
  }
}
@media (max-width: 767.98px) {
  .edaat-cta {
    padding-block-end: var(--edaat-space-40);
  }
  .edaat-cta__card {
    padding: var(--edaat-space-24);
    border-radius: var(--edaat-space-24);
  }
  .edaat-cta__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.84px;
  }
  .edaat-cta__arcs {
    display: none;
  }
}
/* =============================================================
   MARKETING PAGES — Layout/Page Hero, floating Navbar,
   Card/Feature grid and Footer/Full.

   Added for Our Services (3012:8012). Every value below is
   measured from that screen; the four components are shared by
   the other seven marketing pages (FAQ, About, Terms, Privacy,
   Contact Us, Complaint Escalation, Home).
   ============================================================= */
/* ==================================================================
   ABOUT EDAAT — the intro row
   ================================================================ */
/* =============================================================
   ABOUT EDAAT — intro row, Layout/Section Header, Goals mosaic
   and Card/Goal. Measured from `About edaat — Design System`
   (3012:8166). The hero, navbar and footer are the marketing
   components above, unchanged.
   ============================================================= */
:root {
  /* Two values on this screen are legacy one-offs rather than tokens,
     and Figma names them as such: `legacy/color/1a2f55` for the intro
     copy and `legacy/space/100` for the goals band's bottom padding.
     Kept literal and named, so they read as deliberate. */
  --edaat-legacy-1a2f55: #1a2f55;
  --edaat-legacy-space-100: 100px;
}

/* ---------- Intro section (3012:8170) ----------
   White band, padding-block 60. The row is SPACE_BETWEEN with a 12
   minimum gap, so the 128 of slack between the 603 text column and
   the 545 photograph opens up on its own. */
.edaat-about-intro {
  inline-size: 100%;
  gap: var(--edaat-space-16);
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
  background: var(--edaat-bg-page);
  overflow: clip;
}

/* space/24 between the text and the photograph — the gap Home uses
   twice for an illustration beside a content column (Frame 264 and
   Frame 265, 673 + 24 + 500).

   Nothing here is a frozen width. The row is capped at 1228 and
   centred, the same container every other section on the site uses;
   the photograph holds its drawn 545 and the copy takes whatever is
   left, so the gap stays a real 24 instead of being leftover slack.
   At 1348 that lands the measure on 659 and the photograph on x=743,
   exactly as Figma draws it — and on a wider screen the row centres
   rather than stranding the surplus against the right edge. */
/* THE ROW IS THE BOOTSTRAP ROW. `.row` in the markup carries display, wrap
   and the negative gutter margins; `col-12 col-xl` and `col-12 col-xl-auto`
   carry the split and the stacking. The gutter IS the 24 this used to spend
   on `gap`, so Bootstrap's 1.5rem default needs no change of value - only
   of name.

   THE +24 IS THE GUTTER, NOT A FUDGE - the same arithmetic the goals mosaic
   documents. Bootstrap pays for a gutter with margin-inline: -12 on the row
   and padding-inline: 12 on every column, including the two OUTER edges that
   the gap model never charged for. So the cap has to be 24 wider than the
   1228 grid for the content to land back on 1228, and inline-size has to
   grow by the same 24 or a bare 100% caps first on a narrower viewport. */
.edaat-about-intro__row {
  --bs-gutter-x: var(--edaat-space-24);
  inline-size: calc(100% + var(--edaat-space-24));
  max-inline-size: calc(1228px + var(--edaat-space-24));
}

/*  is col-xl's job now (1 0 0% at xl, width:100% below it). The
   min-inline-size stays: a column may not refuse to shrink below its text. */
.edaat-about-intro__text {
  min-inline-size: 0;
  gap: var(--edaat-space-32);
  padding-block: var(--edaat-space-16);
}

.edaat-about-intro__logo {
  inline-size: 170px;
  block-size: 35px;
}

/* .edaat-about-intro__copy: layout is Bootstrap (w-100 d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
/* Edaat/legacy/auto/Inter Regular 20/lh-23 — a legacy type style,
   not a step on the scale, so the values are written out. */
.edaat-about-intro__copy p {
  margin: 0;
  font-size: 20px;
  line-height: 23px;
  color: var(--edaat-legacy-1a2f55);
}

.edaat-about-intro__copy a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}

.edaat-about-intro__copy a:hover {
  color: var(--edaat-text-brand);
}

/* 545x414 with a 5px white edge and radius 20 on both the frame and
   the photograph, as drawn. The edge is white on a white band, so it
   reads as an inset rather than a frame. */
/* Sized here rather than by a column: 545 is a drawn width and Bootstrap has
   no column that means 545. col-xl-auto wraps it and takes the gutter, so the
   border and its radius stay on the artwork's own box. */
.edaat-about-intro__figure {
  inline-size: 545px;
  max-inline-size: 100%;
  block-size: 414px;
  border: 5px solid var(--edaat-bg-page);
  border-radius: var(--edaat-radius-20);
}

.edaat-about-intro__figure img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--edaat-radius-20);
}

/* ==================================================================
   ABOUT EDAAT — the goals band and its mosaic
   ================================================================ */
/* ---------- Goals section (3012:8189) ----------
   The same indigo tint as the Our Services band, but not the same
   band: this one holds its 15% between 26.442% and 70.554% (Services
   opens at 20.324%), sits on an explicit white base, and its padding
   is 40 / 60 / 100 rather than a flat 60. Two frames, two rules. */
.edaat-goals {
  inline-size: 100%;
  gap: var(--edaat-space-60);
  padding-block-start: var(--edaat-space-40);
  padding-block-end: var(--edaat-legacy-space-100);
  padding-inline: var(--edaat-gutter);
  background-image: linear-gradient(180deg, rgba(84, 86, 161, 0) 0%, rgba(84, 86, 161, 0.15) 26.442%, rgba(84, 86, 161, 0.15) 70.554%, rgba(84, 86, 161, 0) 100%), linear-gradient(90deg, var(--edaat-bg-page) 0%, var(--edaat-bg-page) 100%);
  overflow: clip;
}

/* 1228 = 4 x 292 + 3 x 20. Figma nests it as two 604 halves — four
   compact cards stacked 2 x 2 on the left, two full-height cards on
   the right — and that nesting is kept, because it stacks cleanly
   and needs no grid placement to put a tall card beside a pair. */
/* The mosaic IS the Bootstrap row: `.row` in the markup carries display,
   wrap and the negative margins, and `col-12 col-xl-6` on the two halves
   carries the 50/50 split and the stacking. What stays here is the part
   Bootstrap has no utility for.

   THE +20 IS NOT A FUDGE, IT IS THE GUTTER. Bootstrap pays for a gutter
   with `margin-inline: -10` on the row and `padding-inline: 10` on every
   column — including the two OUTER edges, which the gap model never
   charged for. So the row has to be 20 wider than the 1228 grid for its
   content to land back on 1228. `inline-size` has to grow by that same 20
   as well: at the 1366 artboard the available width is 1246, so a bare
   `100%` caps at 1246 rather than 1248 and every card comes out 291.5
   instead of 292 — measured, and invisible in review.

   `row-gap`, not `gap`: the row wraps, so `gap` would ALSO re-add 20 on
   the inline axis on top of the gutters. row-gap is inert while both
   halves share a line and gives exactly 20 once col-12 stacks them. */
.edaat-goals__mosaic {
  --bs-gutter-x: var(--edaat-space-20);
  inline-size: calc(100% + var(--edaat-space-20));
  max-inline-size: 1248px;
  align-items: flex-start;
  row-gap: var(--edaat-space-20);
}

/* inline-size / flex-basis are the column's job now (col-xl-6 = width 50%,
   col-12 = 100%); only the inner stack is left. NOT `d-flex flex-column`
   in the markup: `flex-column` is !important and --tall's `row` would lose
   to it, which would stack the two tall cards at every width. */
.edaat-goals__group {
  flex-direction: column;
  gap: var(--edaat-space-20);
}

.edaat-goals__group--tall {
  flex-direction: row;
}

.edaat-goals__row {
  gap: var(--edaat-space-20);
}

/* ---------- About edaat — responsive ---------- */
@media (max-width: 1199.98px) {
  /* The mosaic's four 292 columns no longer fit; the two halves stack
     and each keeps its own 2-up row. The stacking itself is `col-12` in
     the markup — the row wraps and row-gap above supplies the 20. Only
     the cross-axis sizing is left to state. */
  .edaat-goals__mosaic {
    align-items: stretch;
  }
  /* The intro row needs 60 + 543 + 12 + 545 + 60 = 1220 and neither
     column may shrink, so it stacks here rather than at lg — below
     1220 the photograph would otherwise be cut off by the section's
     own overflow clip, silently and without a scrollbar. */
  /* No flex-direction and no widths: col-12 makes both columns full width, so
     the row wraps them onto their own lines by itself. row-gap, not gap - the
     inline axis is the gutter's now. */
  .edaat-about-intro__row {
    row-gap: var(--edaat-space-32);
  }
  .edaat-about-intro__text {
    padding-block: 0;
  }
  /* THE RATIO SITS ON THE IMAGE, NOT ON THE FRAME. The frame carries a 5px
     border, and aspect-ratio resolves against the box named by box-sizing -
     border-box here - so putting 545/414 on the frame measures the ratio
     across the border and returns a frame 2.37px shorter. MEASURED: 271.94
     against the 274.31 this has always drawn. On the image the ratio is
     applied to the artwork itself and the border adds its 10 on top, which
     is what the flex item used to resolve to before the column wrapped it.

     max-block-size caps the OTHER end. Once the width hits its 545 ceiling
     the artwork is 535 inside the border and the ratio would return 416.39,
     2.39 taller than the drawn 414 - so the frame is clamped and the image
     crops by its own object-fit, exactly as it did at the artboard width.
     is what the flex item used to resolve to before the column wrapped it. */
  .edaat-about-intro__figure {
    inline-size: 100%;
    max-inline-size: 545px;
    block-size: auto;
    max-block-size: 414px;
  }
  .edaat-about-intro__figure img {
    block-size: auto;
    aspect-ratio: 545/414;
  }
}
@media (max-width: 991.98px) {
  .edaat-about-intro {
    padding-block: var(--edaat-space-40);
  }
  .edaat-goals {
    padding-block-end: var(--edaat-space-60);
    gap: var(--edaat-space-40);
  }
}
@media (max-width: 767.98px) {
  .edaat-about-intro__copy p {
    font-size: var(--edaat-type-body-lg-size);
    line-height: var(--edaat-type-body-lg-line);
  }
  .edaat-goals {
    padding-block-end: var(--edaat-space-40);
  }
  .edaat-goals__row {
    flex-direction: column;
  }
  .edaat-goals__group--tall {
    flex-direction: column;
  }
  .edaat-card-goal {
    inline-size: 100%;
    flex: 0 0 auto;
  }
  .edaat-card-goal--tall {
    block-size: auto;
    min-block-size: 280px;
  }
}
/* ==================================================================
   FAQ
   ================================================================ */
/* ============================ FAQ ============================
   FAQ — Design System `3012:8028`, 1348x1755: hero 0/316, Questions
   band 316/1068, footer 1384/371.

   `Questions band` 3012:8030 — 1348x1068, padding 60, VERTICAL,
   counter CENTER, clipsContent. Its ONLY fill is an indigo vertical
   fade; there is no white base, the page frame behind it is white.
   `Questions` 3012:8086 is a fixed 828 column, gap 20, holding 11
   `Collapse/FAQ Item` at 68 each: 11x68 + 10x20 = 948, and
   60 + 948 + 60 = the band's 1068.
   ------------------------------------------------------------ */
/* position / width / the centred column are Bootstrap in the markup
   (position-relative w-100 d-flex flex-column align-items-center) — exact
   equivalents. `position-relative` is what the two gradient pseudo-elements
   below position against, and as a utility it is !important, so it is now
   harder to lose, not easier. The padding stays: both values are tokens
   (--edaat-gutter is itself responsive) and padding-block has a 575.98
   partner further down, which an !important utility would defeat. */
.edaat-faq-band {
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
  overflow: clip;
}

/* paint0_linear_3012_7979 — userSpace x1/x2 both 674, y 0 to 1068, so
   the gradient is vertical over the band's full height. Layer opacity
   .15 is folded into the stops.                                      */
.edaat-faq-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(84, 86, 161, 0) 0%, rgba(84, 86, 161, 0.15) 33.6538%, rgba(84, 86, 161, 0.15) 62.5%, rgba(84, 86, 161, 0) 100%);
}

/* `Line 9` 3012:8031 — 53 vectors, #4a3aff at 5%, drawn 1426.633 wide
   at x -39.313 in a 1348 band, so it overhangs 39.3 each side and the
   band clips it. Its centre lands on 674, exactly the band's, so
   centring reproduces the drawn position. The export is that clipped
   1348x545 view — exactly the sweep the band shows in Figma.

   It SCALES with the band rather than holding 1348: `aspect-ratio` sets
   the height off the width, so the whole sweep is visible at every
   width and lands on Figma's own 1348x545 at the drawn width. Pinning
   it to 1348 instead cropped it to the middle of the pattern on any
   narrower viewport.                                                  */
.edaat-faq-band::after {
  content: "";
  position: absolute;
  inset-block-start: 302px;
  inset-inline: 0;
  aspect-ratio: 1348/545;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/faq-wave.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.edaat-faq-band > * {
  position: relative;
  z-index: 1;
}

/* `Collapse/FAQ Item` set 2865:3509 — State=Collapsed 2865:3493 /
   State=Expanded 2865:3501. Both 826 wide, padding 16/24, radius 8,
   white, gap 16; Expanded adds #4a3aff at 7% over the white and hugs
   its answer. Header is a 36 min-height row, gap 16, items centred.
   Each item's prototype toggles only itself, so several may be open. */
/* The list IS the Bootstrap row: `row g-0 w-100` in the markup, with
   `col-12` on each <details>. g-0 zeroes both gutters, so the row keeps
   its negative margins at 0 and every item's box is the full 828 — the
   same box the flex column gave it.

   `col-12` sits on the <details> ITSELF rather than on a wrapper, which
   matters twice: no element is added (the snapshot keys elements by tree
   path, so a wrapper would read as a structural change), and the reveal
   selectors `.edaat-faq > [data-reveal]:nth-child(4n+…)` further down go
   on matching, which a wrapper would have broken silently.

   `row-gap`, not `gap`: the row wraps and every item is 100%, so each
   lands on its own line and row-gap is the 20 between them. Plain `gap`
   would also re-add 20 on the inline axis. */
.edaat-faq {
  max-inline-size: 828px;
  row-gap: var(--edaat-space-20);
}

.edaat-faq__item {
  padding: var(--edaat-space-16) var(--edaat-space-24);
  border-radius: var(--edaat-radius-8);
  background-color: var(--edaat-bg-page);
}

/* Expanded's second fill, over the page white rather than replacing it. */
.edaat-faq__item[open] {
  background-image: linear-gradient(rgba(74, 58, 255, 0.07), rgba(74, 58, 255, 0.07));
}

/* The header row is Bootstrap in the markup — `d-flex align-items-center
   gap-3 fw-medium`. gap-3 is 1rem and --edaat-space-16 is 16px, and
   fw-medium is 500, so both are exact.

   `list-style: none` stays and MUST: this is a <summary>, and without it
   the disclosure triangle comes back. Bootstrap has no utility for it, nor
   for the 36 min-height or the type tokens. */
.edaat-faq__q {
  min-block-size: 36px;
  cursor: pointer;
  list-style: none;
  /* body-lg/Medium, and the chevron takes the same colour via
     currentColor the way Figma sets both to one value.  */
  color: var(--edaat-text-heading);
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
}

.edaat-faq__q::-webkit-details-marker {
  display: none;
}

.edaat-faq__q:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
  border-radius: var(--edaat-radius-4);
}

/* flex: 1 1 auto is Bootstrap's `flex-fill` in the markup — exact. The
   min-inline-size: 0 stays: it is what lets a long question wrap instead
   of forcing the row wider, and Bootstrap has no utility for it. */
.edaat-faq__q-text {
  min-inline-size: 0;
}

/* Figma swaps the glyph rather than rotating one — arrow-down-01 when
   collapsed, arrow-up-01 when expanded. Both are the real icons.     */
/* display and centring are Bootstrap in the markup (d-inline-flex
   align-items-center justify-content-center). The 16x16 box and the
   `flex: 0 0 auto` stay — no utility matches either, and flex-grow-0 +
   flex-shrink-0 would leave flex-basis implied rather than stated. */
.edaat-faq__chevron {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
}

/* Both halves of each pair are one-class selectors, so the show/hide
   rules have to match the `.edaat-faq__chevron svg` specificity or
   they lose and both glyphs render. */
.edaat-faq__chevron svg {
  inline-size: 16px;
  block-size: 16px;
}

.edaat-faq__chevron .edaat-faq__chevron--down {
  display: block;
}

.edaat-faq__chevron .edaat-faq__chevron--up {
  display: none;
}

.edaat-faq__item[open] .edaat-faq__chevron--down {
  display: none;
}

.edaat-faq__item[open] .edaat-faq__chevron--up {
  display: block;
}

/* `Answer` frame — padding-right 32, and the 16 gap below the header.
   The gap is a margin so it only exists when the item is open.       */
/* The 16 above the answer is Bootstrap's `mt-3` in the markup — 1rem, and
   margin-block-start resolves to margin-top in this writing mode.
   padding-inline-end stays: 32 is not on Bootstrap's spacer scale at all,
   and it has a 575.98 partner below that an !important utility would beat. */
.edaat-faq__a {
  padding-inline-end: var(--edaat-space-32);
}

.edaat-faq__a p {
  margin: 0;
  color: var(--edaat-text-secondary);
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
}

.edaat-faq__a a {
  color: var(--edaat-text-link);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .edaat-faq-band {
    padding-block: var(--edaat-space-40);
  }
  .edaat-faq__a {
    padding-inline-end: 0;
  }
}
/* =============================================================
   CONTACT US — Figma `Contact Us — Design System` (3012:8099),
   1366x1651. Bands, top to bottom:

     Layout/Page Hero   3012:8100   y 0     h 316
     Info section       3012:8101   y 316   h 316
     Form band          3012:8113   y 632   h 648
     Footer/Full        3012:8132   y 1280  h 371

   The hero, floating navbar and footer are the shared marketing
   components above and are unchanged. What is new here is the
   eyebrow line, the two channel cards and the form band.
   ============================================================= */
/* ---------- Info section (3012:8101) ----------
   1366x316, no fill of its own — it sits on the page white between
   the hero's fade-out and the form band. Padding 60/16, content
   centred: 60 + 196 + 60 = 316. */
.edaat-contact-info {
  inline-size: 100%;
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
}

/* `Channels` 586x196 — 277 + 32 + 277. Capped and centred rather than
   frozen, the shape every other section on the site uses, so the pair
   is exact at the design width and centred above it.

   A Bootstrap `.row`, like `.edaat-feature-grid__row` on Our Services:
   the pair/stack split is `col-12 col-sm-6` in the markup, so the
   bespoke media query that redrew `grid-template-columns` is gone. The
   gutter stays on the Edaat scale — 32, the drawn number — rather than
   Bootstrap's spacers.

   `d-flex` on each column plus `flex: 1` here is what `display: grid`
   gave for free: both cards take the taller one's height, with no
   min-height guess. Bootstrap's own `h-100` is in the full utilities
   API, which this project does not compile.

   The 586 cap is on the WRAPPER and the gutter on the inner `.row`,
   which is why this is two elements. A max-inline-size on the row
   itself caps its border box, so Bootstrap's negative gutter margins
   shift it without widening it and each card loses half a gutter —
   277 measured 261. */
.edaat-contact-channels {
  inline-size: 100%;
  max-inline-size: 586px;
}

.edaat-contact-channels__row {
  --bs-gutter-x: var(--edaat-space-32);
  --bs-gutter-y: var(--edaat-space-32);
}

.edaat-contact-channels__row > [class*=col-] > .edaat-card {
  flex: 1 1 auto;
}

/* ---------- Contact Us — responsive ----------
   Figma draws one width. Everything above is capped and centred, so
   the page is exact at 1366 and centred above it; below the design
   width these are the two places that need a real change. */
@media (max-width: 767.98px) {
  /* The 550 column keeps its 16 gutter but the band's vertical rhythm
     drops a step, matching what the other marketing pages do. */
  .edaat-form-column {
    gap: var(--edaat-space-24);
  }
}
@media (max-width: 575.98px) {
  /* Two 277 cards cannot hold their address on a phone; one column
     keeps the measure and the 16 rhythm inside each card. `col-sm-6`
     does the stacking — only the gutter step is left here. */
  .edaat-contact-channels__row {
    --bs-gutter-x: var(--edaat-space-20);
    --bs-gutter-y: var(--edaat-space-20);
  }
  .edaat-contact-info {
    padding-block: var(--edaat-space-40);
  }
}
/* ==================================================================
   COMPLAINT ESCALATION
   ================================================================ */
/* =============================================================
   COMPLAINT ESCALATION — Figma `Complaint Escalation — Design
   System` (3012:8133), 1366x1963. Bands, top to bottom:

     Layout/Page Hero   3012:8134   y 0     h 272
     Main               3012:8135   y 272   h 440
     Form band          3012:8142   y 712   h 880
     Footer/Full        3012:8165   y 1592  h 371

   The hero is the plain one — no eyebrow, so 272 like Our Services
   rather than Contact Us's 316. The form band is the shared
   `.edaat-form-band` above at this page's own padding and gap.

   NOTE for review: this screen sets all three of its headings in
   Inter MEDIUM — the intro title 24/32 where `heading-lg` is Bold,
   the card titles and `Need further assistance?` 18/28 where
   `heading-sm` is Semi Bold. Followed as drawn, the same call as
   Home's CTA label. It is one decision, and it wants an answer.
   ============================================================= */
/* ---------- Main (3012:8135) ----------
   Figma draws this band 60 / 60 / ZERO / 60 and I reproduced that 0, on the
   reasoning that the form band below owned that edge. It does not — the
   band only carries its own inset — so the cards ended flush against the
   tint and the lead sat 20 below them, against Contact Us's 100 for the
   same join. It is also the only asymmetric content band on the site:
   `.edaat-contact-info` is padding-block 60 and `.edaat-page-band` is a
   flat 60.

   Now 60/60. Gap 32: 60 + intro 100 + 32 + cards 228 + 60 = 480. */
.edaat-complaint-main {
  inline-size: 100%;
  gap: var(--edaat-space-32);
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
}

/* `Intro` 828x100 — gap 12, both lines centred. */
.edaat-complaint-intro {
  inline-size: 100%;
  max-inline-size: 828px;
  gap: var(--edaat-space-12);
}

/* heading-lg's size, line and tracking; Figma draws it Medium. */
.edaat-complaint-intro__title {
  margin: 0;
  inline-size: 100%;
  font-size: var(--edaat-type-heading-lg-size);
  line-height: var(--edaat-type-heading-lg-line);
  font-weight: var(--edaat-weight-medium);
  letter-spacing: var(--edaat-type-heading-lg-tracking);
  color: var(--edaat-text-brand);
}

.edaat-complaint-intro__body {
  margin: 0;
  inline-size: 100%;
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
  color: var(--edaat-text-secondary);
}

/* `Requirements` 828x248 = 398 + 32 + 398. A Bootstrap `.row`, the same
   shape Contact Us and Our Services use: `col-12 col-md-6` in the markup
   carries the pair/stack split, so the media query that redrew
   `grid-template-columns` is gone, and the gutter stays on the Edaat
   scale at the drawn 32.

   `d-flex` on the column plus `flex: 1` here keeps what `display: grid`
   gave for free — both cards take the taller one's height, which is what
   Figma does with FILL on the short card (224 of content in a 248 box).

   The 828 cap is on the WRAPPER and the gutter on the inner `.row`: a
   max-inline-size on the row itself caps its border box, so the negative
   gutter margins shift it without widening it and each card loses half a
   gutter. */
.edaat-complaint-requirements {
  inline-size: 100%;
  max-inline-size: 828px;
}

.edaat-complaint-requirements__row {
  --bs-gutter-x: var(--edaat-space-32);
  --bs-gutter-y: var(--edaat-space-32);
}

.edaat-complaint-requirements__row > [class*=col-] > .edaat-card {
  flex: 1 1 auto;
}

/* ---------- Card/Requirement (2895:3720) ----------
   Not a component of its own here: the requirement cards ARE the shared
   `.edaat-card` above, at `--wide` for the larger body its 398 measure
   takes. Figma draws the component off-system and it was brought onto
   the card — see the note on `.edaat-card`. */
/* ---------- Form band (3012:8142) ----------
   Figma draws this band's padding at 20 and Contact Us's at 40, for the
   same component. 40 is the one kept, so the lead sits the same distance
   below the section above on both pages — the other half of the join
   fixed on `.edaat-complaint-main`. The band is then
   40 + column 756 + 12 + assistance 72 + 40 = 920 against Figma's 880.

   Only the gap is this page's: Contact Us has one child, this one has
   two. */
.edaat-complaint-band {
  gap: var(--edaat-space-12);
}

/* `Form column` 550x736 — the shared `.edaat-form-column` at
   `--complaint`: lead 56 + 40 + fields 640 (the action row last).
   Figma draws 756, the extra 20 being the 60 join this page had above
   its first label where Contact Us has 40. */
/* ---------- Assistance (3012:8156) ----------
   828x72 — the line, 20, then the channel row. */
.edaat-complaint-assistance {
  inline-size: 100%;
  max-inline-size: 828px;
  gap: var(--edaat-space-20);
}

.edaat-complaint-assistance__title {
  margin: 0;
  inline-size: 100%;
  font-size: var(--edaat-type-heading-sm-size);
  line-height: var(--edaat-type-heading-sm-line);
  font-weight: var(--edaat-weight-medium);
  color: var(--edaat-text-heading);
}

/* `Channels` 828x24 — three channels 32 apart, each an icon 8 from its
   own label. Figma draws this screen with all SIX children flat at 32,
   which puts an icon as far from its label as from the next channel
   entirely; `Card/Content` (2539:3967) holds exactly this content and
   settles it — a `Details` row gapped 32 holding `Item`s gapped 8. The
   DS pairing is followed.

   The 16 is the wrapped-line gap only; at the design width the row is
   one line and never uses it. */
.edaat-complaint-assistance__channels {
  gap: var(--edaat-space-16) var(--edaat-space-32);
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-text-secondary);
}

.edaat-complaint-assistance__channels img {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
}

/* `Card/Content`'s `Item`: the icon 8 from its label, at every width. It
   is also what stops a wrap orphaning a mark from its number, which the
   flat row did at 320. */
/* .edaat-complaint-assistance__channel: layout is Bootstrap (d-inline-flex align-items-center gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* ---------- Complaint Escalation — responsive ----------
   Main takes the same gutter steps as `.edaat-page-band`; the cards
   go one-up before either one gets too narrow to hold its copy. */
@media (max-width: 767.98px) {
  .edaat-complaint-main {
    padding-block: var(--edaat-space-32);
    gap: var(--edaat-space-24);
  }
  /* `col-md-6` does the stacking — only the gutter step is left here. */
  .edaat-complaint-requirements__row {
    --bs-gutter-x: var(--edaat-space-20);
    --bs-gutter-y: var(--edaat-space-20);
  }
  /* The channels already pair and wrap correctly; only the gap between
     whole channels needs to come in on a phone. */
  .edaat-complaint-assistance__channels {
    gap: var(--edaat-space-16);
  }
}
/* ==================================================================
   BILL INQUIRY
   ================================================================ */
/* ============================ Bill Inquiry ============================
   Bill Inquiry — Design System `3012:8278`, 1348x1115: navbar 0/64,
   `Band` 64/680, footer 744/371. An app page, so the navbar is the
   full-width `Style=Full width` variant, not the marketing pill.

   `Band` 3012:8280 — padding 100/0, centred on both axes, two fills:
   the page-hero photograph at 15% under #897fff at 3%. CSS paints its
   first layer topmost so the order reverses; both go on pseudo-elements
   because a per-layer opacity is not expressible on `background`.
   `Inquiry card` 3012:8281 — 416x480, padding 40/48, gap 20, white,
   radius 8. Its column is 320 = 416 - 48 - 48, the same 320 the form
   controls are drawn at.
   ------------------------------------------------------------------ */
.edaat-inquiry-band {
  inline-size: 100%;
  padding-block: 100px;
  padding-inline: var(--edaat-gutter);
  overflow: clip;
}

.edaat-inquiry-band::before,
.edaat-inquiry-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.edaat-inquiry-band::before {
  background-image: url("../images/page-hero-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

.edaat-inquiry-band::after {
  background-color: rgba(137, 127, 255, 0.03);
}

.edaat-inquiry-band > * {
  position: relative;
  z-index: 1;
}

.edaat-inquiry-card {
  inline-size: 416px;
  max-inline-size: 100%;
  gap: var(--edaat-space-20);
  padding: var(--edaat-space-40) 48px;
  background-color: var(--edaat-bg-page);
  border-radius: var(--edaat-radius-8);
  /* The cyan cap along the top edge, added 2026-09-10.

     A BORDER, not a pseudo-element: a border follows border-radius on
     its own, so the bar's two top corners curve with the card and
     nothing has to be clipped. An absolutely positioned bar would need
     overflow:clip on the card, and this card has a focus ring inside it
     that clipping would cut.

     --edaat-border-secondary is the token for Edaat's #007db6, the cyan
     already carrying 63 strokes across the file. The card grows 5px;
     it is a flex column with an auto height, so nothing else moves. */
  border-block-start: 5px solid var(--edaat-border-secondary);
  box-shadow: var(--edaat-shadow-sm);
}

/* `Header` — gap 12, and `Badge and title` is a second 12-gap stack, so
   badge -> title -> lead all sit 12 apart. Centred on the cross axis. */
.edaat-inquiry__header,
.edaat-inquiry__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--edaat-space-12);
}

/* `Container` 74x74 at radius 26843500 — a circle by any other name. */
.edaat-inquiry__badge {
  inline-size: 74px;
  block-size: 74px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--edaat-radius-full);
  background-color: rgba(0, 125, 182, 0.08);
}

.edaat-inquiry__title {
  margin: 0;
  font-size: var(--edaat-type-heading-md-size);
  line-height: var(--edaat-type-heading-md-line);
  font-weight: 600;
  color: var(--edaat-text-brand);
}

/* body-xs Medium — the one place this screen sets 12/20 at weight 500. */
.edaat-inquiry__lead {
  margin: 0;
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-secondary);
}

.edaat-inquiry__form {
  gap: var(--edaat-space-20);
}

@media (max-width: 479.98px) {
  .edaat-inquiry-band {
    padding-block: var(--edaat-space-60);
  }
  .edaat-inquiry-card {
    padding-inline: var(--edaat-space-24);
  }
}
/* ============================ Invoice Details ============================
   Invoice Details — Design System `3012:8750`, 1348x1354: navbar 0/64,
   `Content` 64/919, footer 983/371. `Content` padding is 20/40/40/**60**
   (asymmetric, as drawn), so its column is 1348 - 60 - 40 = 1248.
   ----------------------------------------------------------------------- */
.edaat-invoice {
  /* LOGICAL, not the 4-value shorthand this used to be. `padding: T R B L` is
     a literal left/right by another name: in Arabic the 60 stayed physically
     left, so the page content began 40 from the reading edge while the navbar
     and the footer began at 60. Written as start/end it mirrors on its own. */
  padding-block: var(--edaat-space-20) var(--edaat-space-40);
  padding-inline: var(--edaat-gutter);
  background-color: var(--edaat-bg-page);
  overflow: clip;
}

/* white base + the page-hero photograph at 15%, the same stack the Bill
   Inquiry band and the two form bands use. */
.edaat-invoice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/page-hero-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

.edaat-invoice > * {
  position: relative;
  z-index: 1;
}

/* .edaat-invoice__inner: layout is Bootstrap (d-flex flex-column gap-4) in the markup — exact equivalents, nothing left to declare here. */
/* `Heading` 3012:8753 — 1248x60, gap 8. */
/* .edaat-invoice__heading: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* `Nav/Breadcrumb` — matched to the ORIGINAL on ▶️ EDAAT 2nd option
   (`1268:15802`, an instance of `Breadcrumb Levels=2`), not to the
   DS-applied screen, which had recoloured both crumbs to link blue and
   lost the root/current distinction entirely.

   Original: 191x20, the row itself at gap 0 — each `_Breadcrumb Item`
   carries its own `gap: 4` and `padding-inline-end: 4`, and the separator
   sits INSIDE the second item, ahead of its label. Root 73 = 69 + 4;
   Current 118 = 16 + 4 + 94 + 4.

   Colour is the original's own, read off the node rather than sampled off
   the render: root `#384250`, separator and current page both `#9da4ae`
   (one variable, `Gray/400`, reached through `Icon/icon-default-400` and
   `Global/text-default-disabled`). An earlier pass read the chevron as
   `#a3a9b3` — that was antialiasing on a 1px stroke.

   THE THREE TOKENS BELOW WERE NEVER DEFINED. This comment claimed they
   "now carry the drawn values via --edaat-breadcrumb-*", but no such
   custom property existed anywhere - not in edaat-tokens.css, not in
   tokens/, not inline. So all three `color` declarations were invalid at
   computed-value time and fell back to `inherit`: the root link, the
   current page and the chevron were all painting in whatever colour the
   heading passed down, and the root/current distinction the original
   draws did not exist. Defined here now, as Layer 3 component tokens.

   THE HIERARCHY IS THE POINT: the previous page reads DARKER than the
   page you are on. That is what the original draws - root #384250 against
   a #9da4ae current - and a pass that set both to the same grey lost it.
   So did the DS-applied screen, which recoloured both crumbs to link blue.

   Contrast on the white page, at body-sm 14px (normal text, AA 4.5:1):

     previous  gray-600 #545454   7.57:1  AA   text-secondary
               drawn    #384250  10.18:1       (not on the Edaat ramp)
     current   gray-500 #727272   4.81:1  AA   text-tertiary
               drawn    #9da4ae   2.51:1  NO   real text, cannot ship
     chevron   gray-400 #a0a0a0   2.61:1       decorative, aria-hidden

   Which step goes where is FORCED, not chosen. The current-page label is
   informative text, so it cannot go below gray-500 - gray-400 is 2.61:1.
   That pins the light end of the pair, so the previous page has to take
   the step below it, gray-600, to be visibly darker. One step apart on
   the ramp, both clearing AA, three tiers with the chevron lighter still.

   The previous page stays a GREY, not --edaat-text-link. The comment above
   records why: recolouring the crumbs to link blue is exactly what the
   DS-applied screen did wrong, and the original keeps them neutral.  */
:root {
  /* darker: the page you can go back to */
  --edaat-breadcrumb-link: var(--edaat-text-secondary); /* gray-600, 7.57:1 */
  /* lighter: the page you are on. gray-500 is the AA floor for text. */
  --edaat-breadcrumb-current: var(--edaat-text-tertiary); /* gray-500, 4.81:1 */
  --edaat-breadcrumb-separator: var(--edaat-gray-400); /* the drawn grey; decorative */
}

.edaat-breadcrumb {
  gap: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
}

.edaat-breadcrumb__item {
  gap: var(--edaat-space-4);
  padding-inline-end: var(--edaat-space-4);
}

.edaat-breadcrumb a {
  color: var(--edaat-breadcrumb-link);
  text-decoration: none;
}

.edaat-breadcrumb a:hover {
  color: var(--edaat-text-brand);
}

.edaat-breadcrumb a:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
  border-radius: var(--edaat-radius-2);
}

.edaat-breadcrumb [aria-current] {
  color: var(--edaat-breadcrumb-current);
}

/* arrow-right-01-round Property 1=outline — a 16x16 slot holding a
   5.732x11.558 glyph. The real icon, tinted through currentColor. */
.edaat-breadcrumb__sep {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
  color: var(--edaat-breadcrumb-separator);
}

.edaat-breadcrumb__sep svg {
  display: block;
  inline-size: 5.732px;
  block-size: 11.558px;
}

/* `Title` — H gap 10, centred: the h1 plus a status badge. */
.edaat-invoice__title-row {
  gap: var(--edaat-space-10);
  flex-wrap: wrap;
}

.edaat-invoice__title {
  margin: 0;
  /* heading-lg is 24/32 in the scale but at weight 700; this title, like
     every other heading on the site, is drawn Semi Bold. Followed. */
  font-size: var(--edaat-type-heading-lg-size);
  line-height: var(--edaat-type-heading-lg-line);
  font-weight: 600;
  color: var(--edaat-text-brand);
}

/* `Feedback/Badge Type=Success` — 74x20, padding 2/10, radius full,
   body-xs Medium. Drawn on #f5fcf9 in #1b653e.  */
/* A pill that stretches is not a pill, so the badge asserts its own width
   rather than trusting every future parent to be a row or to remember
   align-items. Belt and braces with the container fix above: fit-content
   makes the inline size definite, which is what stops a flex column
   stretching it, and it changes nothing in a flex row where the inline
   axis is the main one already.

   Note this is a SIZE, not an alignment - where the badge sits is still
   the container's business, per the Form Actions rule. */
.edaat-badge {
  inline-size: fit-content;
  /* 4/10, up from the drawn 2/10. At 2 the pill stood 20 tall around a 16
     line - the label was touching the top and bottom of its own fill. 4
     lands it on 24, which is the ordinary size for a
     12px status badge and sits on the 4px grid the rest of this file uses.

     Not 6: the horizontal padding carries the pill shape, and 6/10 is a
     1:1.67 ratio that starts reading as a chip or a small button. 4/10 is
     1:2.5 and still unmistakably a pill.

     With the stroke gone the pill is 4 + 16 + 4 = 24 exactly. */
  padding: var(--edaat-space-4) var(--edaat-space-10);
  border-radius: var(--edaat-radius-full);
  font-size: 12px;
  line-height: 16px;
}

/* ---------- Success ----------
   Stroke removed 2026-09-10, so the FILL is now the only
   thing making this read as a pill - which is why it goes one step further
   down the ramp than it did with a border to lean on.

   Measured, all against the white card it sits on and with the green-800
   label on top:

     fill                vs white    green-800   green-900
     green-50  #f5fcf9     1.04:1     6.78:1     -          original, invisible
     green-200 #cdf1de     1.22:1     5.79:1     8.18:1
     green-200 #cdf1de     1.22:1     5.79:1     8.18:1     <- now
     green-300 #a3e6c3     1.43:1     4.92:1     6.96:1     previous
     green-400 #6ad89f     1.76:1     4.01:1 NO  5.67:1
     green-500 #35ca7d     2.12:1     3.32:1 NO  4.70:1

   Lightened twice on 2026-09-10, 400 -> 300 -> 200, both times asked for.
   The label stays on --edaat-text-success (green-900), so the pairing has
   gone 5.67 -> 6.96 -> 8.18:1: a lighter fill BUYS label contrast rather
   than costing it, so neither step needed anything else to move.

   green-200 is two steps off the near-invisible green-50 this started as
   (1.04:1). At 1.22:1 the pill is faint but present. One more step down to
   green-100 is 1.09:1, which is where it stops reading as a pill at all.

   The reason the label is on green-900 at all is worth keeping: at
   green-400 the fill put a green-800 label at 4.01:1, under AA, so the
   fill and the label were darkened together in one pass. Darkening a fill
   and darkening its label are ONE decision, not two - green-500 would
   already need green-950 - which is why this pill does not go darker
   than 400 without becoming a solid badge with a white label instead.

   Worth recording what the stroke was doing: at 3.53:1 against white it
   satisfied WCAG 1.4.11, which asks 3:1 of a component whose boundary
   conveys meaning. Nothing in this ramp reaches 3:1 on the fill alone -
   even green-500 is only 2.12:1 - so without the border the badge has no
   3:1 boundary. It is not a failure of 1.4.1 (colour alone), because the
   word "Exported" carries the state and reads at 6.96:1; the pill shape is
   decoration around a label that already says it. */
:root {
  /* A Layer 3 component token, declared here the way this file already
     declares --edaat-offer-card-a, --edaat-step-connector and
     --edaat-tm-card-w. The badge needs a success tint that no Layer 2 role
     carries: bg-success is green-700 (a solid fill for white labels) and
     bg-success-subtle is green-50, the near-invisible one this started as.
     So the tint gets its own knob rather than the component reaching
     straight into the primitive ramp. */
  --edaat-badge-success-bg: var(--edaat-green-200);
}

.edaat-badge--success {
  background-color: var(--edaat-badge-success-bg);
  color: var(--edaat-text-success);
}

/* `Columns` — H gap 24; `Sections` fills, the summary panel is a fixed
   397.3. Below lg they stack and the panel gives up its fixed width. */
/* .edaat-invoice__columns: layout is Bootstrap (d-flex align-items-start gap-4) in the markup — exact equivalents, nothing left to declare here. */
.edaat-invoice__sections {
  flex: 1 1 0;
  min-inline-size: 0;
  gap: var(--edaat-space-10);
}

/* ---- `Collapse/Invoice Section` set 2723:3536 -------------------------
   Section=Bills|Client|Biller x State=Collapsed|Expanded. 823 wide,
   padding 16/16/16/**24**, white, 1px border/subtle, radius 16.
   Collapsed is a fixed 60 = 16 + header 28 + 16; Expanded hugs and adds
   the 24 gap plus its Details block. Header is SPACE_BETWEEN with the
   chevron trailing; Figma swaps arrow-down-01 for arrow-up-01 rather
   than rotating one, exactly as `Collapse/FAQ Item` does.

   Every value here is already on-token: #181818 text/heading,
   #545454 text/secondary, #e7e7e7 border/subtle, #a0a0a0 icon/subtle.

   `Details` is drawn as three `Row` frames of three fixed-261 `Detail`s
   with gap 16 — which sums to 815 inside a 783 row, so Figma overflows
   and clips 32px off the trailing column on every 3-up row. A 3-column
   grid of equal tracks lands each column on 250.33 instead, which fits,
   reflows, and is visually identical: the widest detail content is 180.
   ---------------------------------------------------------------------- */
.edaat-section {
  /* Figma centres its 1px stroke, so the border adds nothing to the frame;
     a CSS border adds 2. Take it back out of the padding so the card lands
     on Figma own 60 collapsed and the header on its own 786.7. */
  padding: calc(var(--edaat-space-16) - 1px) calc(var(--edaat-space-16) - 1px) calc(var(--edaat-space-16) - 1px) calc(var(--edaat-space-24) - 1px);
  background-color: var(--edaat-bg-page);
  border: 1px solid var(--edaat-border-subtle);
  border-radius: var(--edaat-radius-16);
}

.edaat-section__header {
  display: flex;
  gap: var(--edaat-space-10);
  min-block-size: 28px;
  cursor: pointer;
  list-style: none;
  color: var(--edaat-text-heading);
  font-size: var(--edaat-type-body-lg-size);
  line-height: var(--edaat-type-body-lg-line);
}

.edaat-section__header::-webkit-details-marker {
  display: none;
}

.edaat-section__header:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
  border-radius: var(--edaat-radius-4);
}

.edaat-section__title {
  min-inline-size: 0;
}

.edaat-section__chevron {
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  color: var(--edaat-icon-subtle);
}

.edaat-section__chevron svg {
  inline-size: 24px;
  block-size: 24px;
}

.edaat-section__chevron .edaat-section__chevron--down {
  display: block;
}

.edaat-section__chevron .edaat-section__chevron--up {
  display: none;
}

.edaat-section[open] .edaat-section__chevron--down {
  display: none;
}

.edaat-section[open] .edaat-section__chevron--up {
  display: block;
}

/* The details are a Bootstrap `.row`: the 3-up / 2-up / 1-up split is
   `col-12 col-sm-6 col-xl-4` in the markup, so the two bespoke media
   queries that used to redraw `grid-template-columns` are gone and the
   breakpoints are the grid's own. `--wide` is `col-12`, which is what
   `grid-column: 1 / -1` meant. Content widths are unchanged: Bootstrap's
   half-gutter padding on each column plus the row's negative margin
   resolve to the same 245.89 / 209.84 / 303 the grid produced.

   The gutter stays on the Edaat scale rather than Bootstrap's spacers —
   16 across, 20 down — because those are the drawn numbers.

   The 24 gap below the header is a margin so it exists only when open and
   the closed card still lands on 60. It has to net off `--bs-gutter-y`:
   `.row` carries `margin-top: -gutter-y` and every column adds the same
   amount back, so writing a bare 24 here would delete that compensation
   and push the first row of details down by a further 20. */
.edaat-section__details {
  --bs-gutter-x: var(--edaat-space-16);
  --bs-gutter-y: var(--edaat-space-20);
  margin-block-start: calc(var(--edaat-space-24) - var(--bs-gutter-y));
}

.edaat-section__detail {
  gap: var(--edaat-space-16);
  min-inline-size: 0;
}

.edaat-section__icon {
  flex: 0 0 auto;
  display: inline-flex;
  inline-size: 20px;
  block-size: 20px;
}

/* align-items: flex-start is the fix for the stretched status pill.

   This is a flex COLUMN, so its cross axis is the INLINE one, and the
   default align-items: stretch was pulling every child to the full width
   of the column. On the label and the value that is invisible - they are
   left-aligned text that wraps at the available width either way. On the
   badge it is not: the pill ran the whole width of the text block with
   "Exported" at its start and all the slack piled up on the right.

   Safe for the other children: at flex-start they take fit-content, and
   fit-content is capped by the space available, so a long value wraps at
   exactly the width it wrapped at before. Checked - .edaat-section__value
   uses overflow-wrap: anywhere and no text-overflow, so nothing here was
   relying on being stretched to truncate. */
.edaat-section__text {
  gap: 2px;
  min-inline-size: 0;
}

.edaat-section__label {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-secondary);
}

.edaat-section__value {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: var(--edaat-type-body-md-line);
  color: var(--edaat-text-heading);
  overflow-wrap: anywhere;
}

/* ---- Invoice summary panel `Frame 2147224757` ------------------------
   397.3x775 fixed, padding 16/24, gap 24, white, radius 16, and its
   content is CENTRED in the fixed height (749 of content in 775, which
   is why Figma's first child starts at 13 and not at the 16 padding).
   `min-block-size` + centring reproduces that and still grows.
   ---------------------------------------------------------------------- */
.edaat-summary {
  inline-size: 397.3px;
  flex: 0 0 auto;
  min-block-size: 775px;
  gap: var(--edaat-space-24);
  /* Same centred-stroke correction as .edaat-section: Figma centres its 1px
     stroke so it adds nothing to the frame, a CSS border adds 2, so the
     border comes back out of the padding.

     UNIFORM 16, not 16/24. It was 24 across, and that is what made the
     product card 349 wide instead of Figma's 365.3 — every row inside it
     squeezed by 16px. The panel's own arithmetic proves 16:
     1 + 15 + 365.3 + 15 + 1 = 397.3, its drawn width exactly. */
  padding: calc(var(--edaat-space-16) - 1px);
  background-color: var(--edaat-bg-page);
  /* Figma draws #e5e7eb here and #e7e7e7 on the sections beside it. One
     border grey: border/subtle. */
  border: 1px solid var(--edaat-border-subtle);
  border-radius: var(--edaat-radius-16);
}

.edaat-summary__title {
  margin: 0;
  font-size: var(--edaat-type-body-lg-size);
  line-height: 32px;
  font-weight: 500;
  color: var(--edaat-text-brand);
}

/* `Frame 2147224728` — #007db6 at 10%, radius 8, padding 20/32, gap 16. */
.edaat-summary__product {
  gap: var(--edaat-space-16);
  padding: var(--edaat-space-20) var(--edaat-space-32);
  border-radius: var(--edaat-radius-8);
  background-color: rgba(0, 125, 182, 0.1);
}

.edaat-summary__product-head {
  gap: var(--edaat-space-8);
  font-size: var(--edaat-type-body-md-size);
  line-height: 20px;
  color: var(--edaat-text-brand);
}

/* .edaat-summary__line: layout is Bootstrap (d-flex gap-3) in the markup — exact equivalents, nothing left to declare here. */
.edaat-summary__idx,
.edaat-summary__name {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--edaat-text-brand);
}

/* flex: 1 is what actually lets the values reach the right edge.

   .edaat-summary__line is a flex ROW - the index number, then this. With a
   content-based width this column never filled the row, so the spec block
   inside it was only as wide as its own text and the space-between on it
   had NO free space to distribute. The labels and values ended up side by
   side with just their 20 gap, floating in the middle of the panel.

   text-align: end was doing its job the whole time; there was nothing to
   align to. This is why .edaat-summary__total-row already looked right -
   it is a direct child of a flex COLUMN, so it was full width by default.

   basis 0 with min-inline-size: 0 already here, so it takes all the room
   left after the index and can still shrink. */
.edaat-summary__line-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--edaat-space-8);
  min-inline-size: 0;
}

/* Labels left, values flush RIGHT - decided 2026-09-10.

   Two declarations do it, because "align right" needs both: the value
   COLUMN has to reach the panel edge, and the text inside it has to sit
   at that edge. space-between pushes the column over (the 20 gap stays
   the minimum if the panel is ever too narrow to separate them), and
   text-align: end right-aligns the four values against each other -
   without it "1" and "15%" would sit left inside a column as wide as
   "Annual plan".

   This also makes these rows agree with .edaat-summary__total-row
   directly below, which was already label-left / value-right on
   space-between. The two blocks sit in the same panel and were reading
   as two different layouts.

   end, not right: this file is written in logical properties throughout
   (inline-size, padding-inline, inset-inline), and an Arabic Edaat would
   want these values on the left. */
.edaat-summary__spec {
  gap: var(--edaat-space-20);
}

.edaat-summary__spec dl,
.edaat-summary__spec div {
  display: flex;
  flex-direction: column;
  gap: var(--edaat-space-8);
  margin: 0;
}

/* font-weight is stated, not inherited. These labels are drawn 400 in Figma
   (3012:8296) and the UA default happens to agree - but any stylesheet that
   styles bare <dt> takes it away. Bootstrap Reboot sets dt to 700, which
   measured 11.5px wider on this column. */
.edaat-summary__spec dt,
.edaat-summary__spec dd {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--edaat-text-secondary);
}

.edaat-summary__spec dd {
  text-align: end;
} /* was center */
/* .edaat-summary__totals: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
.edaat-summary__total-row {
  gap: var(--edaat-space-8);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--edaat-text-secondary);
}

.edaat-summary__total-row--grand {
  font-weight: 500;
  color: var(--edaat-text-brand);
}

/* `Frame 2147224716` — the amount block. Figma sets "Total Amount (SAR)"
   at 14/**32** inside a 19-tall box, so it is clipped there; body-sm's
   14/20 is the scale value and the one this takes. */
/* .edaat-summary__amount: layout is Bootstrap (d-flex flex-column gap-2) in the markup — exact equivalents, nothing left to declare here. */
/* .edaat-summary__amount-head: layout is Bootstrap (d-flex flex-column gap-1) in the markup — exact equivalents, nothing left to declare here. */
.edaat-summary__amount-label {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
}

.edaat-summary__amount-note {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: 16px;
  color: var(--edaat-text-secondary);
}

.edaat-summary__amount-value {
  margin: 0;
  font-size: var(--edaat-type-heading-lg-size);
  line-height: var(--edaat-type-heading-lg-line);
  color: var(--edaat-text-brand);
}

/* .edaat-summary__pay: layout is Bootstrap (d-flex flex-column gap-3) in the markup — exact equivalents, nothing left to declare here. */
/* .edaat-summary__methods: Bootstrap d-flex flex-column in the markup. */
.edaat-summary__methods-title {
  margin: 0;
  text-align: start; /* Figma left-aligns it on the panel edge; was an override in the responsive layer */
  font-size: 12px;
  line-height: 20px;
  color: var(--edaat-text-primary);
}

.edaat-summary__marks {
  gap: var(--edaat-space-12);
  block-size: 32px;
}

.edaat-summary__marks img {
  display: block;
}

/* .edaat-summary__refs: layout is Bootstrap (d-flex align-items-center gap-1) in the markup — exact equivalents, nothing left to declare here. */
/* .edaat-summary__refs-lines: Bootstrap d-flex flex-column in the markup. */
.edaat-summary__refs-lines span {
  font-size: 12px;
  line-height: 20px;
  color: var(--edaat-text-primary);
}

.edaat-summary__copy {
  inline-size: 24px;
  flex: 0 0 auto;
}

.edaat-summary__copy button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  block-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.edaat-summary__copy button:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: 1px;
}

/* `Frame 2147224761` — MAX on both axes, so the action row and the link
   below it both sit against the trailing edge. */
.edaat-summary__link {
  font-size: var(--edaat-type-body-sm-size);
  line-height: 24px;
  color: var(--edaat-text-link);
  text-decoration: none;
}

.edaat-summary__link:hover {
  color: var(--edaat-text-brand);
}

.edaat-summary__note {
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  color: var(--edaat-text-secondary);
}

/* ---- Invoice Details responsive --------------------------------------
   Three detail columns need ~200 each to hold the widest content (180:
   "Invoice Creation Time" at 144 plus a 20 icon and the 16 gap). At a
   1200 viewport the sections column is 638 wide, giving 202 — so 3-up
   holds to xl and drops to 2-up below it. That split is now carried by
   `col-12 col-sm-6 col-xl-4` on each detail, not by a media query here.
   The two page columns stack at lg, where the panel gives up both its
   fixed width and its 775 floor.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .edaat-invoice__columns {
    flex-direction: column;
  }
  .edaat-invoice__sections {
    inline-size: 100%;
    flex: 0 0 auto;
  }
  .edaat-summary {
    inline-size: 100%;
    min-block-size: 0;
  }
}
@media (max-width: 575.98px) {
  .edaat-invoice {
    padding-block: var(--edaat-space-20) var(--edaat-space-32);
  }
  .edaat-summary {
    padding-inline: var(--edaat-space-16);
  }
  .edaat-summary__product {
    padding-inline: var(--edaat-space-20);
  }
  .edaat-summary__foot .edaat-form-actions {
    flex-wrap: wrap;
  }
}
/* ============================ Legal pages ============================
   Terms and Conditions `3012:8203` and Privacy Policy `3012:8210` are the
   same 1348x1563 frame: hero 0/272 (the plain variant — neither carries an
   eyebrow, which is what keeps this band at 272), Main 272/920, footer
   1192/371.

   `Rectangle 9171` (950x115, a gradient) sits at 282 on both and is
   `visible: false`. Not drawn — the original never shows it.

   `Main` is TRANSPARENT. Only the inner panel is tinted; painting Main is
   the mistake that was made once already on these two screens.

   `Legal panel` is 1000x800 FIXED with `overflowDirection: VERTICAL` — a
   scroll region. That is how a 10,272-tall document (Terms) sits in an 800
   frame, and it is why the page closes on 1563 regardless of its length.
   ---------------------------------------------------------------------- */
.edaat-legal-main {
  display: flex;
  gap: var(--edaat-space-48);
  padding-block: var(--edaat-space-60);
  padding-inline: var(--edaat-gutter);
  overflow: clip;
}

.edaat-legal-panel {
  inline-size: 1000px;
  max-inline-size: 100%;
  block-size: 800px;
  overflow-y: auto;
  overflow-x: clip;
  /* Same styled scrollbar the registration scroll region uses — 8 wide, no
     stepper arrows, a gray-300 thumb inset by its own transparent border.
     The gutter is reserved on every platform and taken back out of the
     trailing padding, so the text keeps Figma own 880 measure and the gap
     to the panel edge stays 60 whether the scrollbar overlays or not. */
  scrollbar-gutter: stable;
  padding-block: var(--edaat-space-40);
  padding-inline: var(--edaat-space-60) calc(var(--edaat-space-60) - 8px);
  border-radius: var(--edaat-radius-20);
  /* Figma: a vertical #007db6 gradient, stops at 5%/10% alpha, on a layer
     at 80% — so 0.04 and 0.08 once folded together. */
  background-image: linear-gradient(180deg, rgba(0, 125, 182, 0.04) 0%, rgba(0, 125, 182, 0.08) 15.865%, rgba(0, 125, 182, 0.08) 34.615%, rgba(0, 125, 182, 0.08) 49.519%, rgba(0, 125, 182, 0.08) 69.712%, rgba(0, 125, 182, 0.08) 82.692%, rgba(0, 125, 182, 0.04) 100%);
}

.edaat-legal-panel:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

/* The document is ONE Figma text node, so its paragraphs are lines rather
   than spaced blocks: margin 0, and the blank lines it actually contains
   are kept as explicit spacers. 16/32 is off the type scale (body-md is
   16/24) but every one of the 85 runs uses it — a legal leading, kept. */
.edaat-legal {
  max-inline-size: 880px;
}

.edaat-legal p,
.edaat-legal h2 {
  margin: 0;
  font-size: var(--edaat-type-body-md-size);
  line-height: 32px;
  color: var(--edaat-text-primary); /* Figma draws #000000 */
}

.edaat-legal h2 {
  font-size: var(--edaat-legal-heading-size, var(--edaat-type-heading-sm-size));
  font-weight: 600;
}

.edaat-legal strong {
  font-weight: 700;
}

.edaat-legal strong.edaat-legal__semi {
  font-weight: 600;
}

.edaat-legal a {
  color: inherit;
  text-decoration: underline;
}

.edaat-legal a:hover {
  color: var(--edaat-text-link);
}

.edaat-legal__spacer {
  block-size: 24px;
}

/* Figma types its section rule as 126 underscores in Extra Light #9da4ae.
   A rule is a rule: an <hr> reproduces it and, unlike a run of
   underscores, does not wrap to three lines on a phone. */
.edaat-legal__rule {
  block-size: 1px;
  margin: 8px 0;
  border: 0;
  /* Stated for the same reason as the <dt> weight in _invoice.scss. This rule
     is drawn solid and the background-color below is the whole of the mark,
     so an inherited opacity would quietly wash it out - Bootstrap Reboot
     fades <hr> to .25. */
  opacity: 1;
  background-color: var(--edaat-text-tertiary);
}

@media (max-width: 1199.98px) {
  .edaat-legal-main {
    padding-block: var(--edaat-space-40);
  }
}
/* Below lg the fixed 800 scroll box would be a scroll trap on a short
   screen, so it becomes a BOUNDED one instead of being released entirely.

   It was released — `block-size: auto` — and that is what made these two
   pages 31 screens tall on a phone. A max keeps the panel a panel while
   leaving a third of the screen around it, which is what the trap was
   really about: with page above and below the box, a reader can always
   scroll past it by touching outside, and scroll chaining carries them on
   when the inner box reaches its end. A fixed height cannot promise that
   on a 640-tall screen; a viewport-relative max can. */
@media (max-width: 991.98px) {
  .edaat-legal-panel {
    block-size: auto;
    max-block-size: 70vh;
    overflow-y: auto;
    padding-block: var(--edaat-space-32);
    padding-inline: var(--edaat-space-32) calc(var(--edaat-space-32) - 8px);
  }
  /* 16/32 is a ratio of 2.0, and it is the other half of the height
     problem — it inflates 24,772 characters by a third before anything
     else is measured. It is right at the drawn 880 measure, where long
     lines need the air: leading should rise WITH line length, not stay
     fixed as the column narrows. At a phone's ~45 characters a line it
     reads as disconnected fragments. 1.6 is the long-form value. */
  .edaat-legal p,
  .edaat-legal h2 {
    line-height: 1.6;
  }
}
@media (max-width: 575.98px) {
  .edaat-legal-main {
    padding-block: var(--edaat-space-24);
  }
  .edaat-legal-panel {
    padding: var(--edaat-space-20);
  }
}
/* ===================== Legal panel heading size =====================
   Was an inline style="" on each of the two legal pages until 2026-09-16.
   The two documents are drawn with different section-heading sizes, so this
   is a per-document modifier rather than one value on the block. The base
   rule already falls back to --edaat-type-heading-sm-size.
   ================================================================== */
.edaat-legal-panel--privacy {
  --edaat-legal-heading-size: 16px;
}

.edaat-legal-panel--terms {
  --edaat-legal-heading-size: 18px;
}

/* ==================================================================
   Print and download — `Frame 2147224869`
   ================================================================ */
/* ---- Legal pages: print and download, `Frame 2147224869` ----
   A 1000-wide row above the panel, right-aligned with a 20 gap, added to the
   Terms frame on 2026-09-09 and mirrored onto Privacy Policy. Each box is
   38x38, radius 4, a 1px #007db6 border and nothing behind it; the glyph is
   28 in the same blue.

   `#007db6` is the info blue this file already uses for the legal panel's own
   gradient, so it takes `--edaat-legal-tool` rather than a new literal.

   They are controls, not decoration, so they are buttons with labels and the
   same focus ring every other control here uses. The 38 box is under the 44
   touch minimum, so below 768 it grows rather than shrinking with the page. */
.edaat-legal-tools {
  /* Figma puts the row at y60 ending y98 and the panel at y114 — a 16 gap.
     `.edaat-legal-main` is a flex column with a 48 gap, which is right
     between its other children, so this row takes the 32 difference back
     rather than the column changing for everyone. */
  margin-block-end: -32px;
  inline-size: 100%;
  max-inline-size: 1000px;
  display: flex;
  gap: var(--edaat-space-20);
}

.edaat-legal-tool {
  /* It is consumed as a 1px border on the print/download controls, so the
     role is border/secondary — aliased, not pinned to the cyan literal. */
  --edaat-legal-tool: var(--edaat-border-secondary);
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--edaat-legal-tool);
  border-radius: var(--edaat-radius-4);
  cursor: pointer;
  /* this class is worn by a <button> (print) AND an <a download> (PDF),
     so the anchor defaults have to be neutralised here */
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease-out;
}

.edaat-legal-tool img {
  display: block;
}

.edaat-legal-tool:hover {
  background-color: rgba(0, 125, 182, 0.08);
}

.edaat-legal-tool:focus-visible {
  outline: var(--edaat-focus-ring-width) solid var(--edaat-border-focus);
  outline-offset: var(--edaat-focus-ring-offset);
}

@media (max-width: 767.98px) {
  /* 44 is the touch minimum; the drawn 38 is a desktop pointer size. */
  .edaat-legal-tool {
    inline-size: 44px;
    block-size: 44px;
  }
  .edaat-legal-tools {
    gap: var(--edaat-space-16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .edaat-legal-tool {
    transition: none;
  }
}
/* The panel and the tools share one column, so the row cannot be wider than
   the panel it sits over. */
.edaat-legal-main > .edaat-legal-tools {
  align-self: center;
}

/* ============================ Scrollbars ============================
   The form's scroll region was showing the platform scrollbar: stepper
   arrows top and bottom, a dark thumb, and the bar sitting hard against
   the fields. Styled here instead.

   The thumb's 2px transparent border plus `background-clip: padding-box`
   is what insets it inside the track, and the container's padding keeps
   the fields clear of the bar. Net content width is unchanged: the
   platform bar took ~15, this takes 8 + 8 of padding.

   Chrome ignores ::-webkit-scrollbar once `scrollbar-width` is set, so
   the standard properties are scoped to engines without the pseudo
   element (Firefox) and Chrome keeps the richer version.              */
.edaat-reg__scroll,
.edaat-select__list,
.edaat-login__wrap,
.edaat-success,
.edaat-legal-panel {
  scroll-behavior: smooth;
}

.edaat-reg__scroll {
  padding-inline-end: var(--edaat-space-8);
}

.edaat-reg__scroll::-webkit-scrollbar,
.edaat-select__list::-webkit-scrollbar,
.edaat-login__wrap::-webkit-scrollbar,
.edaat-success::-webkit-scrollbar,
.edaat-legal-panel::-webkit-scrollbar {
  inline-size: 8px;
  block-size: 8px;
}

/* No stepper arrows at the ends of the track */
.edaat-reg__scroll::-webkit-scrollbar-button,
.edaat-select__list::-webkit-scrollbar-button,
.edaat-login__wrap::-webkit-scrollbar-button,
.edaat-success::-webkit-scrollbar-button,
.edaat-legal-panel::-webkit-scrollbar-button {
  display: none;
  block-size: 0;
  inline-size: 0;
}

.edaat-reg__scroll::-webkit-scrollbar-track,
.edaat-select__list::-webkit-scrollbar-track,
.edaat-login__wrap::-webkit-scrollbar-track,
.edaat-success::-webkit-scrollbar-track,
.edaat-legal-panel::-webkit-scrollbar-track {
  background: transparent;
}

.edaat-reg__scroll::-webkit-scrollbar-thumb,
.edaat-select__list::-webkit-scrollbar-thumb,
.edaat-login__wrap::-webkit-scrollbar-thumb,
.edaat-success::-webkit-scrollbar-thumb,
.edaat-legal-panel::-webkit-scrollbar-thumb {
  background-color: var(--edaat-border-default); /* gray-300 #d5d5d5 — lighter than the platform thumb, still easy to grab */
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--edaat-radius-full);
}

.edaat-reg__scroll::-webkit-scrollbar-thumb:hover,
.edaat-select__list::-webkit-scrollbar-thumb:hover,
.edaat-login__wrap::-webkit-scrollbar-thumb:hover,
.edaat-success::-webkit-scrollbar-thumb:hover,
.edaat-legal-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--edaat-gray-400); /* one step darker on hover */
}

.edaat-reg__scroll::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  .edaat-reg__scroll,
  .edaat-select__list,
  .edaat-login__wrap,
  .edaat-success,
  .edaat-legal-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--edaat-border-default) transparent;
  }
}
/* =============================================================
   ONE-TIME REVEAL — `data-reveal`

   A subtle entrance: the element starts 16 low and transparent and
   settles into place. It runs once and never again — the script
   unobserves after firing, so scrolling away and back cannot replay it.

   The hidden state lives on `.is-armed`, which only the script adds.
   Nothing here hides anything on its own, so a page whose JavaScript
   never runs shows the content in its final state rather than a blank
   space — an enhancement must not be able to delete what it cannot
   promise to bring back. The script releases anything the reader has
   already scrolled past, so nothing can be left armed off-screen
   either. (There WAS a blanket 8s backstop here; it un-hid every
   section below the fold eight seconds after load and defeated the
   whole feature. See js/edaat-reveal.js.)
   ============================================================= */
/* ---------- The two speed knobs (2026-09-10) ----------
   Every scroll reveal on Home is expressed as a MULTIPLE of the numbers
   it was originally built with, so the whole page speeds up or slows
   down from these two values and the rhythm between sections is kept
   exactly as it was tuned.

   Two knobs, not one, because duration and stagger want different
   answers. Each element's own motion wants to be slower - that is the
   part that reads as "graceful", and 700ms-1.05s is where it lands here.
   The GAP between elements wants to grow far less: at the same 1.75x the
   four-step How Edaat Works sequence would run for three and a half
   seconds before its last step arrived, and a reader who has scrolled to
   a section should not be waiting on it.

   Raise --edaat-reveal-dur-scale for slower motion, lower it for
   quicker. 1 restores the original speed exactly.

     .4s  -> .70s      How Edaat Works
     .5s  -> .875s     section headings
     .55s -> .96s      cards
     .6s  -> 1.05s     the generic [data-reveal]

   `prefers-reduced-motion` still turns the whole thing off downstream;
   these only set the pace for readers who have not asked for less. */
:root {
  --edaat-reveal-dur-scale: 1.75;
  --edaat-reveal-delay-scale: 1.35;
}

/* IT RIDES ON `translate`, NOT `transform`, and that is not a style
   preference - it is what lets this rule be safe on ANY element.
   `transform` is one property: an element that already has one (the
   floating navbar is centred with `transform: translateX(-50%)`; a card
   may carry a hover `scale`) would have it OVERWRITTEN by the armed
   state and jump. `translate` is an independent property that COMPOSES
   with `transform` rather than replacing it, so the element keeps
   whatever transform it already had. This started as a special case
   written for the navbar; when the same rule had to cover eleven pages
   of elements nobody has audited, the special case became the rule. */
[data-reveal] {
  transition: opacity calc(0.6s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.6s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* `transition: none` here so ARMING is instant — without it the element
   fades out on its way into the hidden state, which is a wasted animation
   nobody asked for. Releasing still animates: a transition uses the
   after-change value of `transition`, and by then the rule above applies. */
[data-reveal].is-armed {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* The reader has asked for less motion: the script leaves it alone and
   this makes sure no transition is left to run either. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
  }
  [data-reveal].is-armed {
    opacity: 1;
    translate: none;
  }
}
/* ==================================================================
   HOME — the hero entrance
   ================================================================ */
/* =============================================================
   THE HERO ENTRANCE

   The hero is the one block on this page that animates on LOAD rather
   than on scroll - it is already in view, so there is nothing to scroll
   to. It runs through the same observer as everything else; the observer
   simply reports it as intersecting on its first callback.

   It is deliberately QUICKER than the scroll sections. A reader came here
   to read this, and a hero that keeps them waiting is a hero that gets
   scrolled past: base .4s against the .5-.6s used further down, and a 60-
   to-270ms stagger against their 90-to-450. The CTA lands at about a
   second. Both still scale from the page-wide knobs, so the hero cannot
   drift out of step with the rest of the page.

   ORDER IS THE POINT: chrome, then eyebrow, title, body, and the button
   last. The button arriving last is what draws the eye to it.
   ============================================================= */
/* ---- the navbar, on every page ----
   Two differences from the generic rule, and only two. It comes DOWN
   from -10 rather than up from +16, because a bar anchored to the top
   edge should arrive from off that edge; and it is quicker, because it
   is chrome and the reader is waiting for the page behind it.

   It does NOT restate the centring any more. It used to: Home centres
   its pill with `transform: translateX(-50%)` and the generic armed
   rule overwrote it. Now that the generic rule is on `translate` the
   transform is never touched, which is what makes this one declaration
   correct for all three treatments - the centred pill on Home, the
   in-flow pill on the seven hero pages, and the full-width bar on Bill
   Inquiry and Invoice Details. */
.edaat-navbar[data-reveal] {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-navbar[data-reveal].is-armed {
  opacity: 0;
  translate: 0 -10px;
  transition: none;
}

/* ---- the artwork ----
   The photo joins the entrance the copy already runs, and arrives FIRST:
   it is the stage the words land on, so it is in place before the eyebrow
   at 60ms. Same .4s base and the same page-wide scale knobs, so it cannot
   drift out of step with the rest.

   OPACITY ONLY - it does not take the 14px rise the copy takes, and that is
   deliberate twice over:

     - The photo is `position: absolute; inset: 0` with a `cover` background.
       Translating it opens a 14px strip of bare hero-sky along one edge for
       the length of the transition. The copy can rise because it sits inside
       the band with room around it; a full-bleed backdrop has none.
     - `translate` is a separate property from `transform`, which is exactly
       why the generic rule uses it (see _motion-reveal.scss) - but RTL
       mirrors this element with `transform: scaleX(-1)`, so
       anything geometric here has to be reasoned about in both directions.
       Fading has no direction to get wrong.

   `translate: none` cancels the generic [data-reveal] armed state rather
   than inheriting its rise.

   .6s, NOT the copy .4s - the artwork is the SLOWEST thing in the entrance,
   and that is the point. It starts first, at no delay, because it is the
   stage; it must also finish LAST, because a backdrop settles under the text
   rather than racing it.

   The arithmetic, at the shipped scales (dur 1.75, delay 1.35):

     photo   0ms            -> 0 + .8 x1.75      = 1400ms
     eyebrow 60ms  x1.35    -> 81 + .4 x1.75     =  781ms
     title   130ms x1.35    -> 176 + .4 x1.75    =  876ms
     body    200ms x1.35    -> 270 + .4 x1.75    =  970ms
     cta     270ms x1.35    -> 365 + .4 x1.75    = 1065ms

   So the artwork is still settling for ~335ms after the CTA has landed. That
   is deliberate: it is the ambient layer, and the text should be readable
   before the backdrop has finished resolving.

   It shipped at .4s first and that was wrong - undelayed AND the same
   duration as the copy meant it finished at 700ms, a full 365ms before the
   sequence ended. On by far the largest element on screen, finishing early
   read as the photo animating FASTER than the hero it belongs to. Raised
   twice on 2026-09-16, second time asking for slower again; .6s (landing
   with the CTA) was the intermediate step, .8s is what shipped.

   Note the two knobs scale differently, so "finish with the CTA" cannot be
   written as one shared constant - if either scale is retuned, recheck this
   against the table above.

   This fires ONCE, like every other reveal - the observer unobserves on
   release. The 5s slide change is a different mechanism: the whole
   .edaat-home-hero__slide cross-fades over .6s, carrying photo and copy
   together, exactly as it did before. Neither re-arms. */
.edaat-home-hero__photo[data-reveal] {
  transition: opacity calc(0.8s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-home-hero__photo[data-reveal].is-armed {
  opacity: 0;
  translate: none;
  transition: none;
}

/* ---- the copy ---- */
.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__eyebrow,
.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__title,
.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__body,
.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__cta {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__eyebrow {
  transition-delay: calc(60ms * var(--edaat-reveal-delay-scale));
}

.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__title {
  transition-delay: calc(130ms * var(--edaat-reveal-delay-scale));
}

.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__body {
  transition-delay: calc(200ms * var(--edaat-reveal-delay-scale));
}

.edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__cta {
  transition-delay: calc(270ms * var(--edaat-reveal-delay-scale));
}

.edaat-home-hero__copy[data-reveal-seq].is-armed .edaat-home-hero__eyebrow,
.edaat-home-hero__copy[data-reveal-seq].is-armed .edaat-home-hero__title,
.edaat-home-hero__copy[data-reveal-seq].is-armed .edaat-home-hero__body,
.edaat-home-hero__copy[data-reveal-seq].is-armed .edaat-home-hero__cta {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .edaat-navbar[data-reveal],
  .edaat-home-hero__photo[data-reveal],
  .edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__eyebrow,
  .edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__title,
  .edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__body,
  .edaat-home-hero__copy[data-reveal-seq] .edaat-home-hero__cta {
    transition: none;
  }
}
/* ==================================================================
   HOME — How Edaat Works
   ================================================================ */
/* =============================================================
   HOW EDAAT WORKS — the step sequence, `data-reveal-seq`

   One armed class on the section, and every part rides its own
   transition-delay, so the whole thing is declarative: no JS timers to
   drift, nothing to cancel, and the browser owns the easing.

     0     eyebrow  ┐
     80    title    ├ heading: fades in moving DOWN into place
     160   lead     ┘
     380   step 1   ┐
     580   arc 1    │
     760   step 2   │ steps fade in moving UP; between each, the dashed
     960   arc 2    │ connector draws left to right, so it reads as one
     1140  step 3   │ continuous run: step, line, step, line, step…
     1340  arc 3    │
     1520  step 4   ┘   last beat lands at ~1.92s

   The connectors are a raster (`step-connector.png`), so "drawing" is a
   clip-path inset opening left to right. It has to be clip-path and not
   a transform: arc 2 is `scaleY(-1)` and a transform here would wipe the
   flip. Clipping happens before the transform, and the flip is vertical,
   so the reveal still runs left to right on screen.

   Layout, spacing, colour, type and content are untouched — every rule
   below sets only opacity, transform and clip-path.

   As with `data-reveal`: nothing here hides anything on its own. The
   armed state is added by the script, so no script or reduced motion
   both leave the section in its finished state, and a backstop releases
   anything still armed after 8s whatever happens to the listeners. Arming is instant (`transition: none`) so nothing
   animates out on the way in.
   ============================================================= */
.edaat-flow[data-reveal-seq] .edaat-flow__eyebrow,
.edaat-flow[data-reveal-seq] .edaat-flow__title,
.edaat-flow[data-reveal-seq] .edaat-flow__lead,
.edaat-flow[data-reveal-seq] .edaat-flow__step {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* The finished state has to be an explicit inset, not the default
   `none`: clip-path interpolates between two inset() values but jumps
   discretely to `none`, so without this the connectors snapped in
   instead of drawing. */
.edaat-flow[data-reveal-seq] .edaat-flow__arc {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.32s ease-out;
}

.edaat-flow[data-reveal-seq] .edaat-flow__eyebrow {
  transition-delay: 0ms;
}

.edaat-flow[data-reveal-seq] .edaat-flow__title {
  transition-delay: calc(80ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__lead {
  transition-delay: calc(160ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__step:nth-of-type(1) {
  transition-delay: calc(380ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__arc--1 {
  transition-delay: calc(580ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__step:nth-of-type(2) {
  transition-delay: calc(760ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__arc--2 {
  transition-delay: calc(960ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__step:nth-of-type(3) {
  transition-delay: calc(1140ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__arc--3 {
  transition-delay: calc(1340ms * var(--edaat-reveal-delay-scale));
}

.edaat-flow[data-reveal-seq] .edaat-flow__step:nth-of-type(4) {
  transition-delay: calc(1520ms * var(--edaat-reveal-delay-scale));
}

/* Armed: hidden, in place, instantly. The heading sits ABOVE its resting
   position so it travels down into it; the steps sit below so they
   travel up. */
.edaat-flow[data-reveal-seq].is-armed .edaat-flow__eyebrow,
.edaat-flow[data-reveal-seq].is-armed .edaat-flow__title,
.edaat-flow[data-reveal-seq].is-armed .edaat-flow__lead {
  opacity: 0;
  transform: translateY(-10px);
  transition: none;
}

.edaat-flow[data-reveal-seq].is-armed .edaat-flow__step {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

.edaat-flow[data-reveal-seq].is-armed .edaat-flow__arc {
  clip-path: inset(0 100% 0 0);
  transition: none;
}

/* One column: the connector is vertical, so it draws DOWNWARD - the
   left-to-right wipe would make a vertical arrow appear all at once.
   Same specificity as the rule above, so it wins only by sitting after
   it; declaring this next to the mobile arrow itself would lose. */
@media (max-width: 575.98px) {
  .edaat-flow[data-reveal-seq].is-armed .edaat-flow__arc {
    clip-path: inset(0 0 100% 0);
  }
}
/* Two across: arcs 1 and 3 are horizontal and take the wipe above, but the
   2 -> 3 link crosses the row break and is drawn VERTICAL, so it has to draw
   downward like the one-column arrows do. Same specificity as the rule above,
   so it wins by sitting after it. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .edaat-flow[data-reveal-seq].is-armed .edaat-flow__arc--2 {
    clip-path: inset(0 0 100% 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .edaat-flow[data-reveal-seq] .edaat-flow__eyebrow,
  .edaat-flow[data-reveal-seq] .edaat-flow__title,
  .edaat-flow[data-reveal-seq] .edaat-flow__lead,
  .edaat-flow[data-reveal-seq] .edaat-flow__step,
  .edaat-flow[data-reveal-seq] .edaat-flow__arc {
    transition: none;
  }
}
/* ==================================================================
   HOME — The Challenge We Solve
   ================================================================ */
/* =============================================================
   THE CHALLENGE WE SOLVE — the section reveal, `data-reveal-seq`

   The section is 1388 tall against a ~768 viewport, so ONE armed
   section would be wrong: row 2 would play out while still below the
   fold and the reader would arrive to find it already over. Instead
   there are five independent groups, each armed and released on its
   own crossing by the shared script:

     .edaat-offerings__header    the three heading lines
     .edaat-offerings__row  x2   the feature card + the pair beside it
     .edaat-offerings__stack x2  the pair on its own

   The stack is nested INSIDE its row on purpose. Armed means hidden,
   so two groups over the same cards read as AND — a card appears only
   once both have been reached. Side by side on desktop the stack and
   its row share a top edge and release in the same pass, so the row's
   delays alone do the work; stacked below 1200 the stack sits a card's
   height further down the page and releases when the reader actually
   gets to it. One attribute, correct at both widths.

   Timing. 550ms travelling 20px for the cards, 500ms over 16px for the
   lighter heading lines, ease-out, 90ms between siblings — long enough
   to read as a sequence at a slow scroll, short enough that the last
   beat lands ~0.76s after the first rather than trailing behind the
   scroll. The feature card leads its row and the pair follows at 120,
   which is a beat wider than 90 because it crosses the row's 24px
   gutter to the other side of the screen.

   Reading order, not DOM order: row 2 is mirrored, so its pair sits on
   the LEFT and goes first. Below 1200 that row is `column-reverse` and
   reads illustration-first like the other, so the delays swap back.

   As with the two reveals above: nothing here hides anything on its
   own. `.is-armed` is added only by the script, so no script, a missed
   scroll event (the 8s backstop) and reduced motion all leave the
   section in its finished state. Arming is instant so nothing animates
   out on the way in. Only opacity and transform are set — layout,
   spacing, colour and type are untouched.
   ============================================================= */
/* ---- the heading lines ---- */
.edaat-offerings__header[data-reveal-seq] .edaat-offerings__eyebrow,
.edaat-offerings__header[data-reveal-seq] .edaat-offerings__title,
.edaat-offerings__header[data-reveal-seq] .edaat-offerings__lead {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-offerings__header[data-reveal-seq] .edaat-offerings__eyebrow {
  transition-delay: 0ms;
}

.edaat-offerings__header[data-reveal-seq] .edaat-offerings__title {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-offerings__header[data-reveal-seq] .edaat-offerings__lead {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-offerings__header[data-reveal-seq].is-armed .edaat-offerings__eyebrow,
.edaat-offerings__header[data-reveal-seq].is-armed .edaat-offerings__title,
.edaat-offerings__header[data-reveal-seq].is-armed .edaat-offerings__lead {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
}

/* ---- the cards ----
   Declared on the row so one rule covers the feature and both cards;
   the stack contributes an armed state only, never timing. */
.edaat-offerings__row[data-reveal-seq] .edaat-offer-feature,
.edaat-offerings__row[data-reveal-seq] .edaat-offer-card {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* row 1 — feature on the left, so it leads */
.edaat-offerings__row[data-reveal-seq] .edaat-offer-feature {
  transition-delay: 0ms;
}

.edaat-offerings__row[data-reveal-seq] .edaat-offer-card:nth-of-type(1) {
  transition-delay: calc(120ms * var(--edaat-reveal-delay-scale));
}

.edaat-offerings__row[data-reveal-seq] .edaat-offer-card:nth-of-type(2) {
  transition-delay: calc(210ms * var(--edaat-reveal-delay-scale));
}

/* row 2 — mirrored, so the pair on the left leads and the feature lands
   last. Same specificity as the block above; it wins on source order. */
.edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-card:nth-of-type(1) {
  transition-delay: 0ms;
}

.edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-card:nth-of-type(2) {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-feature {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-offerings__row[data-reveal-seq].is-armed .edaat-offer-feature,
.edaat-offerings__row[data-reveal-seq].is-armed .edaat-offer-card,
.edaat-offerings__stack[data-reveal-seq].is-armed .edaat-offer-card {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/* Below 1200 the rows are columns and `--mirrored` is `column-reverse`,
   so BOTH rows read illustration-first (see the layout rule at that
   breakpoint). The mirrored delays would run the group bottom-up. */
@media (max-width: 1199.98px) {
  .edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-feature {
    transition-delay: 0ms;
  }
  .edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-card:nth-of-type(1) {
    transition-delay: calc(120ms * var(--edaat-reveal-delay-scale));
  }
  .edaat-offerings__row--mirrored[data-reveal-seq] .edaat-offer-card:nth-of-type(2) {
    transition-delay: calc(210ms * var(--edaat-reveal-delay-scale));
  }
}
@media (prefers-reduced-motion: reduce) {
  .edaat-offerings__header[data-reveal-seq] .edaat-offerings__eyebrow,
  .edaat-offerings__header[data-reveal-seq] .edaat-offerings__title,
  .edaat-offerings__header[data-reveal-seq] .edaat-offerings__lead,
  .edaat-offerings__row[data-reveal-seq] .edaat-offer-feature,
  .edaat-offerings__row[data-reveal-seq] .edaat-offer-card {
    transition: none;
  }
}
/* ==================================================================
   HOME — the rest of the page
   ================================================================ */
/* =============================================================
   HOME — the rest of the page reveals, `data-reveal-seq`

   Every section below the hero now enters on scroll. Two are
   deliberately excluded:

     .edaat-home-hero   the first screen. Nothing above the fold should
                        need a scroll to become readable, and the slide
                        cross-fade is already an entrance of its own.
     .edaat-flow        How Edaat Works keeps the step/connector
                        sequence built for it — see the block above.

   The same rules as the two sections above hold here. `.is-armed` is
   added only by the script, so no script, a missed scroll event (the 8s
   backstop) and reduced motion all leave the page in its finished
   state; arming is instant so nothing animates out on the way in; and
   only opacity and transform are ever set, so no layout, spacing,
   colour, type or content changes.

   One group per band. None of these is tall enough to need the nested
   pair the Offerings rows use: the two carousels lay their cards out on
   a horizontal rail that never stacks, and the Trust cards wrap but
   stay inside one screen.

   Timing is the page's: 500ms over 16px for heading lines, 550ms over
   20px for cards, ease-out, 90ms between siblings.

   Both carousels scroll natively (`scrollTo` / `scrollLeft`), so a
   transform on a card cannot fight them — and the transform goes on the
   cards, never on the scroll container itself.
   ============================================================= */
/* ---- shared: what a revealed part does ---- */
.edaat-logo-band__group[data-reveal-seq] .edaat-logo-band__label,
.edaat-logo-band__group[data-reveal-seq] .edaat-logo-strip,
.edaat-kf__head[data-reveal-seq] .edaat-kf__eyebrow,
.edaat-kf__head[data-reveal-seq] .edaat-kf__title,
.edaat-trust__head[data-reveal-seq] .edaat-trust__eyebrow,
.edaat-trust__head[data-reveal-seq] .edaat-trust__title,
.edaat-tm__frame[data-reveal-seq] .edaat-tm__eyebrow,
.edaat-tm__frame[data-reveal-seq] .edaat-tm__title,
.edaat-tm__frame[data-reveal-seq] .edaat-tm__lead,
.edaat-tm__frame[data-reveal-seq] .edaat-tm__slider,
.edaat-cta__card[data-reveal-seq] .edaat-cta__title,
.edaat-cta__card[data-reveal-seq] .edaat-cta__lead,
.edaat-cta__card[data-reveal-seq] .edaat-btn {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* The box itself. It travels 24 rather than the copy's 16: a 1248-wide
   card needs more than a text line to read as having moved at all. */
.edaat-cta__card[data-reveal-seq] {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-cta__card[data-reveal-seq].is-armed {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card,
.edaat-trust__stats[data-reveal-seq] .edaat-trust__card,
.edaat-tm__frame[data-reveal-seq] .edaat-tm-card {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, transform calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* `transition` is a shorthand, so the rule above RESETS every transition
   longhand on the card - including the `scale` the hover zoom rides on,
   which would then apply with no animation at all. The script only ever
   removes `.is-armed`; `data-reveal-seq` stays on the element for the life
   of the page, so that rule never stops applying and the hover has to be
   restated here - at its specificity, and after it. */
.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-kf-reveal-delay, 0ms), transform calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-kf-reveal-delay, 0ms), scale var(--edaat-kf-hover-dur) ease-out, box-shadow var(--edaat-kf-hover-dur) ease-out;
}

/* The testimonial card now carries a hover zoom too, so it needs exactly
   the same treatment: the reveal shorthand above would reset the scale
   transition, and its stagger - transition-delay being POSITIONAL - would
   delay the zoom by up to 729ms on the later cards. */
.edaat-tm__frame[data-reveal-seq] .edaat-tm-card {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-tm-reveal-delay, 0ms), transform calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-tm-reveal-delay, 0ms), scale var(--edaat-tm-hover-dur) ease-out, box-shadow var(--edaat-tm-hover-dur) ease-out;
}

/* ---- Clients / Partners — label, then the marquee it labels.
        The transform sits on `.edaat-logo-strip`, the static wrapper;
        `__track` inside it keeps running its own marquee untouched. ---- */
.edaat-logo-band__group[data-reveal-seq] .edaat-logo-band__label {
  transition-delay: 0ms;
}

.edaat-logo-band__group[data-reveal-seq] .edaat-logo-strip {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

/* ---- Key Features ---- */
.edaat-kf__head[data-reveal-seq] .edaat-kf__eyebrow {
  transition-delay: 0ms;
}

.edaat-kf__head[data-reveal-seq] .edaat-kf__title {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

/* Eight cards on one rail, about three of them in view at the drawn
   width. Only those three earn a stagger — the rest are off the right
   edge, so they take a single 270ms and are long finished by the time
   the rail is scrolled to them. Staggering all eight would run the last
   one 630ms late for no one to see. */
/* The stagger sets a VARIABLE, not `transition-delay`. That longhand is
   positional - a single value applies to every property in the transition
   list - so it would have delayed this card's hover zoom along with its
   reveal, by up to 364ms on card four. The variable is spliced into the
   two reveal properties above and left off the two hover ones. */
.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card:nth-of-type(1) {
  --edaat-kf-reveal-delay: 0ms;
}

.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card:nth-of-type(2) {
  --edaat-kf-reveal-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card:nth-of-type(3) {
  --edaat-kf-reveal-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-kf__carousel[data-reveal-seq] .edaat-kf-card:nth-of-type(n+4) {
  --edaat-kf-reveal-delay: calc(270ms * var(--edaat-reveal-delay-scale));
}

/* ---- Trust & Credibility ----
   The stat counters are untouched. Their IntersectionObserver fires on
   geometry, which `opacity` does not change, and the value sits low
   enough inside the card that the card's own 85% crossing comes first —
   so the card arrives and the number rolls up inside it, in that order.
   The figures stay in the markup either way. */
.edaat-trust__head[data-reveal-seq] .edaat-trust__eyebrow {
  transition-delay: 0ms;
}

.edaat-trust__head[data-reveal-seq] .edaat-trust__title {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-trust__stats[data-reveal-seq] .edaat-trust__card:nth-of-type(1) {
  transition-delay: 0ms;
}

.edaat-trust__stats[data-reveal-seq] .edaat-trust__card:nth-of-type(2) {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-trust__stats[data-reveal-seq] .edaat-trust__card:nth-of-type(3) {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

/* ---- Testimonials ----
   ONE group, on `.edaat-tm__frame`, not one per part. The head and the
   rail are both absolutely positioned and the rail sits 50 HIGHER, so as
   separate groups the cards crossed the trigger line first and appeared
   before their own heading. Sharing a frame makes the order a matter of
   delay rather than of geometry: head at 0/90/180, then the cards.

   The wash and the ring are decoration and stay put; moving them would
   drag the clipped bleed the section is built around. */
.edaat-tm__frame[data-reveal-seq] .edaat-tm__eyebrow {
  transition-delay: 0ms;
}

.edaat-tm__frame[data-reveal-seq] .edaat-tm__title {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-tm__frame[data-reveal-seq] .edaat-tm__lead {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-tm__frame[data-reveal-seq] .edaat-tm__slider {
  transition-delay: calc(270ms * var(--edaat-reveal-delay-scale));
}

/* variables, not transition-delay - see the Key Features rail for why */
.edaat-tm__frame[data-reveal-seq] .edaat-tm-card:nth-of-type(1) {
  --edaat-tm-reveal-delay: calc(360ms * var(--edaat-reveal-delay-scale));
}

.edaat-tm__frame[data-reveal-seq] .edaat-tm-card:nth-of-type(2) {
  --edaat-tm-reveal-delay: calc(450ms * var(--edaat-reveal-delay-scale));
}

/* Six cards now, and only the first two are ever on screen at the drawn
   width - the rest take one shared delay rather than staggering out to
   900ms for nobody. Same reasoning as the Key Features rail. */
.edaat-tm__frame[data-reveal-seq] .edaat-tm-card:nth-of-type(n+3) {
  --edaat-tm-reveal-delay: calc(540ms * var(--edaat-reveal-delay-scale));
}

/* ---- Get in touch ----
   The contents stagger and the navy card itself stays where it is: the
   glow and the arcs are clipped by the card's 32 radius, and sliding the
   card would slide that bleed with it. */
.edaat-cta__card[data-reveal-seq] {
  transition-delay: 0ms;
}

.edaat-cta__card[data-reveal-seq] .edaat-cta__title {
  transition-delay: calc(120ms * var(--edaat-reveal-delay-scale));
}

.edaat-cta__card[data-reveal-seq] .edaat-cta__lead {
  transition-delay: calc(210ms * var(--edaat-reveal-delay-scale));
}

.edaat-cta__card[data-reveal-seq] .edaat-btn {
  transition-delay: calc(300ms * var(--edaat-reveal-delay-scale));
}

/* ---- armed ---- */
.edaat-logo-band__group[data-reveal-seq].is-armed .edaat-logo-band__label,
.edaat-logo-band__group[data-reveal-seq].is-armed .edaat-logo-strip,
.edaat-kf__head[data-reveal-seq].is-armed .edaat-kf__eyebrow,
.edaat-kf__head[data-reveal-seq].is-armed .edaat-kf__title,
.edaat-trust__head[data-reveal-seq].is-armed .edaat-trust__eyebrow,
.edaat-trust__head[data-reveal-seq].is-armed .edaat-trust__title,
.edaat-tm__frame[data-reveal-seq].is-armed .edaat-tm__eyebrow,
.edaat-tm__frame[data-reveal-seq].is-armed .edaat-tm__title,
.edaat-tm__frame[data-reveal-seq].is-armed .edaat-tm__lead,
.edaat-tm__frame[data-reveal-seq].is-armed .edaat-tm__slider,
.edaat-cta__card[data-reveal-seq].is-armed .edaat-cta__title,
.edaat-cta__card[data-reveal-seq].is-armed .edaat-cta__lead,
.edaat-cta__card[data-reveal-seq].is-armed .edaat-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
}

.edaat-kf__carousel[data-reveal-seq].is-armed .edaat-kf-card,
.edaat-trust__stats[data-reveal-seq].is-armed .edaat-trust__card,
.edaat-tm__frame[data-reveal-seq].is-armed .edaat-tm-card {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .edaat-logo-band__group[data-reveal-seq] .edaat-logo-band__label,
  .edaat-logo-band__group[data-reveal-seq] .edaat-logo-strip,
  .edaat-kf__head[data-reveal-seq] .edaat-kf__eyebrow,
  .edaat-kf__head[data-reveal-seq] .edaat-kf__title,
  .edaat-kf__carousel[data-reveal-seq] .edaat-kf-card,
  .edaat-trust__head[data-reveal-seq] .edaat-trust__eyebrow,
  .edaat-trust__head[data-reveal-seq] .edaat-trust__title,
  .edaat-trust__stats[data-reveal-seq] .edaat-trust__card,
  .edaat-tm__frame[data-reveal-seq] .edaat-tm__eyebrow,
  .edaat-tm__frame[data-reveal-seq] .edaat-tm__title,
  .edaat-tm__frame[data-reveal-seq] .edaat-tm__lead,
  .edaat-tm__frame[data-reveal-seq] .edaat-tm__slider,
  .edaat-tm__frame[data-reveal-seq] .edaat-tm-card,
  .edaat-cta__card[data-reveal-seq],
  .edaat-cta__card[data-reveal-seq] .edaat-cta__title,
  .edaat-cta__card[data-reveal-seq] .edaat-cta__lead,
  .edaat-cta__card[data-reveal-seq] .edaat-btn {
    transition: none;
  }
}
/* ==================================================================
   THE INNER PAGES
   ================================================================ */
/* =============================================================
   THE INNER PAGES — the same entrance, applied page by page

   Home was given a scroll entrance first; this brings the other ten
   pages onto the same system rather than onto a second one. The engine
   (js/edaat-reveal.js) and the two speed knobs above are shared, so the
   whole site speeds up or slows down from one place and no page can
   drift out of step with another.

   THREE RULES DECIDED WHAT GETS ARMED, and they are worth stating
   because they are what keeps this from becoming decoration:

   1. ARM A GROUP, NOT EVERY BOX. A section is armed and its own parts
      are staggered from here, which is what [data-reveal-seq] means.
      The exceptions are the two long lists — Our Services' ten cards
      and the FAQ's eleven questions — where a single armed container
      would be taller than the screen and its last children would
      animate while nobody could see them. Those carry [data-reveal]
      per item, so each one enters on its own arrival.

   2. NEVER ARM SOMETHING TALLER THAN THE VIEWPORT. Same reason: the
      reveal fires on the container's top edge, so anything below the
      fold at that moment has already finished by the time it is read.

   3. THE PAGE MUST READ WITH THE SCRIPT OFF. Nothing here hides
      anything on its own — .is-armed is only ever added by the script,
      and the script only ever adds it next to an observer that will
      take it off again.

   Distances and durations follow Home: .4s for chrome and anything
   already on screen at load, .5s for headings, .55s for cards and
   forms; 14px of travel for text, 16px for a card.

   Two pages are deliberately NOT here — Client Registration and Biller
   Registration. They are a different surface: a fixed 704-tall panel
   with its own internal scroll box, so a reveal keyed to the DOCUMENT
   scroll would fire everything at load and animate a form the reader is
   about to type into. Motion there is a separate decision.
   ============================================================= */
/* ---- the page hero title block, on seven pages ----
   Already on screen at load, so it is timed like Home's hero rather
   than like a scroll section. Pages with no eyebrow simply match one
   fewer selector. */
.edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__eyebrow,
.edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__title {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__eyebrow {
  transition-delay: calc(60ms * var(--edaat-reveal-delay-scale));
}

.edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__title {
  transition-delay: calc(130ms * var(--edaat-reveal-delay-scale));
}

.edaat-page-hero__container[data-reveal-seq].is-armed .edaat-page-hero__eyebrow,
.edaat-page-hero__container[data-reveal-seq].is-armed .edaat-page-hero__title {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

/* ---- About Edaat: the intro row ----
   Text first, then the photograph. The figure is dropped entirely below
   lg, where the selector simply matches nothing. */
.edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__text,
.edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__figure {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__text {
  transition-delay: 0ms;
}

.edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__figure {
  transition-delay: calc(120ms * var(--edaat-reveal-delay-scale));
}

.edaat-about-intro__row[data-reveal-seq].is-armed .edaat-about-intro__text,
.edaat-about-intro__row[data-reveal-seq].is-armed .edaat-about-intro__figure {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- the shared section header (Our Goals) ---- */
.edaat-section-header[data-reveal-seq] .edaat-section-header__titles,
.edaat-section-header[data-reveal-seq] .edaat-section-header__body {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-section-header[data-reveal-seq] .edaat-section-header__titles {
  transition-delay: 0ms;
}

.edaat-section-header[data-reveal-seq] .edaat-section-header__body {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-section-header[data-reveal-seq].is-armed .edaat-section-header__titles,
.edaat-section-header[data-reveal-seq].is-armed .edaat-section-header__body {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

/* ---- About Edaat: the goals mosaic ----
   Armed a ROW at a time, not as one mosaic. The mosaic is 2 x 2 compact
   cards beside two full-height cards and it is taller than most screens;
   arming the whole thing would play the bottom half to an empty
   viewport. Each row and the tall pair carry their own trigger, so the
   mosaic assembles as the reader comes down it. */
/* THIS RULE OWNS `transition` ON A CARD THAT ALSO HAS A HOVER ZOOM, and
   it outranks the card's own rule, so it has to carry BOTH or the hover
   is silently broken. Two separate traps live here:

   1. `transition` is a shorthand: it RESETS every longhand it does not
      mention. Listing only opacity and translate would leave the hover
      zoom with no transition at all - it would snap.
   2. `transition-delay` IS POSITIONAL. One value applies to EVERY
      property in the list, so the 110ms that staggers the second card
      into view would also delay its hover zoom by 110ms - on a .25s
      hover, most of half a second of lag before anything moved.

   So the stagger moved off `transition-delay` and onto a custom property
   that is spliced into the reveal's two entries ONLY. The hover keeps
   its own timing whatever the stagger is doing. This is the same fix the
   Key Features carousel carries, and it is the same bug both times. */
.edaat-goals__row[data-reveal-seq] .edaat-card-goal,
.edaat-goals__group--tall[data-reveal-seq] .edaat-card-goal {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-goal-reveal-delay, 0ms), translate calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out var(--edaat-goal-reveal-delay, 0ms), scale var(--edaat-card-hover-dur) ease-out, box-shadow var(--edaat-card-hover-dur) ease-out;
}

.edaat-goals__row[data-reveal-seq] .edaat-card-goal:nth-of-type(1),
.edaat-goals__group--tall[data-reveal-seq] .edaat-card-goal:nth-of-type(1) {
  --edaat-goal-reveal-delay: 0ms;
}

.edaat-goals__row[data-reveal-seq] .edaat-card-goal:nth-of-type(2),
.edaat-goals__group--tall[data-reveal-seq] .edaat-card-goal:nth-of-type(2) {
  --edaat-goal-reveal-delay: calc(110ms * var(--edaat-reveal-delay-scale));
}

.edaat-goals__row[data-reveal-seq].is-armed .edaat-card-goal,
.edaat-goals__group--tall[data-reveal-seq].is-armed .edaat-card-goal {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- Our Services: the ten feature cards ----
   Per card, for the reason in rule 1 above: the grid is four rows deep
   at lg and the last of them is a screen and a half below the first.

   The stagger is by COLUMN, so a row arrives across rather than all at
   once. The cycle has to follow the Bootstrap breakpoints the cards
   actually use — col-lg-4 is 3-up, col-md-6 is 2-up, col-12 is one — or
   the delays stop lining up with the rows the reader can see. One-up
   gets no stagger at all: there is nothing to stagger against. */
.edaat-feature-grid__row > [data-reveal]:nth-child(3n+2) {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-feature-grid__row > [data-reveal]:nth-child(3n+3) {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

@media (max-width: 991.98px) {
  .edaat-feature-grid__row > [data-reveal]:nth-child(n) {
    transition-delay: 0ms;
  }
  .edaat-feature-grid__row > [data-reveal]:nth-child(2n) {
    transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
  }
}
@media (max-width: 767.98px) {
  .edaat-feature-grid__row > [data-reveal]:nth-child(n) {
    transition-delay: 0ms;
  }
}
/* ---- FAQ: the eleven questions ----
   Per item, same reason. The delays CYCLE every four rather than
   growing: several short questions cross the trigger line together and
   a cascade reads better than a block, but an eleven-step ramp would
   leave the last one nearly a second and a half late. Cycling means no
   item is ever more than three steps behind the one above it. */
.edaat-faq > [data-reveal]:nth-child(4n+2) {
  transition-delay: calc(70ms * var(--edaat-reveal-delay-scale));
}

.edaat-faq > [data-reveal]:nth-child(4n+3) {
  transition-delay: calc(140ms * var(--edaat-reveal-delay-scale));
}

.edaat-faq > [data-reveal]:nth-child(4n+4) {
  transition-delay: calc(210ms * var(--edaat-reveal-delay-scale));
}

/* ---- Contact Us / Complaint Escalation: the paired cards ---- */
.edaat-contact-channels[data-reveal-seq] .edaat-card,
.edaat-complaint-requirements[data-reveal-seq] .edaat-card {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

/* The stagger counts the COLUMN, not the card. Both grids are Bootstrap
   rows now, so each card is the only <article> inside its own column and
   `:nth-of-type` on the card would match 1 for both — one delay, no
   cascade. `:nth-child` on the column is what Our Services already does. */
.edaat-contact-channels[data-reveal-seq] .row > :nth-child(1) .edaat-card,
.edaat-complaint-requirements[data-reveal-seq] .row > :nth-child(1) .edaat-card {
  transition-delay: 0ms;
}

.edaat-contact-channels[data-reveal-seq] .row > :nth-child(2) .edaat-card,
.edaat-complaint-requirements[data-reveal-seq] .row > :nth-child(2) .edaat-card {
  transition-delay: calc(110ms * var(--edaat-reveal-delay-scale));
}

.edaat-contact-channels[data-reveal-seq].is-armed .edaat-card,
.edaat-complaint-requirements[data-reveal-seq].is-armed .edaat-card {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- the form column, on both form pages ----
   Lead, then the whole field block, then the actions. The FIELDS move as
   one: staggering eighteen inputs would turn a form into a performance,
   and the reader came here to fill it in. */
.edaat-form-column[data-reveal-seq] .edaat-form-column__lead,
.edaat-form-column[data-reveal-seq] .edaat-form-column__fields,
.edaat-form-column[data-reveal-seq] .edaat-form-column__actions {
  transition: opacity calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.55s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-form-column[data-reveal-seq] .edaat-form-column__lead {
  transition-delay: 0ms;
}

.edaat-form-column[data-reveal-seq] .edaat-form-column__fields {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-form-column[data-reveal-seq] .edaat-form-column__actions {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-form-column[data-reveal-seq].is-armed .edaat-form-column__lead,
.edaat-form-column[data-reveal-seq].is-armed .edaat-form-column__fields,
.edaat-form-column[data-reveal-seq].is-armed .edaat-form-column__actions {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- Complaint Escalation: the intro and the assistance strip ---- */
.edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__title,
.edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__body,
.edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__title,
.edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__channels {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__title,
.edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__title {
  transition-delay: 0ms;
}

.edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__body,
.edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__channels {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-complaint-intro[data-reveal-seq].is-armed .edaat-complaint-intro__title,
.edaat-complaint-intro[data-reveal-seq].is-armed .edaat-complaint-intro__body,
.edaat-complaint-assistance[data-reveal-seq].is-armed .edaat-complaint-assistance__title,
.edaat-complaint-assistance[data-reveal-seq].is-armed .edaat-complaint-assistance__channels {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

/* ---- Bill Inquiry: the one card on the page ----
   On screen at load, so it is timed like a hero: the heading, then the
   form under it. */
.edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__header,
.edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__form {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__header {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__form {
  transition-delay: calc(180ms * var(--edaat-reveal-delay-scale));
}

.edaat-inquiry-card[data-reveal-seq].is-armed .edaat-inquiry__header,
.edaat-inquiry-card[data-reveal-seq].is-armed .edaat-inquiry__form {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

/* ---- Invoice Details ----
   The lightest touch on the site. This is a screen somebody opened to
   read a number off, so the heading and the two columns settle in and
   nothing inside them is animated separately. */
.edaat-invoice__heading[data-reveal-seq] .edaat-breadcrumb,
.edaat-invoice__heading[data-reveal-seq] .edaat-invoice__title-row {
  transition: opacity calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.4s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-invoice__heading[data-reveal-seq] .edaat-breadcrumb {
  transition-delay: calc(60ms * var(--edaat-reveal-delay-scale));
}

.edaat-invoice__heading[data-reveal-seq] .edaat-invoice__title-row {
  transition-delay: calc(130ms * var(--edaat-reveal-delay-scale));
}

.edaat-invoice__heading[data-reveal-seq].is-armed .edaat-breadcrumb,
.edaat-invoice__heading[data-reveal-seq].is-armed .edaat-invoice__title-row {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}

.edaat-invoice__columns[data-reveal-seq] .edaat-invoice__sections,
.edaat-invoice__columns[data-reveal-seq] .edaat-summary {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-invoice__columns[data-reveal-seq] .edaat-invoice__sections {
  transition-delay: 0ms;
}

.edaat-invoice__columns[data-reveal-seq] .edaat-summary {
  transition-delay: calc(120ms * var(--edaat-reveal-delay-scale));
}

.edaat-invoice__columns[data-reveal-seq].is-armed .edaat-invoice__sections,
.edaat-invoice__columns[data-reveal-seq].is-armed .edaat-summary {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- Terms and Conditions / Privacy Policy ----
   The tools row, then the panel. The panel is a fixed-height scroll
   region rather than a document that keeps growing, so arming it is
   safe: its height never depends on what is inside it. */
.edaat-legal-main[data-reveal-seq] .edaat-legal-tools,
.edaat-legal-main[data-reveal-seq] .edaat-legal-panel {
  transition: opacity calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out, translate calc(0.5s * var(--edaat-reveal-dur-scale)) ease-out;
}

.edaat-legal-main[data-reveal-seq] .edaat-legal-tools {
  transition-delay: 0ms;
}

.edaat-legal-main[data-reveal-seq] .edaat-legal-panel {
  transition-delay: calc(90ms * var(--edaat-reveal-delay-scale));
}

.edaat-legal-main[data-reveal-seq].is-armed .edaat-legal-tools,
.edaat-legal-main[data-reveal-seq].is-armed .edaat-legal-panel {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* ---- the reader has asked for less motion ----
   The script never arms anything under prefers-reduced-motion, so this
   is belt and braces: it makes sure nothing is left with a transition to
   run if .is-armed ever arrives from somewhere else. */
@media (prefers-reduced-motion: reduce) {
  .edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__eyebrow,
  .edaat-page-hero__container[data-reveal-seq] .edaat-page-hero__title,
  .edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__text,
  .edaat-about-intro__row[data-reveal-seq] .edaat-about-intro__figure,
  .edaat-section-header[data-reveal-seq] .edaat-section-header__titles,
  .edaat-section-header[data-reveal-seq] .edaat-section-header__body,
  .edaat-goals__row[data-reveal-seq] .edaat-card-goal,
  .edaat-goals__group--tall[data-reveal-seq] .edaat-card-goal,
  .edaat-contact-channels[data-reveal-seq] .edaat-card,
  .edaat-complaint-requirements[data-reveal-seq] .edaat-card,
  .edaat-form-column[data-reveal-seq] .edaat-form-column__lead,
  .edaat-form-column[data-reveal-seq] .edaat-form-column__fields,
  .edaat-form-column[data-reveal-seq] .edaat-form-column__actions,
  .edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__title,
  .edaat-complaint-intro[data-reveal-seq] .edaat-complaint-intro__body,
  .edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__title,
  .edaat-complaint-assistance[data-reveal-seq] .edaat-complaint-assistance__channels,
  .edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__header,
  .edaat-inquiry-card[data-reveal-seq] .edaat-inquiry__form,
  .edaat-invoice__heading[data-reveal-seq] .edaat-breadcrumb,
  .edaat-invoice__heading[data-reveal-seq] .edaat-invoice__title-row,
  .edaat-invoice__columns[data-reveal-seq] .edaat-invoice__sections,
  .edaat-invoice__columns[data-reveal-seq] .edaat-summary,
  .edaat-legal-main[data-reveal-seq] .edaat-legal-tools,
  .edaat-legal-main[data-reveal-seq] .edaat-legal-panel {
    transition: none;
  }
}
/* =============================================================
   MOBILE AND TABLET TYPOGRAPHY

   Desktop type is Figma's and is untouched. These are the four things
   that measurement showed were wrong once the page is held in a hand,
   and each is a documented rule rather than a preference.

   1. A FORM FIELD UNDER 16px MAKES iOS ZOOM. WebKit magnifies the page
      when a field smaller than 16px takes focus, which throws the layout
      sideways mid-form and does not zoom back out. Every field was 14.
      Applied to 1024 and below so iPad in landscape is covered too — it
      is the same WebKit.

   2. BODY COPY UNDER 16px. 16 is the accepted floor for prose on a
      phone; several card bodies and the footer blurb were 14, and one
      service card description was 12.

   3. MULTI-LINE COPY UNDER 1.5 LEADING. WCAG 2.1 SC 1.4.12 requires
      text to stay usable when a reader forces 1.5, so shipping below it
      is borrowing against that. Four blocks were between 1.19 and 1.22 —
      tight enough that descenders nearly touch the line beneath.

   4. THE HERO HEADLINE AT 1.02. That is Figma's value for 60px display
      type, where it is right. The size already scales with `clamp()`, so
      on a phone the same 1.02 lands on a 36px headline that WRAPS, and
      wrapped lines at 1.02 collide. Only the leading is changed; the
      clamp is Figma's and stays.

   Everything here is scoped to a width. Nothing above 1024 moves.
   ============================================================= */
/* ---- 1. fields, to 1024 so iPad landscape is included ---- */
@media (max-width: 1024.98px) {
  .edaat-field__control input,
  .edaat-field__control select,
  .edaat-field__control textarea {
    font-size: 16px;
  }
}
@media (max-width: 991.98px) {
  /* ---- 2. body copy to the 16px floor ---- */
  .edaat-kf-card__body,
  .edaat-card__body,
  .edaat-card-feature__desc,
  .edaat-footer__blurb {
    font-size: 16px;
    line-height: 1.5;
  }
  /* ---- 3. leading on copy that actually wraps ----
     Only multi-line blocks. Single-line labels and eyebrows keep their
     tighter setting: 1.5 on a one-line label buys nothing and loosens
     spacing the layout was measured against. */
  .edaat-offerings__lead,
  .edaat-tm__lead,
  .edaat-flow__lead,
  .edaat-flow__step-body,
  .edaat-cta__lead {
    line-height: 1.5;
  }
  /* ---- 4. the hero headline, size untouched ---- */
  .edaat-home-hero__title {
    line-height: 1.15;
  }
  /* ---- small print off the 12px floor ----
     12 is the absolute minimum, not a target. These sit at it, so a
     point of margin costs nothing and reads far better on a phone. */
  .edaat-footer__legal-links a,
  .edaat-footer__legal-links span[aria-current],
  .edaat-footer__licence p,
  .edaat-summary__methods-title {
    font-size: 13px;
  }
  .edaat-summary__note {
    font-size: 13px;
    line-height: 1.45;
  }
}
/* ---- The page title on a phone ----
   Every marketing and legal page shares `.edaat-page-hero__title`, and it
   was 42/48 all the way down to 320 — Figma's desktop size, never reduced.
   At 375 that wraps "Terms and Conditions" onto two lines and spends 96px
   of a 812px screen on the heading alone.

   A clamp rather than a step, the same way the Home hero handles it: 30px
   at 375, rising with the viewport and reaching Figma's 42 at about 576.
   So by the top of this query it is ALREADY 42, and the 768 boundary has
   no jump across it — which a plain `font-size: 30px` here would have
   created.

   The 48px line-height goes with it. Fixed leading is right at one size
   only: on a 30px heading it is a ratio of 1.6, which reads as two
   loosely stacked lines rather than one title. 1.2 is the heading value.

   Desktop is untouched — the clamp cannot exceed the 42 it is capped at,
   and this rule stops at 767.98 regardless. */
@media (max-width: 767.98px) {
  .edaat-page-hero__title {
    font-size: clamp(28px, 5.9vw + 8px, 42px);
    /* 1.15, not 1.2: at the top of the clamp that is 48.3 against the base
       rule 48, so the leading matches across the 768 boundary too. 1.2 left
       a visible 2px step there. */
    line-height: 1.15;
  }
}
/* ---- One gutter on a phone: 20 ----
   The logo, the page content and the footer all have to start on the same
   line. Two rules were breaking it below 420.

   1. `.edaat-navbar--wrap` re-set the gutter to 16 and centred the bar. At
      320 the bar genuinely wraps and centring two rows is fine, but from
      about 350 up it is ONE row — and centring then floats the logo off the
      content edge, which is what the screenshot shows. Left-aligned at the
      page gutter, wrapped or not.
   2. `.edaat-footer-compact--bar` carries its own 20 inline padding, and on
      the auth pages it sits INSIDE a panel that already provides 20 — so the
      footer text started at 40 while the form started at 20. The parent owns
      the gutter here, so the bar gives its own up. */
@media (max-width: 419.98px) {
  .edaat-navbar--wrap {
    justify-content: space-between;
    /* No padding-inline. It used to set 20 and, being later in the file at
       the same specificity, it silently beat the 16 set higher up - so the
       bar sat on a 20 gutter while the page it belongs to sat on 16. Both
       are gone; .edaat-navbar takes --edaat-gutter like everything else. */
  }
}
/* =============================================================
   PRINT — the legal pages (added 2026-09-10)

   There was no print stylesheet at all, and that made the Print button
   on Terms and Privacy a real defect rather than a missing nicety:
   .edaat-legal-panel is block-size 800 with overflow-y auto, so printing
   produced the first 800px of the agreement and stopped. A 22-section
   contract came out as one page of its own opening.

   Releasing the panel is therefore the whole point of this block; the
   rest is what a document should look like on paper. It also fixes the
   downloaded PDF for free, because that PDF is rendered THROUGH these
   rules by Chrome print-to-pdf - so the file and the printout cannot
   drift apart by construction.
   ============================================================= */
@media print {
  @page {
    margin: 18mm 16mm;
  }
  /* NOTHING ARMED REACHES PAPER.

     The legal PDFs are rendered from these very pages by headless
     Chrome, which runs the scripts - so the reveal arms every section
     and then releases only what the observer sees. On paper there is
     no viewport and no scrolling: whatever was below the fold at the
     moment of printing would be armed, and armed means opacity 0.
     Eleven pages of Terms would have printed blank.

     This is why the whole reveal system rides on `translate` and not
     `transform`: one property to put back, and no risk of clearing a
     transform that was doing a layout job. */
  [data-reveal].is-armed,
  [data-reveal-seq].is-armed,
  [data-reveal-seq].is-armed * {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  /* THE fix: the scroll box becomes a document that can paginate. */
  .edaat-legal-panel {
    inline-size: auto;
    max-inline-size: none;
    block-size: auto;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    /* the cyan wash is a screen tint; across 12 sheets it is just ink */
    background-image: none;
  }
  /* Chrome that has no business on paper. The tools row goes too - a
     printed Print button is the clearest possible tell that nobody
     looked at the output. */
  .edaat-navbar,
  .edaat-footer,
  .edaat-legal-tools {
    display: none !important;
  }
  /* The hero keeps its title and loses everything else: it is a flex
     column with 40 of lead-in and a 60-tall container built to sit
     under a floating navbar that is no longer there. */
  .edaat-page-hero {
    padding-block-start: 0;
    overflow: visible;
  }
  /* The two backdrop layers go. ::before is page-hero-bg.png at 20%, and
     that file is 1.8MB - Chrome embeds it in the PDF, which is where
     ~800KB of an 11-page text document was coming from. A photographic
     wash behind a heading is screen decoration; on paper it is toner. */
  .edaat-page-hero::before,
  .edaat-page-hero::after {
    display: none;
  }
  .edaat-page-hero__container {
    padding-block: 0 12mm;
    padding-inline: 0;
  }
  .edaat-legal-main {
    display: block;
    padding: 0;
    gap: 0;
    overflow: visible;
  }
  /* Ink and legibility. The brand navy reads as grey on a mono printer
     and the body is #000 on paper by default anyway. */
  .edaat-page-hero__title {
    color: #000;
    text-align: start;
  }
  .edaat-legal,
  .edaat-legal p,
  .edaat-legal h2 {
    color: #000;
  }
  /* Pagination. A heading stranded at the foot of a sheet with its
     clause overleaf is the classic printed-contract fault. */
  .edaat-legal h2 {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .edaat-legal p {
    orphans: 3;
    widows: 3;
  }
  .edaat-legal__rule {
    break-before: avoid-page;
  }
  /* A hyperlink that cannot be followed is lost on paper, and these two
     point at the live Terms and Privacy documents - worth keeping in a
     contract someone may be reading as a printout. */
  .edaat-legal a[href^=http]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}
/* ==========================================================================
   Edaat — Arabic / RTL drop-in
   --------------------------------------------------------------------------
   Imported LAST, after edaat-components.css. It is hand-authored, not
   generated: everything it holds is a script-level decision rather than a
   token derived from the Figma file.

   It started in neutral-cool.css's slot, between the tokens and the
   components, which is the right place for a pure token override. It is not
   one: it also has to beat component rules, and the Arabic letter-spacing
   reset below is a bare `*` — one class-worth of specificity, which can only
   win on source order. An override layer belongs after the layer it
   overrides.

   THIS FILE IS DELIBERATELY SHORT, AND THAT IS THE POINT.
   edaat-components.css never writes a literal `left` or `right` — every rule
   uses logical properties (padding-inline-start, inset-inline-end,
   border-block-end), so dir="rtl" mirrors the entire layout on its own. What
   lands here is only the residue: the type family, and the few glyphs whose
   meaning is physical direction rather than reading order.

   If this file starts growing, something upstream has stopped using logical
   properties. Fix it there, not here.
   ========================================================================== */
/* ---------- The Arabic type family ----------
   Inter has no Arabic glyphs, so without this every Arabic string falls back
   to whatever the OS offers and the page stops looking like Edaat.

   The swap is keyed on lang, not on dir: direction is a layout property and
   script is a type property, and they are not the same question.

   NOT CHANGED HERE: the type ramp itself. Arabic leading is an open decision
   (AUDIT Decision 9) and is a project decision, so Arabic renders on the Latin
   metrics for now. Arabic ascenders and descenders are deeper than Inter's,
   so this is the thing most likely to want revisiting once it is seen at
   size — the ramp is the place to do it, not here. */
:root[lang=ar] {
  --edaat-font-body: var(--edaat-font-arabic);
  --edaat-font-heading: var(--edaat-font-arabic);
}

/* ---------- Directional glyphs ----------
   Three rotations exist in the component sheet. Only two of them mean
   "forward".

   KEPT AS-IS, because they point DOWN and down is down in both directions:
     .edaat-icon16 img            the -90.72deg dropdown chevron (§6: Figma
                                  exports the rotated vector unrotated, so the
                                  angle lives in the wrapper)
     .edaat-select__button …      the 180deg open-state flip

   MIRRORED, because they point ALONG the reading direction: */
[dir=rtl] .edaat-tm__arrow img,
[dir=rtl] .edaat-cta__arrow img {
  transform: rotate(90deg);
}

/* The carousel arrows nudge toward the direction they travel on hover, so the
   nudge has to mirror with them or "next" leans backwards. */
[dir=rtl] .edaat-tm__arrow[data-carousel-prev]:hover:not([disabled]) {
  transform: translateX(3px);
}

[dir=rtl] .edaat-tm__arrow[data-carousel-next]:hover:not([disabled]) {
  transform: translateX(-3px);
}

/* ---------- Horizontal centring ----------
   The one place where "use logical properties and RTL is free" genuinely
   runs out, because CSS has no logical translate. There is no
   `translate-inline`: translateX, and the X component of `translate`, are
   physical by definition in every direction.

   The idiom used throughout the component sheet is

       inset-inline-start: 50%;          <- logical, mirrors on its own
       transform: translateX(-50%);      <- physical, does NOT

   Under dir="rtl" the logical half resolves to `right: 50%`, putting the
   element's RIGHT edge on the centre line; pulling a further -50% then
   throws it off the left of the screen. MEASURED before this rule: the Home
   navbar pill sat at left:-315 in a 375 viewport, with 20px on screen.

   Only the sign changes. Each block mirrors the media context of the rule
   it corrects, so it can never apply at a width where the original does
   not. There are exactly five such pairs in the sheet and all five are
   here — the marquee keyframes are excluded deliberately, being a
   continuous decorative loop with no reading direction. */
/* Only above lg. Below it the bar is full-bleed and pinned to both edges,
   so there is no centring transform left to mirror — and this rule would
   otherwise re-apply one and shove the bar sideways. */
@media (min-width: 992px) {
  [dir=rtl] .edaat-home-hero__chrome > .edaat-navbar--floating {
    transform: translateX(50%);
  }
}
@media (min-width: 1440px) {
  [dir=rtl] .edaat-home-hero__band,
  [dir=rtl] .edaat-home-hero__chrome {
    transform: translateX(50%);
  }
}
@media (max-width: 575.98px) {
  /* the stacked flow connectors — `translate` rather than `transform`, but
     the X component is just as physical */
  [dir=rtl] .edaat-flow__arc::before,
  [dir=rtl] .edaat-flow__arc::after {
    translate: 50% 0;
  }
}
/* ---------- Numbers stay left-to-right ----------
   Arabic runs right-to-left; NUMBERS DO NOT. Western digits read
   left-to-right in Arabic text exactly as they do in English, so a figure
   must never be mirrored.

   The trust counters are the one place that could not survive on bidi alone.
   Each digit is its own flex item — Figma's masked reel, one 45px window per
   digit — and a flex row reverses under dir="rtl" like any other row. So
   1-0-0-0 laid out as 0-0-0-1 and the card read "+0001" instead of "1000+".
   Bidi never reversed anything: the boxes did.

   direction:ltr on the row puts the items back in source order. The value is
   isolated so restoring LTR inside it cannot leak into the Arabic label
   sitting beside it. */
[dir=rtl] .edaat-trust__value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- The Home flow connectors ----------
   Four steps joined by three dashed arcs with a solid arrowhead. The arcs
   are background images on empty spans, so `dir` does not touch them: the
   cards mirrored into right-to-left order while every arrowhead went on
   pointing right, i.e. backwards along the flow.

   scaleX(-1) turns each arc around. arc--2 already carries scaleY(-1) (it is
   the same asset flipped to curve the other way) and a transform REPLACES
   rather than composes, so its flip has to be restated alongside the mirror
   or it is silently dropped.

   Scoped to 1320-up because that is the only range where the arcs exist —
   below it they are display:none, and below 576 the layout swaps to vertical
   ::before/::after connectors that point DOWN and must not be touched. */
@media (min-width: 1320px) {
  [dir=rtl] .edaat-flow__arc {
    transform: scaleX(-1);
  }
  [dir=rtl] .edaat-flow__arc--2 {
    transform: scaleX(-1) scaleY(-1);
  }
  /* THE WIPE NEEDS NO CORRECTION HERE, AND ADDING ONE BREAKS IT.
     The reveal draws each arc on by animating clip-path from
     inset(0 100% 0 0) to inset(0 0 0 0) - a wipe that grows from the
     element's own left edge. inset() does take physical edges, which is why
     it looks like it needs flipping under RTL. It does not, because THE ARC
     IS ALREADY MIRRORED by the scaleX(-1) above, and clip-path is resolved
     in the element's local box BEFORE the transform is applied. So the clip
     is mirrored along with everything else: a wipe that grows from the local
     left edge arrives on screen growing from the RIGHT, which is the
     direction Arabic reads and the direction the flow runs.

     An override of inset(0 0 0 100%) here corrects it a SECOND time and
     lands back where it started: measured in isolation at 70% progress, the
     mirrored arc with the base clip has its tail drawn and its arrowhead
     still missing, while the same arc with the override has the arrowhead
     drawn first and the tail missing - the arrow growing backwards along its
     own flow. Found 2026-09-15, and this is why it survived the first
     pass: the rule reads as obviously correct and is obviously wrong.

     The general form, worth keeping: a clip-path on a transformed element is
     in PRE-TRANSFORM coordinates. Mirror the element and the clip mirrors
     with it - do not mirror both. */
}
/* ---------- Tablet connectors: the wipe has to change sides ----------
   Between 576 and 1319 the connectors are NOT the mirrored arc image - they
   are the CSS dashed line and head, built from logical properties, so the
   mark itself already points the way Arabic reads with no correction here.
   The reveal is the one part that cannot be logical: clip-path takes physical
   edges, and unlike the 1320-up arc there is no scaleX(-1) to carry it. The
   base wipe collapses to the LEFT edge and grows rightward, which in Arabic
   draws the arrow backwards along its own flow. Send it to the other edge.

   Scoped away from arc--2 below 992, where that connector crosses the row
   break and is drawn VERTICAL: it draws downward in both directions, exactly
   as the one-column arrows do. */
@media (min-width: 576px) and (max-width: 1319.98px) {
  [dir=rtl] .edaat-flow[data-reveal-seq].is-armed .edaat-flow__arc {
    clip-path: inset(0 0 0 100%);
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  [dir=rtl] .edaat-flow[data-reveal-seq].is-armed .edaat-flow__arc--2 {
    clip-path: inset(0 0 100% 0);
  }
}
/* ---------- Arabic never takes negative tracking ----------
   The Latin ramp is tightened throughout — 28 negative `letter-spacing`
   declarations, from -0.24px on a card title to -1.2px on a display heading.
   That is correct for Inter and WRONG FOR ARABIC IN EVERY CASE. Arabic is a
   cursive script: the letters are meant to join, and pulling them together
   crowds the joins and the diacritics instead of tightening a line the way it
   does in Latin. There is no Arabic equivalent of tight tracking; the correct
   value is always `normal`.

   This is why `edaat-rtl.css` is imported AFTER `edaat-components.css` rather
   than in `neutral-cool.css`'s slot: a bare `*` is one class-worth of
   specificity, so it can only beat the single-class rules below it by source
   order. Two rules in the sheet are two classes deep and are named explicitly
   — they are the only ones, and the reset is otherwise complete. */
[dir=rtl] *,
[dir=rtl] *::before,
[dir=rtl] *::after {
  letter-spacing: normal;
}

[dir=rtl] .edaat-offer-feature--a .edaat-offer-feature__title,
[dir=rtl] .edaat-offer-feature--b .edaat-offer-feature__title {
  letter-spacing: normal;
}

/* ---------- Arrows that mean "forward" ----------
   `dir` mirrors boxes, never glyphs. Everything here points along the reading
   direction and so has to be turned round; everything NOT here points down,
   and down is down in both directions.

   `.edaat-icon16 img` is the one the reader notices — the chevron on every
   Sign in pill, 21 of them across the site. The asset is a down-chevron and
   the wrapper rotates it -90.72° to point forward (§6: Figma exports rotated
   vectors unrotated, so the angle lives in CSS). Mirroring it is the same
   move in the other direction. */
[dir=rtl] .edaat-icon16 img {
  transform: rotate(90.72deg);
}

/* The Key Features carousel uses two DIFFERENT assets, a left and a right
   round-arrow, so there is no angle to flip — the pair has to be mirrored
   bodily, which also swaps which button reads as "back". */
[dir=rtl] .edaat-kf__arrow img {
  transform: scaleX(-1);
}

/* The wizard's Back and Next arrows. Drawn as inline path data — a shaft with
   a head on one end — so there is nothing to rotate; the whole glyph mirrors.
   All six uses of .edaat-btn__icon in the build are this pair, which is why
   the rule can sit on the wrapper rather than on a modifier. Without it Back
   pointed the way forward and Next pointed the way back: not merely
   unmirrored, but actively saying the wrong thing. */
[dir=rtl] .edaat-btn__icon {
  transform: scaleX(-1);
}

/* client-registration.html draws its Sign in chevron as inline path data
   rather than using the shared .edaat-icon16 wrapper — that page is an older
   copy of the chrome. Tagged in the markup so the mirror is a class and not a
   structural selector that breaks the next time the page is touched. */
[dir=rtl] .edaat-icon-forward {
  transform: scaleX(-1);
}

/* ---------- Get in touch: the arc pattern ----------
   The arcs are a 456 window (`.edaat-cta__arcs`, `inset-inline-end: 0`) cut
   into a 1583-wide drawing (`cta-arcs.svg`) offset `inset-inline-start:
   -273.78px`. Both of those are logical, so under RTL they each mirrored ON
   THEIR OWN — and the result was wrong twice over:

     - the window moved to the card's left edge (right), but the ARTWORK is an
       <img> and `dir` never touches a picture, so the curves still swept the
       way they sweep in English: away from the card instead of into it;
     - the crop offset mirrored too, so the window landed on a DIFFERENT slice
       of the drawing (measured: the image sat -853.6 from the window's near
       edge instead of -273.8), not on the mirror of the English slice.

   So the fix is not one flip, it is "lay the inside out exactly as English,
   then mirror the whole window". The offset is restated on the opposite
   logical edge — under RTL `inset-inline-end` IS the physical left, which is
   where English puts it — and `scaleX(-1)` on the window mirrors window and
   artwork together. That is the same rule §7 records for clip-path: mirror
   the element OR what is inside it, never both. */
[dir=rtl] .edaat-cta__arcs {
  transform: scaleX(-1);
}

[dir=rtl] .edaat-cta__arcs img {
  inset-inline-start: auto;
  inset-inline-end: -273.78px; /* = the English physical left offset */
}

/* ---------- Button labels are a step down in Arabic ----------
   Tajawal sets heavier and taller than Inter at the same nominal size — no 600
   weight, so semibold resolves to 700, and Naskh proportions carry more ink
   per character. A 16px Arabic label in a 40px pill reads as crowding the box
   where the Latin one sits comfortably.

   Set to the body-sm step (14/20) — an existing rung on the ramp, not a new
   size, and the step the navbar pills already sit on in both languages. 12 was
   tried and read too small for a primary action.

   If this is ever taken to 12, use body-xs and NOT caption: both are 12px, but
   caption's line-height is 16 and Arabic needs MORE vertical room than Latin,
   not less — Naskh descenders drop further and the diacritics sit high.

   Box heights are untouched: this changes the label, not the control.

   It DOES reach the navbar pills, which already declare 14px of their own two
   classes deep. That ties this rule on specificity, and this sheet loads last,
   so source order settles it — harmlessly here, since both say 14. That is the
   same ordering the letter-spacing reset depends on; if this file is ever
   moved back above edaat-components.css, the reset stops working. */
[dir=rtl] .edaat-btn {
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
}

/* ---------- Home hero: the art mirrors, and the copy follows it ----------
   SETTLED 2026-09-16. In Arabic the photo is on the LEFT and the copy on the
   RIGHT, and the reversed-Latin problem that made this flip three times is
   GONE — fixed in the artwork, exactly as this note always said it had to be.

   The dashboard was rewritten in Figma so every row label is a grey
   placeholder pill instead of a word: no "Healthcare services", no "Monthly",
   no "Export", no "Teams". `assets/images/home/hero-band.png` was recaptured
   from that (1440x804, via the clone-capture-delete method) on
   2026-09-16. With no words in the raster there is nothing for
   `scaleX(-1)` to reverse, so the mirror is now free.

   Residue, known and accepted: the chart still carries numerals — the
   2,000/1,500/1,000/500/0 axis, and 1,280 / 88.74% / 2,165 / 92.16% in the
   table — and those DO still mirror. They are small and unlabelled. If they
   ever matter, the fix is the same one that fixed the words: take them out of
   the artwork in Figma and recapture. Do not add a CSS counter-flip; §7
   already records why a second transform cannot un-reverse part of a raster.

   TWO CONSTRAINTS AT ONCE, and that is what makes it hard: in Arabic the
   photo belongs on the left AND the dashboard's letters have to stay
   readable. Mirroring satisfies the first and breaks the second; not
   mirroring does the reverse. Several CSS arrangements were tried and each
   traded one fault for the other. The fix was to take the words out of the
   artwork in Figma and recapture it, after which both hold at once.

   WHY CSS COULD NEVER HAVE DELIVERED BOTH, kept so nobody retries it. `hero-band.png` is 1440x804 and the dashboard is
   composited hard against its RIGHT edge, reaching x 1439 of 1440. Whichever
   screen edge that cut sits against is the only edge it can hide behind:

     mirrored    cut goes to the LEFT screen edge, hidden -> letters reversed
     unmirrored  cut stays at the RIGHT screen edge, hidden -> photo on the right
     composited  flip the field, paste the mock-up back unflipped, and the
                 paste's own right-hand boundary IS that cut, now facing the
                 middle of the page: a sliced chart in open space.

   There is no fourth arrangement of those pixels. Every CSS attempt was
   trading one fault for the other. The artwork was always the only fix.

   SCOPED TO THE ONE PLACE THE PHOTOGRAPH STILL CARRIES THE MOCK-UP, which
   since 2026-09-20 is 1280-up in landscape. Everywhere below that the
   photograph is the FIELD only: _home-hero.scss widens it to 183.908% and
   anchors it to the image leading edge so the mock-up is cropped away, and
   the shot is either its own unmirrored element beside the copy (992-1279)
   or not drawn at all (below 992, and portrait at any width). Mirroring an
   abstract field buys nothing, and the second rule is not optional: the
   mirror flips the widened box about its own centre, which would swing the
   clipped-away end back on screen and put the dashboard into the crop. At
   exactly 1/1 both queries match, so the undo is written last. */
@media (min-width: 1280px) and (min-aspect-ratio: 1/1) {
  [dir=rtl] .edaat-home-hero__photo {
    transform: scaleX(-1);
  }
}
@media (max-width: 1279.98px), (max-aspect-ratio: 1/1) {
  [dir=rtl] .edaat-home-hero__photo {
    transform: none;
  }
  /* AND THE CROP KEEPS ITS PHYSICAL SIDE. _home-hero.scss widens the field
     to 183.908% and lets it hang off the inline-end edge, which is correct
     in English and backwards here: the 783 columns it keeps are chosen in
     the IMAGE coordinates that background-position names, so the box has to
     hang off the physical right in Arabic too or the visible window becomes
     the far end of the artwork - the dashboard - instead of the field. This
     is the direction-scoped half of one decision; the core states the other
     half logically because the core may not write a physical edge. */
  [dir=rtl] .edaat-home-hero__photo {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}
/* ---------- The logo marquee must not run out ----------
   The belt is a flex track several cycles wide, animated one cycle so the loop
   is seamless. Under RTL the track is laid out from the right, so it overflows
   to the LEFT — MEASURED: 5094px of track in a 1351px strip, all of it hanging
   off the left edge. The existing animation then drags it further left, away
   from its own content, and the strip empties out from the right.

   The travel has to reverse with the layout. `transform` is physical, so this
   is a second keyframe set rather than a sign flip: keyframes are global, and
   a `[dir]` selector cannot reach inside one. */
@keyframes edaat-marquee-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--edaat-marquee-cycle) * 1px));
  }
}
[dir=rtl] .edaat-logo-strip__track {
  animation-name: edaat-marquee-rtl;
}

/* ---------- First-paint guard: MOVED, 2026-09-21 ----------
   It now lives in base/_base.scss, i.e. in the SHARED core, and the reason is
   the whole bug it was failing to prevent. A guard that ships only in
   main.rtl.css cannot cover the window in which main.rtl.css has not loaded —
   and that window is exactly when the body is bare. See the note beside it. */
/* ---------- Date picker ----------
   The month steppers are inline SVG chevrons drawn pointing inline-start and
   inline-end. `dir` mirrors boxes, never glyphs (see the note at the top of
   this file), so under RTL "previous" would still point left. Flip the glyph;
   the buttons themselves have already swapped position with the flex row.

   The day cells and the converted-date readout are NOT flipped: both are
   digits, and digits read left-to-right in Arabic too. They carry
   `direction: ltr; unicode-bidi: isolate` in _datepicker.scss for that. */
[dir=rtl] .edaat-datepicker__nav svg {
  transform: scaleX(-1);
}

/* ---- Bootstrap's RTL .modal inset ----
   bootstrap.rtl.min.css mirrors `.modal { left: 0 }` into `right: 0`, while
   the cherry-picked modal compiled into this sheet still carries the LTR
   `left: 0` (modules/_bootstrap.scss compiles from source, with no RTL pass).
   A fixed, 100%-wide overlay is positioned by left+width either way, so the
   box is identical - but the computed value is not, and this system states
   what it means. inset-inline-start resolves to `right` under RTL, which is
   exactly the edge to hand back. */
[dir=rtl] .edaat-modal {
  inset-inline-start: auto;
}

/* ---------- The 992-1279 mock-up: mirrored, exactly as 1280-up is ----------
   The shot is a window on to hero-band.png, and the artwork is composited
   hard against its own RIGHT edge - a cut through the dashboard. _home-hero
   .scss puts the box flush to the inline-end edge so that cut meets the
   glass, which it does in English, where inline-end is the physical right.
   Here inline-end is the physical LEFT while the cut is still on the image
   right, so without this the sliced edge faces the middle of the page and
   the dashboard is visibly truncated mid-row. Found 2026-09-20.

   scaleX(-1) sends the cut back to the glass, and it is the same answer the
   photograph itself already takes above 1280 - so the two sides of that step
   now agree. The reversed Latin it brings is the cost already accepted
   there, and the artwork was recaptured without the dashboard words for it.

   THE RADIUS MOVES WITH THE ARTWORK, NOT WITH THE DIRECTION - AND SINCE
   2026-09-23 IT NEEDS NOTHING STATED HERE. It used to be a border-radius on
   the element box, which resolves to the wrong side under RTL AND is then
   moved again by the mirror, so the two compounded rather than cancelled and
   the other pair had to be restated outright. The radius now lives in the
   mask (see the --edaat-mask-layers note in pages/_home-hero.scss, which had
   to move there so it could land on slide 1's dashboard at all). Mask and
   image mirror together under this scaleX, so the rounding, the trim and the
   slide 1 rectangles all stay on the features they were measured against,
   with one declaration instead of five.

   No media query: the pseudo-element only exists between 992 and 1279 -
   everywhere else _home-hero.scss sets content: none - so this cannot reach
   a box that is not there, and it cannot drift out of step with that gate. */
[dir=rtl] .edaat-home-hero__band::after {
  transform: scaleX(-1);
}