/* Logincident theme bundle, built 2026-11-09 by apply_speed_9nov.py.
   Generated file: do not edit. Edit the source stylesheets; PHP stops using this bundle
   automatically when any source is newer, until it is rebuilt. */
/* source: self-hosted fonts (Google Fonts CSS, URLs rewritten) */
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/jetbrains-mono-normal-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: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-italic-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: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/logincident/assets/fonts/noto-sans-normal-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;
}

/* source: assets/css/styles.css */
/* =========================================================
   Logincident — Design System
   Dark navy base · purple gradient · teal + orange accents
   ========================================================= */

/* Noto Sans JP was removed from this import on 9 September 2026. It is needed only by the
   Japanese demo on /clara/, which is 43 characters on one page out of 91, and its subset
   declarations were most of a 90KB stylesheet that every visitor downloaded. It is now
   loaded for that single page by licon_favicons() in functions.php. If Japanese content
   is added elsewhere, put the family back here rather than adding a second import. */

:root {
  /* Surfaces */
  --bg:            #05060d;
  --bg-2:          #080a14;
  --surface:       #0f1120;
  --surface-2:     #141627;
  --surface-3:     #1a1d31;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* Brand — official Logincident palette */
  --teal:          #25b59a;   /* primary brand */
  --teal-2:        #45d3b6;   /* lighter teal */
  --teal-deep:     #12715f;   /* deep teal */
  --amber:         #f3a51e;   /* brand amber */
  --red:           #e24a2d;   /* brand red-orange */
  --green:         #25b59a;
  /* legacy aliases (kept so existing rules resolve to brand colours) */
  --purple:        var(--teal);
  --purple-2:      var(--teal-2);
  --purple-deep:   var(--teal-deep);
  --orange:        var(--amber);
  --orange-2:      var(--red);

  /* Text */
  --text:          #f4f5fb;
  --text-2:        #a6abc4;
  --text-3:        #6c7390;

  /* Effects */
  --grad-purple:   linear-gradient(135deg, #25b59a 0%, #1b9e86 100%);
  --grad-mesh:     radial-gradient(60% 50% at 50% -10%, rgba(37,181,154,0.26) 0%, rgba(37,181,154,0) 70%);
  --radius:        20px;
  --radius-sm:     12px;
  --radius-lg:     28px;
  --shadow:        0 20px 60px -20px rgba(0,0,0,0.7);
  --ring:          0 0 0 1px rgba(37,181,154,0.4), 0 0 40px -8px rgba(37,181,154,0.5);
  --maxw:          1200px;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.section-pad { padding: 46px 0; }
.center { text-align: center; }
.muted { color: var(--text-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.eyebrow.accent { color: var(--purple-2); border-color: rgba(37,181,154,0.35); }

.section-head { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); margin: 18px 0 16px; }
.section-head p { color: var(--text-2); font-size: 17px; }

.grad-text {
  background: linear-gradient(120deg, #fff 25%, var(--teal-2) 60%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Noto Sans', sans-serif; font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.25s var(--ease); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* GLOBAL: focus-visible state for the two master button components — promoted here from a
   hero-scoped rule so every button using .btn-primary/.btn-ghost anywhere on the site gets
   identical keyboard-focus behaviour, not just instances inside the hero. */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,181,154,0.3); }
.btn-primary {
  background: var(--grad-purple); color: #fff;
  box-shadow: 0 8px 30px -8px rgba(37,181,154,0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(37,181,154,0.8); }
.btn-ghost { background: rgba(255,255,255,0.04); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--purple); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Header: profile icon (replaces the old "Sign in" text button) ---------- */
.nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  color: var(--text); background: transparent; border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.nav-icon-btn svg { width: 19px; height: 19px; }
.nav-icon-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--border-strong); }
.nav-icon-btn:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(37,181,154,0.28); }
[data-theme="light"] .nav-icon-btn:hover { background: rgba(12,18,34,0.05); }

/* ---------- Header: Contact CTA — gradient-outline pill (header-only, does not touch .btn-primary) ---------- */
.btn-header-contact {
  position: relative; isolation: isolate;
  background: transparent; color: #fff; border: none; border-radius: 999px; box-shadow: none;
}
.btn-header-contact::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background: linear-gradient(90deg, #25B59A 0%, #F3A51E 51%, #E24A2D 100%);
}
.btn-header-contact::after {
  content: ''; position: absolute; inset: 1.5px; border-radius: 999px; z-index: -1;
  background: var(--bg-2); transition: background 0.2s;
}
.btn-header-contact:hover::after { background: var(--surface); }
.btn-header-contact:hover { transform: none; box-shadow: 0 10px 28px -12px rgba(37,181,154,0.5); }
.btn-header-contact:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,181,154,0.3); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(5,6,13,0.72);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 86px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand .logo-mark { width: 28px; height: 28px; }
.brand-logo { height: 42px; width: auto; display: block; }
.site-header .brand-logo { height: 42px !important; width: auto; }
.footer-brand .brand-logo { height: 42px; }
/* keep links clean: override WordPress global-styles which re-adds link underlines */
:root a { text-decoration: none; }
:root a:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  padding: 9px 14px; border-radius: 9px; transition: all 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Dropdown / mega menus ---------- */
.nav-links .has-menu { position: relative; }
.nav-links .has-menu > a { display: inline-flex; align-items: center; gap: 5px; }
.caret { width: 13px; height: 13px; opacity: 0.65; transition: transform 0.22s var(--ease); }
.has-menu:hover > a .caret, .has-menu:focus-within > a .caret { transform: rotate(180deg); }
.menu {
  position: absolute; top: 100%; left: 0; padding-top: 12px;       /* transparent hover bridge */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; z-index: 120;
}
.menu.menu--right { left: auto; right: 0; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.menu-inner {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 10px; box-shadow: var(--shadow);
  display: grid; gap: 2px; min-width: 264px;
}
.menu-inner.menu-mega { grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px; min-width: 540px; }
.nav-links .menu-item { display: block; padding: 9px 12px; border-radius: 10px; background: none; transition: background 0.15s; }
.nav-links .menu-item:hover { background: rgba(255,255,255,0.05); }
.menu-item .mi-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.menu-item .mi-desc { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; line-height: 1.4; }
.menu-group h6 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); padding: 6px 12px 6px; margin: 0; font-weight: 700; }

@media (max-width: 940px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 16px 24px 24px;
    transform: translateY(-130%); transition: transform 0.35s var(--ease); z-index: 90;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 14px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .nav-icon-btn { display: none; }

  /* dropdowns become inline accordion-style groups on mobile */
  .nav-links .has-menu { display: block; }
  .caret { display: none; }
  .nav-links .menu {
    position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0;
  }
  .nav-links .menu-inner,
  .nav-links .menu-inner.menu-mega {
    grid-template-columns: 1fr; min-width: 0; gap: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 12px;
  }
  .nav-links .menu-item { padding: 10px 14px; }
  .menu-item .mi-desc { display: none; }
  .menu-group h6 { padding: 10px 12px 4px; }
}

/* ---------- Hero ---------- */
.hero { padding: 84px 0 60px; text-align: center; overflow: hidden; }
.hero-trust { margin-top: 30px; font-size: 13.5px; color: var(--text-3); letter-spacing: 0.01em; }
.badge-beta { display:inline-block; margin-left:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); background:rgba(37,181,154,.12); border:1px solid rgba(37,181,154,.35); padding:2px 8px; border-radius:999px; vertical-align:middle; }
.hero::before {
  content: ''; position: absolute; inset: 0; background: var(--grad-mesh); pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; left: 50%; top: -200px; width: 900px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(243,165,30,0.10), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(38px, 6vw, 66px); margin: 26px 0 22px; }
.hero h1 .headline-light { font-weight: 300; }
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-2); max-width: 720px; margin: 0 auto 34px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* .btn now uses border-radius:999px (true pill) globally as its base value — no longer needs a separate hero-scoped override */
/* .btn:focus-visible now defined globally in the Buttons section above — no longer needs a separate hero-scoped rule */
.hero-stats { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: 64px; }
.hero-stats .stat strong { display: block; font-family: 'Noto Sans'; font-size: 34px; color: #fff; }
.hero-stats .stat span { font-size: 14px; color: var(--text-3); }

/* Reusable gradient-outline eyebrow/badge component — the single standard eyebrow treatment.
   "Reporting & Intelligence Platform" (hero) is the master reference for these exact dimensions.
   Selector is deliberately .eyebrow.hero-badge (matching specificity of .eyebrow.accent, and now
   also beating section-scoped rules like .section-head p) so this reliably wins the cascade
   regardless of what section/heading context wraps it. Typography is pinned explicitly here
   rather than inherited from base .eyebrow, so no other page-specific "p" rule can ever resize
   it again. Do not add a third, different eyebrow treatment — extend this one. */
.eyebrow.hero-badge {
  position: relative; isolation: isolate; color: #fff; border-color: transparent; background: transparent;
  padding: 12px 22px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.6;
}
.eyebrow.hero-badge::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background: linear-gradient(90deg, #4C445C 0%, #141119 100%);
}
.eyebrow.hero-badge::after {
  content: ''; position: absolute; inset: 1.5px; border-radius: 999px; z-index: -1;
  background: var(--bg-2);
}

/* Trusted-by area moved out of .hero into its own full-width section — see .trust-strip below */

/* Hero dashboard mock */
.hero-visual {
  margin: 40px auto 0; max-width: 880px; position: relative; z-index: 2;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow); overflow: hidden;
}
.hero-visual .bar { display: flex; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.hero-visual .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.hero-visual .bar i:nth-child(1){ background:#ff5f57;} .hero-visual .bar i:nth-child(2){ background:#febc2e;} .hero-visual .bar i:nth-child(3){ background:#28c840;}
.hero-visual .shot img { display: block; width: 100%; height: auto; }
.hero-visual .screen { padding: 26px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media(max-width:720px){ .hero-visual .screen{ grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card.highlight { border-color: rgba(243,165,30,0.55); box-shadow: 0 0 40px -14px rgba(243,165,30,0.4); }
.card .icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(37,181,154,0.12); border: 1px solid rgba(37,181,154,0.25); color: var(--purple-2);
}
.card.highlight .icon { background: rgba(243,165,30,0.12); border-color: rgba(243,165,30,0.3); color: var(--orange); }
.card .icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 15px; }
.card .tag { font-size: 12px; color: var(--purple-2); font-weight: 600; letter-spacing: 0.04em; }
.card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--teal); font-weight: 600; font-size: 14.5px; }
.card-link svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.card:hover .card-link svg { transform: translateX(4px); }
.card.highlight .card-link { color: var(--orange); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px){ .grid-4 { grid-template-columns: repeat(2,1fr);} }  /* grid-3 stays 3-col through tablet so 3-item rows don't orphan */
@media (max-width: 600px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Feature list (orange checks) ---------- */
.checks { list-style: none; display: grid; gap: 13px; margin: 22px 0; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text); }
.checks li::before {
  content: ''; flex: 0 0 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  background: rgba(243,165,30,0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}

/* ---------- Browser window mockup (dashboards) ---------- */
.browser-wrap { position: relative; perspective: 2200px; }
.browser-wrap::before {
  content: ''; position: absolute; inset: 2% 4% -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,181,154,0.22), transparent 72%); filter: blur(34px);
}
.browser {
  position: relative; z-index: 1; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--surface);
  box-shadow: 0 50px 90px -32px rgba(0,0,0,0.88), 0 0 0 1px rgba(255,255,255,0.04);
  transform: rotateY(-9deg) rotateX(3deg); transform-origin: center; transition: transform 0.6s var(--ease);
}
.browser-wrap:hover .browser { transform: rotateY(-3deg) rotateX(1deg); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #0c0e16; border-bottom: 1px solid var(--border); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.browser-bar i:nth-child(1){ background:#ff5f57; } .browser-bar i:nth-child(2){ background:#febc2e; } .browser-bar i:nth-child(3){ background:#28c840; }
.browser-url { margin-left: 10px; flex: 1; max-width: 300px; height: 24px; border-radius: 7px; background: rgba(255,255,255,0.05); display: flex; align-items: center; gap: 7px; padding: 0 11px; font-size: 11.5px; color: var(--text-3); }
.browser-url svg { width: 12px; height: 12px; color: var(--teal); }
.browser img { display: block; width: 100%; }
@media (max-width: 860px){ .browser { transform: none; } }

/* laptop + app combo */
.laptop-combo { position: relative; padding-bottom: 30px; }
.laptop { position: relative; filter: drop-shadow(0 44px 60px rgba(0,0,0,0.6)); }
/* screen lid: square bottom so it meets the base flush (no corner gap) */
.laptop-lid {
  position: relative; background: #1b1e28; border-radius: 16px 16px 0 0; padding: 11px 11px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.laptop-lid::before {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #2a2e39; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}
.laptop-screen { border-radius: 5px; overflow: hidden; background: #05060d; border: 1px solid rgba(0,0,0,0.6); }
.laptop-screen img { display: block; width: 100%; }
/* base: slightly wider than lid, attached flush, with hinge + trackpad notch */
.laptop-deck {
  position: relative; width: 114%; margin-left: -7%; height: 16px;
  background: linear-gradient(180deg, #2b2f39 0%, #1a1d25 45%, #0e1015 100%);
  border-radius: 0 0 14px 14px;
}
.laptop-deck::before {
  content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; background: rgba(255,255,255,0.07);
}
.laptop-deck::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15%; height: 5px; border-radius: 0 0 7px 7px; background: rgba(0,0,0,0.45);
}
.laptop-phones { position: absolute; left: auto; right: -34px; bottom: -26px; transform: none; width: 320px; height: 270px; z-index: 5; }
.laptop-phones .device { position: absolute; bottom: 0; --dw: 158px; filter: drop-shadow(0 24px 34px rgba(0,0,0,0.7)); }
.laptop-phones .device::before { display: none; }
.laptop-phones .device--back  { left: 0;  transform: rotate(-8deg) translateY(10px) scale(0.92); filter: brightness(0.8) drop-shadow(0 18px 26px rgba(0,0,0,0.6)); z-index: 1; }
.laptop-phones .device--front { right: 0; transform: rotate(4deg); z-index: 2; }
@media (max-width: 600px){
  .laptop-phones { right: -10px; bottom: -16px; width: 230px; height: 200px; }
  .laptop-phones .device { --dw: 116px; }
}

/* dashboard + app combo */
.combo { position: relative; }
.combo .combo-phone { position: absolute; right: -4%; bottom: -7%; z-index: 4; }
.combo .combo-phone .device { --dw: 134px; transform: rotateY(-10deg) rotateX(2deg); box-shadow: 0 38px 60px -18px rgba(0,0,0,0.95); }
.combo .combo-phone .device::before { display: none; }
@media (max-width: 600px){
  .combo .combo-phone .device { --dw: 100px; }
  .combo .combo-phone { right: -2%; bottom: -5%; }
}

/* ---------- Phone device mockups ---------- */
.device {
  --dw: 246px;          /* device width — bezel, radius & buttons all scale from this */
  position: relative; width: var(--dw); padding: calc(var(--dw) * 0.034); border-radius: calc(var(--dw) * 0.165);
  background: linear-gradient(150deg, #3c3f4a 0%, #15171f 24%, #0a0c12 58%, #20242f 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), inset 0 0 0 2px rgba(0,0,0,0.55),
              0 2px 5px rgba(0,0,0,0.5), 0 55px 80px -28px rgba(0,0,0,0.9);
}
.device img {
  display: block; width: 100%; aspect-ratio: 119 / 250; object-fit: cover; object-position: top center;
  border-radius: calc(var(--dw) * 0.133); background: #05060d;
}
/* glass sheen */
.device::after {
  content: ''; position: absolute; inset: calc(var(--dw) * 0.034); border-radius: calc(var(--dw) * 0.133); pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 16%, rgba(255,255,255,0) 36%);
}
/* power button (right) + volume (left), scaled to device */
.device::before {
  content: ''; position: absolute; right: calc(var(--dw) * -0.006); top: 25%; width: calc(var(--dw) * 0.014); height: 11%;
  border-radius: 2px; background: #23262f;
  box-shadow: calc(var(--dw) * -1.012) calc(var(--dw) * -0.05) 0 0 #23262f,
              calc(var(--dw) * -1.012) calc(var(--dw) * 0.11) 0 0 #23262f;
}

/* angled, staggered stack */
.device-stack { position: relative; perspective: 2000px; display: flex; align-items: center; justify-content: center; min-height: 600px; }
.device-stack .device { position: absolute; transition: transform 0.6s var(--ease); }
.device--back  { transform: rotateY(-26deg) rotateX(6deg) translate3d(-62px, -30px, -50px) scale(0.93); z-index: 1; filter: brightness(0.82) saturate(0.96); }
.device--front { transform: rotateY(-26deg) rotateX(6deg) translate3d(74px, 34px, 30px); z-index: 2; }
.device-stack::before {
  content: ''; position: absolute; inset: 6% 8%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,181,154,0.28), transparent 72%); filter: blur(36px);
}
.device-stack:hover .device--back  { transform: rotateY(-20deg) rotateX(5deg) translate3d(-92px, -32px, -34px) scale(0.94); }
.device-stack:hover .device--front { transform: rotateY(-20deg) rotateX(5deg) translate3d(98px, 36px, 44px); }

/* single angled device */
.device-solo { perspective: 2000px; display: flex; justify-content: center; position: relative; }
.device-solo::before {
  content: ''; position: absolute; inset: 4% 10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,181,154,0.26), transparent 72%); filter: blur(34px);
}
.device-solo .device { position: relative; z-index: 1; --dw: 270px; transform: rotateY(-22deg) rotateX(6deg) rotateZ(1deg); transition: transform 0.6s var(--ease); }
.device-solo:hover .device { transform: rotateY(-12deg) rotateX(3deg); }

@media (max-width: 860px){
  .device-stack { min-height: 520px; }
  .device-stack .device { --dw: 200px; }
  .device::before { display: none; }
  .device--back  { transform: rotateY(-22deg) translate3d(-48px,-24px,-40px) scale(0.93); }
  .device--front { transform: rotateY(-22deg) translate3d(58px,28px,24px); }
}
@media (max-width: 520px){
  .device-stack .device { --dw: 168px; }
  .device-solo .device { --dw: 220px; }
}

/* ---------- Showcase (split) ---------- */
.showcase {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px;
}
.showcase.reverse { grid-template-columns: 1.15fr 1fr; }
.showcase.reverse .showcase-text { order: 2; }
@media (max-width: 860px){ .showcase, .showcase.reverse { grid-template-columns: 1fr; } .showcase.reverse .showcase-text{order:0;} }
.showcase-text h2,.showcase-text h3 { font-size: clamp(24px,3vw,32px); margin-bottom: 14px; }
.showcase-text p { color: var(--text-2); }

/* ---------- Dashboard mock widgets ---------- */
.panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.panel .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel .head h3,.panel .head h4 { font-size: 14px; font-weight: 600; }
.panel .head span { font-size: 12px; color: var(--text-3); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.bars span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #1f6f63, #134039); }
.bars span.hot { background: linear-gradient(180deg, var(--teal), #15756a); box-shadow: 0 0 18px -2px rgba(37,181,154,0.6); }
.kpi { display: flex; gap: 18px; flex-wrap: wrap; }
.kpi .k { flex: 1; min-width: 90px; }
.kpi .k strong { font-family:'Noto Sans'; font-size: 26px; display:block; }
.kpi .k span { font-size: 12px; color: var(--text-3); }
.donut {
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--teal) 0 38%, var(--red) 38% 60%, var(--amber) 60% 84%, var(--surface-3) 84% 100%);
  -webkit-mask: radial-gradient(circle 30px at center, transparent 98%, #000 100%);
          mask: radial-gradient(circle 30px at center, transparent 98%, #000 100%);
}

/* ---------- Testimonials ---------- */
.quote {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px;
}
.quote p { font-size: 15.5px; color: var(--text); margin-bottom: 22px; }
.quote .who { display: flex; align-items: center; gap: 13px; }
.quote .who .av {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
  display: grid; place-items: center; font-weight: 700; color: #fff; font-family: 'Noto Sans';
}
.quote .who strong { display: block; font-size: 15px; }
.quote .who span { font-size: 13px; color: var(--purple-2); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; text-align: center; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--teal-deep), #0a221d 55%, var(--bg-2));
  border: 1px solid rgba(37,181,154,0.32); padding: 70px 30px;
}
.cta-band::before { content:''; position:absolute; inset:0; background: var(--grad-mesh); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(28px,4vw,40px); margin-bottom: 14px; }
.cta-band p { color: var(--text-2); max-width: 520px; margin: 0 auto 28px; }
[data-theme="light"] .cta-band {
  background: linear-gradient(135deg, #12715f, #0c3a32 60%, #07251f);
  border-color: rgba(37, 181, 154, 0.4);
}
[data-theme="light"] .cta-band h2 { color: #fff; }
[data-theme="light"] .cta-band p { color: rgba(255, 255, 255, 0.82); }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding: 80px 0 50px; text-align: center; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background: var(--grad-mesh); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(34px,5vw,56px); margin: 20px 0 16px; }
.page-hero p { color: var(--text-2); font-size: 18px; max-width: 600px; margin: 0 auto; }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--border); margin-top: 40px; overflow: hidden; background: var(--bg-2); }
.footer-glow { position:absolute; left:-5%; top:-40%; width: 420px; height: 380px; background: radial-gradient(closest-side, rgba(37,181,154,0.25), transparent); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 64px 0 48px; position: relative; }
@media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--text-2); font-size: 14px; margin: 16px 0 20px; max-width: 260px; }
.footer-col h5 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14.5px; color: var(--text-2); padding: 6px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-2); transition: all 0.2s; }
.socials a:hover { color:#fff; border-color: var(--purple); background: rgba(37,181,154,0.15); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-3); font-size: 13px; position: relative; }
.footer-watermark { font-family:'Noto Sans'; font-weight:700; font-size: clamp(60px, 16vw, 200px); line-height: 0.8; text-align: center; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); -webkit-background-clip: text; background-clip: text; padding: 0 0 10px; user-select: none; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Misc ---------- */
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.pill { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: rgba(255,255,255,0.02); }
.logo-mark { color: var(--purple-2); }
.divider { height:1px; background: var(--border); margin: 0; border:0; }

/* =========================================================
   Light mode
   ========================================================= */
[data-theme="light"] {
  --bg:            #f3f5fa;
  --bg-2:          #e9edf6;
  --surface:       #ffffff;
  --surface-2:     #f6f8fc;
  --surface-3:     #eef1f8;
  --border:        rgba(12, 18, 34, 0.10);
  --border-strong: rgba(12, 18, 34, 0.16);
  --text:          #0e1320;
  --text-2:        #46506a;
  --text-3:        #707a93;
  --shadow:        0 22px 50px -24px rgba(20, 30, 60, 0.30);
}
[data-theme="light"] .site-header { background: rgba(243, 245, 250, 0.82); }
[data-theme="light"] .eyebrow,
[data-theme="light"] .pill { background: rgba(12, 18, 34, 0.03); }
[data-theme="light"] .btn-ghost { background: rgba(12, 18, 34, 0.04); }
[data-theme="light"] .btn-ghost:hover { background: rgba(12, 18, 34, 0.07); }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active,
[data-theme="light"] .nav-links .menu-item:hover { background: rgba(12, 18, 34, 0.06); }
[data-theme="light"] .socials a { background: rgba(12, 18, 34, 0.04); }
[data-theme="light"] .browser-bar { background: #e8ecf5; }
[data-theme="light"] .footer-watermark {
  background: linear-gradient(180deg, rgba(12,18,34,0.07), transparent);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .grad-text {
  background: linear-gradient(120deg, #0e1320 18%, var(--teal) 62%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* keep the CTA band a dark teal panel (with light text) in both modes */

/* ---------- Theme toggle slider ---------- */
.theme-toggle {
  position: relative; width: 52px; height: 28px; flex: 0 0 52px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.05);
  cursor: pointer; padding: 0; transition: border-color 0.2s;
}
.theme-toggle:hover { border-color: var(--teal); }
.theme-toggle .tt-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); display: flex; align-items: center; justify-content: center;
  transition: transform 0.28s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.theme-toggle .tt-thumb svg { width: 12px; height: 12px; color: #fff; }
.tt-sun { display: none; }
[data-theme="light"] .theme-toggle { background: rgba(12, 18, 34, 0.05); }
[data-theme="light"] .theme-toggle .tt-thumb { transform: translateX(24px); }
[data-theme="light"] .tt-sun { display: block; }
[data-theme="light"] .tt-moon { display: none; }

/* ============ AUTH (sign in / sign up) ============ */
.auth-main{min-height:calc(100vh - 86px);display:flex;align-items:center;justify-content:center;padding:64px 20px}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.auth-card h1{font-size:26px;margin:0 0 6px;letter-spacing:-.02em}
.auth-sub{color:var(--text-2);font-size:15px;margin:0 0 26px;line-height:1.5}
.auth-field{margin-bottom:18px}
.auth-field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--text)}
.auth-field input,.auth-select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:15px;font-family:inherit}
.auth-field input:focus,.auth-select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(37,181,154,.22)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:13.5px}
.auth-row a{color:var(--teal);font-weight:600}
.auth-checkbox{display:flex;align-items:center;gap:8px;color:var(--text-2);font-weight:500}
.auth-checkbox input{width:auto}
.auth-card .btn{width:100%;justify-content:center}
.auth-alt{text-align:center;margin-top:22px;color:var(--text-2);font-size:14px}
.auth-alt a{color:var(--teal);font-weight:600}

/* ============ PRICING (sign up tiers) ============ */
.pricing-main{padding:80px 0 90px}
.pricing-head{text-align:center;max-width:680px;margin:0 auto 50px}
.pricing-head h1{font-size:40px;margin:0 0 14px;letter-spacing:-.02em}
.pricing-head p{color:var(--text-2);font-size:18px;line-height:1.6}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px}
.tier.featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 30px 70px rgba(37,181,154,.16);position:relative}
.tier-badge{position:absolute;top:-13px;left:32px;background:var(--teal);color:#04130f;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;letter-spacing:.02em}
.tier h2{font-size:21px;margin:0 0 6px}
.tier .tier-desc{color:var(--text-2);font-size:14px;line-height:1.5;min-height:42px;margin:0 0 18px}
.tier .price{font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tier .price span{font-size:15px;font-weight:500;color:var(--text-2)}
.tier .price-sub{color:var(--text-2);font-size:13px;margin:8px 0 22px}
.tier .btn{width:100%;justify-content:center;margin-bottom:26px}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tier li{display:flex;gap:10px;font-size:14px;color:var(--text);align-items:flex-start;line-height:1.45}
.tier li svg{flex:0 0 18px;width:18px;height:18px;color:var(--teal);margin-top:1px}
.tier-bands{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);color:var(--text-2);font-size:12.5px;line-height:1.5}
.pricing-note{text-align:center;color:var(--text-2);font-size:13.5px;max-width:760px;margin:36px auto 0;line-height:1.6}
.pricing-main .auth-main{min-height:0;padding-top:80px}

/* ============ CLIENT LOGO STRIP ============ */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:42px}
.client-logo{height:30px;width:auto;opacity:.82;transition:opacity .2s ease,filter .2s ease}
.client-logo:hover{opacity:1}
/* Finning ships black: whiten on dark; opacity-only on hover so it stays visible */
.client-logo--invert{filter:brightness(0) invert(1);opacity:.78}
.client-logo--invert:hover{opacity:1}
/* Light theme: white/whitened logos must darken so they stay visible on the light strip */
[data-theme="light"] .client-logo--white{filter:brightness(0);opacity:.72}
[data-theme="light"] .client-logo--white:hover{opacity:.95}
[data-theme="light"] .client-logo--invert{filter:brightness(0);opacity:.72}
[data-theme="light"] .client-logo--invert:hover{opacity:1}
@media(max-width:620px){.logo-row{gap:26px}.client-logo{height:24px}}

/* ============ ABOUT PAGE (editorial) ============ */
.lead-italic{font-family:'Noto Sans',system-ui,sans-serif;font-style:italic;font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:var(--text-2);max-width:640px;margin:0 auto}
.story-head{text-align:center;max-width:720px;margin:0 auto}
.story-head h3{margin-top:12px;font-size:clamp(24px,3vw,34px)}
.story-body{max-width:720px;margin:26px auto 0}
.prose p{margin-bottom:16px;color:var(--text-2);font-size:16.5px;line-height:1.7}
.prose p:last-child{margin-bottom:0}
.pull-quote{font-family:'Noto Sans',system-ui,sans-serif;font-style:italic;font-weight:400;font-size:clamp(26px,3.6vw,38px);line-height:1.3;color:var(--teal-2);text-align:center;max-width:860px;margin:46px auto;border:0;padding:0}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px;position:relative}
.milestones::before{content:'';position:absolute;top:7px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--teal),var(--amber));opacity:.35}
.ms{position:relative;text-align:center;padding-top:28px}
.ms-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--surface-3);border:2px solid var(--teal)}
.ms-next .ms-dot{background:var(--amber);border-color:var(--amber)}
.ms h5{font-family:'Noto Sans',sans-serif;font-size:15px;margin-bottom:6px;color:var(--text)}
.ms p{font-size:13px;color:var(--text-3);line-height:1.45;margin:0}
@media(max-width:640px){.milestones{grid-template-columns:1fr 1fr;gap:28px}.milestones::before{display:none}}
.stats-band{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:46px 0}
.stats-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:28px;text-align:center}
.stats-row .stat strong{display:block;font-family:'Noto Sans',sans-serif;font-size:clamp(30px,4vw,42px);color:#fff;line-height:1}
.stats-row .stat span{font-size:14px;color:var(--text-3)}
.leaders{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.leader{flex:0 1 360px;background:#f5f1ea;color:#1a1d2e;border-radius:20px;padding:30px 30px 32px;box-shadow:var(--shadow)}
@media(max-width:920px){ .leader{ flex-basis:300px; } }  /* tablet: pair leadership cards (2 + centered 1) instead of one narrow column */
.leader-initials{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;font-family:'Noto Sans',sans-serif;font-weight:700;font-size:22px;color:#fff;margin-bottom:18px}
.leader h3{color:#10131f;font-size:20px;margin:0 0 2px}
.leader-role{color:var(--teal-deep);font-weight:600;font-size:14px;margin:0 0 14px}
.leader p{color:#3a3f52;font-size:14.5px;line-height:1.6;margin:0}
.contact-h{font-size:28px;margin-top:16px}

/* ============ PRODUCT PAGES (Signal) ============ */
.badge-beta{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:none;letter-spacing:0}
.step-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--teal);font-weight:600;display:block;margin-bottom:10px}
.prod-lead{max-width:640px;margin:0 auto}

/* security stat tiles */
.tile-val{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--teal);font-weight:600;font-size:13px;margin:6px 0 10px}

/* ============ SOLUTIONS (Signal visual kit) ============ */
/* geometric brand motif */
.motif{position:absolute;width:150px;height:116px;pointer-events:none;z-index:0;opacity:.85}
.motif i{position:absolute;border-radius:3px}
.motif i:nth-child(1){left:0;top:6px;width:52px;height:52px;background:var(--teal)}
.motif i:nth-child(2){left:38px;top:38px;width:38px;height:38px;background:var(--amber)}
.motif i:nth-child(3){left:82px;top:0;width:28px;height:62px;background:var(--red)}
.motif i:nth-child(4){left:70px;top:68px;width:44px;height:30px;background:#0a0c1a;border:1px solid var(--border-strong)}
.motif.tr{top:18px;right:22px}
.motif.bl{bottom:18px;left:22px;transform:scale(.85)}
.page-hero .motif{opacity:.9}
.page-hero .container{position:relative;z-index:1}

/* capture icon tiles */
.cap-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.cap-tiles{grid-template-columns:1fr 1fr}}
.cap-tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;transition:transform .25s var(--ease),border-color .25s}
.cap-tile:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.cap-tile .ti{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(37,181,154,.12);color:var(--teal);margin-bottom:14px}
.cap-tile .ti svg{width:22px;height:22px}
.cap-tile h3,.cap-tile h4{font-size:16px;margin:0 0 6px}
.cap-tile p{font-size:13.5px;color:var(--text-2);line-height:1.5;margin:0}

/* realistic incident / notification card */
.inc-card{position:relative;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:16px;padding:20px 22px 20px 26px;overflow:hidden;box-shadow:var(--shadow);max-width:460px}
.inc-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sev,var(--red))}
.inc-card .inc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.inc-card .inc-id{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:14px;color:var(--text)}
.inc-pill{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(243,165,30,.14);color:var(--amber);border:1px solid rgba(243,165,30,.35)}
.inc-card .inc-body{font-size:14px;color:var(--text-2);line-height:1.55;margin:0 0 14px}
.inc-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
.inc-owner{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.inc-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'Noto Sans';font-weight:700;font-size:11px;color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
.inc-due{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:999px;padding:4px 10px}
.sev-red{--sev:var(--red)} .sev-amber{--sev:var(--amber)} .sev-teal{--sev:var(--teal)}

/* connected three-step flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start}
.flow-step{position:relative;text-align:center;padding:0 22px}
.flow-step:not(:last-child)::after{content:'';position:absolute;top:30px;right:-12px;width:24px;height:2px;background:linear-gradient(90deg,var(--teal),var(--amber))}
.flow-ico{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border-strong);color:var(--teal)}
.flow-ico svg{width:26px;height:26px}
.flow-step h3,.flow-step h4{font-size:18px;margin:0 0 8px}
.flow-step p{font-size:14px;color:var(--text-2);line-height:1.55;margin:0}
@media(max-width:760px){.flow{grid-template-columns:1fr;gap:28px}.flow-step:not(:last-child)::after{display:none}}

/* works with */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.works{grid-template-columns:1fr}}
.work{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:border-color .2s,transform .2s}
.work:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.work .wi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(37,181,154,.12);color:var(--teal);flex:0 0 38px}
.work .wi svg{width:20px;height:20px}
.work h3,.work h4{font-size:15px;margin:0;display:flex;align-items:center}

/* placeholder blocks for assets to add (maps, charts, photos) */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:1.5px dashed var(--border-strong);border-radius:16px;background:rgba(255,255,255,.02);color:var(--text-3);padding:34px;min-height:200px}
.ph svg{width:34px;height:34px;opacity:.6}
.ph span{font-size:13px;letter-spacing:.02em}
.ph .ph-tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--teal);text-transform:uppercase}

/* motif CTA band */
.cta-band .motif{z-index:0;opacity:.45}
.cta-band > *{position:relative;z-index:1}

/* solutions overview lenses */
.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.lens-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lens-grid{grid-template-columns:1fr}}
@media(max-width:760px){.lens-grid.out{grid-template-columns:1fr}}
.motif-divider{height:2px;background:linear-gradient(90deg,transparent,var(--teal),var(--amber),var(--red),transparent);opacity:.4;margin:46px auto}

/* ============ SITE POLISH (depth + signature) ============ */
/* hero: motif accent + scroll cue, tidy the void */
.hero { padding: 92px 0 70px; }
.hero .motif { top: 36px; right: 6%; opacity:.7; }
@media(max-width:900px){ .hero .motif{ display:none } }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:50px; color:var(--text-3); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.scroll-cue .sc-mouse{ width:22px; height:34px; border:2px solid var(--border-strong); border-radius:12px; position:relative; }
.scroll-cue .sc-mouse::after{ content:''; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px; background:var(--teal); transform:translateX(-50%); animation:scWheel 1.7s ease-in-out infinite; }
@keyframes scWheel{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,11px)} }

/* card depth + warmer hover */
.card{ background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.card:hover{ border-color: rgba(37,181,154,0.4); box-shadow: 0 22px 55px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(37,181,154,0.14); }

/* geometric motif on every CTA band (painted, no markup needed) */
.cta-band::after{ content:''; position:absolute; top:0; right:0; width:172px; height:118px; opacity:.5; pointer-events:none; z-index:0;
  background:
    linear-gradient(var(--teal),var(--teal)) 0 10px/52px 52px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 40px 42px/38px 38px no-repeat,
    linear-gradient(var(--red),var(--red)) 88px 0/28px 60px no-repeat,
    linear-gradient(#0a0c1a,#0a0c1a) 70px 72px/44px 30px no-repeat; }

/* home sectors as photo tiles (placeholders ready for real sector shots) */
.sector-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .sector-tiles{ grid-template-columns:1fr; } }
.sector-tile{ position:relative; min-height:240px; border-radius:18px; overflow:hidden; border:1px solid var(--border); display:flex; align-items:flex-end; padding:24px; background:linear-gradient(180deg,#0e1424,#070a14); transition:transform .25s var(--ease),border-color .25s; }
.sector-tile:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.sector-tile .st-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-3); }
.sector-tile .st-ph svg{ width:42px; height:42px; opacity:.45; }
.sector-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,13,.05),rgba(5,6,13,.88)); }
.sector-tile .ph-tag{ position:absolute; top:13px; left:15px; z-index:2; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; }
.sector-tile .st-body{ position:relative; z-index:1; }
.sector-tile .st-ico{ width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(37,181,154,.16);color:var(--teal);margin-bottom:12px }
.sector-tile .st-ico svg{ width:22px;height:22px }
.sector-tile h3{ font-size:18px; margin:0 0 4px; }
.sector-tile p{ font-size:13.5px; color:var(--text-2); margin:0; }

/* ============ IMAGERY + TESTIMONIALS ============ */
/* sector photos */
.sector-tile .st-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.sector-tile::after{ z-index:1; }
.sector-tile .st-body{ z-index:2; }
/* trusted-by tag over client logos */
.trusted-tag{ text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:0 0 18px; }
/* testimonials carousel */
.testi-carousel{ max-width:780px; margin:0 auto; }
.testi-slide{ text-align:center; margin:0; position:relative; transition:opacity .3s ease, transform .3s ease; opacity:1; transform:translateY(0); }
.testi-slide.fade-out{ opacity:0; transform:translateY(6px); }
.testi-slide.fade-in-start{ opacity:0; transform:translateY(6px); transition:none; }
@media (prefers-reduced-motion: reduce){ .testi-slide{ transition:none !important; } }
.testi-logo{ height:37px; width:auto; margin:0 auto 32px; display:block; }
.testi-slide .q{
  position:relative; font-family:'Noto Sans',system-ui,sans-serif; font-style:italic; font-weight:300;
  font-size:clamp(20px,2.3vw,26px); line-height:1.55; color:var(--text);
  max-width:620px; margin:0 auto 28px;
}
.testi-who{ color:var(--text-3); font-size:13px; line-height:1.4; position:relative; z-index:1; }
.testi-who strong{ display:block; color:var(--text); font-family:'Noto Sans',sans-serif; font-size:17px; font-weight:600; margin-bottom:3px; }
.testi-dots{ display:flex; gap:9px; justify-content:center; margin-top:44px; }
.testi-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--border-strong); cursor:pointer; transition:background .25s,width .25s,border-radius .25s; }
.testi-dot[aria-current="true"]{ background:var(--teal); width:26px; border-radius:5px; }

/* notification stack frame (incident management) */
.notif-frame{ max-width:560px; margin:0 auto; border:1px solid var(--border-strong); border-radius:18px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); }
.notif-frame img{ display:block; width:100%; height:auto; }

/* ===== Corrections (2026-06-28) ===== */
/* motif overlapped headings + was inconsistent -> keep it only on CTA bands */
.hero .motif, .page-hero .motif { display:none !important; }
/* key-industry photo tiles: keep text legible in BOTH light and dark */
.sector-tile::after{ background:linear-gradient(180deg,rgba(5,6,13,.20),rgba(5,6,13,.92)); }
.sector-tile h3{ color:#fff; }
.sector-tile p{ color:rgba(255,255,255,.82); }
.sector-tile .st-ico{ background:rgba(255,255,255,.16); color:#fff; }
/* testimonials: separate from the text above so they don't blend/bunch */
.testi-carousel{ margin-top:56px; }
/* trusted-by logos inside the hero */
.hero-trust-logos{ margin-top:72px; }
.hero-trust-logos .trusted-tag{ margin-bottom:16px; }

/* ===== Industries carousel (home) — full-width rail with content-zone opacity fade ===== */
.ind-carousel{
  position:relative; width:100vw; left:50%; margin-left:-50vw; margin-bottom:40px;
  /* distance from the viewport edge to where the standard .container content begins —
     used for track edge padding and nav arrow position only (layout, unchanged) */
  --ind-zone: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  /* centre-focus opacity zone — a FIXED width (3 card-widths + 2 gaps), centred on the
     viewport, independent of container width. This is what determines which cards read
     as "central" — always exactly 3 cards on desktop, regardless of monitor width. */
  --ind-focus: calc(312px * 3 + 18px * 2);
  --ind-ramp: 40px;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,.3) 0, rgba(0,0,0,.3) calc(50% - var(--ind-focus) / 2 - var(--ind-ramp)),
    #000 calc(50% - var(--ind-focus) / 2), #000 calc(50% + var(--ind-focus) / 2),
    rgba(0,0,0,.3) calc(50% + var(--ind-focus) / 2 + var(--ind-ramp)), rgba(0,0,0,.3) 100%);
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,.3) 0, rgba(0,0,0,.3) calc(50% - var(--ind-focus) / 2 - var(--ind-ramp)),
    #000 calc(50% - var(--ind-focus) / 2), #000 calc(50% + var(--ind-focus) / 2),
    rgba(0,0,0,.3) calc(50% + var(--ind-focus) / 2 + var(--ind-ramp)), rgba(0,0,0,.3) 100%);
}
@media (max-width:760px){
  .ind-carousel{ --ind-focus: 82vw; --ind-ramp: 20px; }
}
.ind-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--ind-zone) 28px; scrollbar-width:none; -ms-overflow-style:none; }
.ind-track::-webkit-scrollbar{ display:none; }
.ind-card{ position:relative; flex:0 0 312px; height:364px; border-radius:18px; overflow:hidden; border:1px solid var(--border); scroll-snap-align:start; display:flex; align-items:flex-end; text-decoration:none; transition:transform .25s var(--ease),border-color .25s; }
.ind-card:hover{ transform:translateY(-5px); border-color:var(--border-strong); }
.ind-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ind-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,13,.12),rgba(5,6,13,.9)); }
.ind-cap{ position:relative; z-index:1; padding:22px; }
.ind-cap h3{ color:#fff; font-size:19px; margin:0 0 4px; }
.ind-cap span{ color:rgba(255,255,255,.82); font-size:13px; }
.ind-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); transition:background .2s; }
.ind-nav:hover{ background:var(--surface); }
.ind-prev{ left:calc(var(--ind-zone) - 60px); } .ind-next{ right:calc(var(--ind-zone) - 60px); }
@media(max-width:760px){ .ind-nav{ display:none; } .ind-card{ flex-basis:80%; height:300px; } }
.ind-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.ind-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.22); cursor:pointer; transition:width .2s, background .2s; }
.ind-dot.on{ background:var(--teal); width:22px; border-radius:4px; }

/* ===== Solutions: app + dashboard showcase ===== */
.sol-product{ display:grid; grid-template-columns:1.7fr 0.82fr; gap:30px; align-items:center; max-width:1040px; margin:0 auto; }
@media(max-width:820px){ .sol-product{ grid-template-columns:1fr; gap:26px; } }
.sol-dash{ border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); }
.sol-dash img{ display:block; width:100%; height:auto; }
.sol-app{ display:flex; justify-content:center; }
.sol-app .device{ --dw:206px; }

/* ===== Industry page hero photos ===== */
.industry-hero{ padding-top:104px; padding-bottom:88px; }
.industry-hero .ind-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.industry-hero::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(5,6,13,.64) 0%, rgba(5,6,13,.82) 55%, rgba(5,6,13,.95) 100%); }
.industry-hero .container{ position:relative; z-index:2; }
.industry-hero .wp-block-image{ margin:0; }

/* ===== Contact form (About) ===== */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:34px; } }
.contact-info .contact-h{ font-size:clamp(28px,3.4vw,40px); margin:16px 0 14px; }
.contact-info > p{ color:var(--text-2); font-size:16px; max-width:430px; }
.contact-points{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:18px; }
.contact-points li{ display:flex; gap:14px; align-items:flex-start; }
.ci-ic{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:grid; place-items:center; background:rgba(37,181,154,0.12); color:var(--teal); }
.ci-ic svg{ width:20px; height:20px; }
.contact-points strong{ display:block; font-family:'Noto Sans',sans-serif; font-weight:600; font-size:15px; color:var(--text); margin-bottom:2px; }
.contact-points a, .contact-points span{ color:var(--text-2); font-size:14px; }
.contact-points a{ color:var(--teal); }
.contact-form{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border-strong); border-radius:18px; padding:28px; display:grid; gap:16px; box-shadow:var(--shadow); }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:480px){ .cf-row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:7px; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:0.02em; color:var(--text-2); }
.field input, .field textarea{ width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--border-strong); background:rgba(255,255,255,0.03); color:var(--text); font-size:15px; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-3); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(37,181,154,0.16); }
.field textarea{ resize:vertical; min-height:112px; }

/* industry hero: light-mode overlay so heading/text stay readable */
[data-theme="light"] .industry-hero::after{ background:linear-gradient(180deg, rgba(243,245,250,0.48) 0%, rgba(243,245,250,0.84) 55%, rgba(243,245,250,0.96) 100%); }

/* ===== Batch refinements (2026-06-28) ===== */
/* Trusted-by logos: nudge down + pull the laptop section up so the dead band is filled */
.hero .hero-trust-logos{ margin-top:52px !important; }
.hero{ padding-bottom:24px; }
.hero + .section-pad{ padding-top:12px; }

/* ===== Core-product cards — compact 4-up, one colour each ===== */
.prod-teal{ --acc:var(--teal); }
.prod-blue{ --acc:#3b82f6; }
.prod-purple{ --acc:#F3A51E; }
.card.prod.highlight{ --acc:#E24A2D; }
.products-grid{ gap:20px; align-items:stretch; }
.products-grid .card{ display:flex; flex-direction:column; height:100%; margin-top:0; padding:32px 28px; border-radius:18px; position:relative; overflow:hidden;
  border-color:var(--border);
  background:var(--bg-2);
  box-shadow:0 40px 90px -55px color-mix(in srgb, var(--acc) 50%, transparent); }
.products-grid .card:hover{ border-color:color-mix(in srgb, var(--acc) 45%, var(--border));
  box-shadow:0 22px 46px -24px color-mix(in srgb, var(--acc) 60%, transparent); }
.products-grid .card .icon{ width:48px; height:48px; border-radius:13px; color:#fff; border:none; margin-bottom:0;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 48%, #06122a));
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--acc) 78%, transparent); }
.products-grid .card .icon svg{ width:auto; height:auto; max-width:23px; max-height:23px; }
.products-grid .card .icon svg .cls-1{ fill:currentColor; }
/* neutralise WordPress block-gap margins injected on the card's inner children */
.products-grid .card > *{ margin-top:0; }
.products-grid .card .tag{ color:var(--acc); margin-top:24px; display:flex; align-items:center; min-height:24px; }
.products-grid .card .prod-tagrow{ display:flex; align-items:center; gap:8px; margin-top:24px; min-height:24px; }
.products-grid .card .prod-tagrow .tag{ margin-top:0; min-height:0; }
.products-grid .card h3 + p{ margin-top:0; }
.products-grid .card .badge-beta{ color:var(--acc); background:color-mix(in srgb, var(--acc) 14%, transparent);
  border-color:color-mix(in srgb, var(--acc) 38%, transparent); }
.products-grid .card h3{ font-size:18.5px; margin:14px 0 10px; }
.products-grid .card p{ font-size:14px; line-height:1.55; color:var(--text-2); }
.products-grid .prod-cta{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:20px;
  align-self:flex-start; color:var(--acc); font-weight:600; font-size:14px; transition:gap .2s var(--ease); }
.products-grid .prod-cta:hover{ gap:11px; }
.products-grid .prod-cta svg{ width:16px; height:16px; }
.testi-carousel{ margin-top:66px; background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:46px 40px; box-shadow:var(--shadow); }
@media(max-width:560px){
  .testi-carousel{ padding:30px 20px; }
  .testi-slide .q{ font-size:19px; }
}
.showcase-text .checks{ padding-left:10px; }                  /* field->boardroom bullets slightly right */
.laptop-phones .device{ box-shadow:0 0 0 1.5px rgba(255,255,255,0.16); filter:drop-shadow(0 30px 44px rgba(0,0,0,0.92)); } /* lift phones off the laptop */
[data-theme="light"] .industry-hero .eyebrow{ background:rgba(255,255,255,0.85); border-color:rgba(0,0,0,0.12); color:var(--teal-deep); } /* industry eyebrow readable on light */

/* ===== Sign-up / pricing: bands, accordions, comparison, packs ===== */
.pricing-head .eyebrow{ margin-bottom:16px; }
.price-vol{ font-size:24px !important; }
.band-rows{ display:grid; gap:0; margin:14px 0 18px; }
.band-rows span{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--text-2); border-top:1px solid var(--border); padding:7px 0; }
.band-rows b{ color:var(--text); font-family:'Noto Sans',sans-serif; }
.tier-foot .hint, .hint{ color:var(--text-3); font-size:12.5px; }
/* expandable detail sections */
.pricing-details{ max-width:940px; margin:18px auto 0; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); overflow:hidden; }
.pricing-details summary{ cursor:pointer; list-style:none; padding:18px 24px; font-family:'Noto Sans',sans-serif; font-weight:600; font-size:16px; color:var(--text); display:flex; justify-content:space-between; align-items:center; }
.pricing-details summary::-webkit-details-marker{ display:none; }
.pricing-details summary::after{ content:'+'; font-size:24px; line-height:1; color:var(--teal); }
.pricing-details[open] summary::after{ content:'\2013'; }
.pricing-details[open] summary{ border-bottom:1px solid var(--border); }
.pd-body{ padding:20px 24px 24px; }
.pd-sub{ font-size:15px; margin:22px 0 14px; }
.table-scroll{ overflow-x:auto; }
.compare-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
.compare-table th, .compare-table td{ padding:11px 12px; border-bottom:1px solid var(--border); text-align:center; }
.compare-table th:first-child, .compare-table td:first-child{ text-align:left; color:var(--text-2); }
.compare-table thead th{ color:var(--text); font-family:'Noto Sans',sans-serif; font-size:14px; }
.compare-table tbody td{ color:var(--text); }
.compare-table .yes{ color:var(--teal); font-weight:700; }
.compare-table .no{ color:var(--text-3); }
.credit-facts{ margin:4px 0 6px; }
.pack-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px; }
@media(max-width:680px){ .pack-cards{ grid-template-columns:1fr; } }
.pack-card{ border:1px solid var(--border); border-radius:12px; padding:18px; background:var(--surface-2); }
.pack-card.best{ border-color:rgba(37,181,154,0.45); box-shadow:0 0 0 1px rgba(37,181,154,0.18); }
.pack-card h3,.pack-card h4{ margin:0; font-size:15px; display:flex; align-items:center; gap:8px; }
.pack-card .pk-tag{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--teal); background:rgba(37,181,154,.12); border:1px solid rgba(37,181,154,.3); padding:2px 7px; border-radius:999px; }
.pack-card .pk-price{ font-family:'Noto Sans',sans-serif; font-size:24px; color:var(--text); margin:8px 0 4px; }
.pack-card p{ font-size:13px; color:var(--text-2); margin:0; line-height:1.5; }

/* ===== Solutions product flow carousels ===== */
.flow-carousel{ position:relative; }
.flow-head{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.flow-kicker{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.flow-step{ font-size:13.5px; color:var(--text); font-weight:600; font-family:'Noto Sans',sans-serif; }
.flow-stage{ position:relative; display:flex; align-items:center; justify-content:center; }
.flow-nav{ position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); transition:background .2s; }
.flow-nav:hover{ background:var(--surface); }
.flow-prev{ left:-10px; } .flow-next{ right:-10px; }
.flow-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.flow-dot{ width:8px; height:8px; border-radius:50%; border:0; background:var(--border-strong); cursor:pointer; padding:0; transition:background .2s,width .2s; }
.flow-dot.on{ background:var(--teal); width:22px; border-radius:5px; }
/* dashboard frame, stacked slides */
.dash-flow .dash-frame{ position:relative; width:100%; aspect-ratio:1500/1060; border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); }
.dash-flow .flow-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transition:opacity .35s var(--ease); }
.dash-flow .flow-slide.on{ opacity:1; }
/* app device, stacked slides */
.app-flow{ display:flex; flex-direction:column; align-items:center; }
.app-flow .flow-device{ --dw:232px; aspect-ratio:232/525; }
.app-flow .flow-device .flow-slide{ position:absolute; top:calc(var(--dw)*0.034); left:calc(var(--dw)*0.034); width:calc(var(--dw)*0.932); height:calc(var(--dw)*2.195); aspect-ratio:auto; object-fit:cover; object-position:top center; border-radius:calc(var(--dw)*0.133); opacity:0; transition:opacity .35s var(--ease); }
.app-flow .flow-device .flow-slide.on{ opacity:1; }
@media(max-width:820px){ .flow-prev{ left:-4px; } .flow-next{ right:-4px; } }

/* ===== Industry "challenge" panels — per-industry visuals (ADD THIS BLOCK) ===== */
/* status pills (one per panel) */
.panel .pill{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.panel .pill.p-amber{ color:var(--amber); background:rgba(243,165,30,.12); border-color:rgba(243,165,30,.34); }
.panel .pill.p-teal{ color:var(--teal-2); background:rgba(37,181,154,.12); border-color:rgba(37,181,154,.34); }
.panel .pill.p-red{ color:var(--red); background:rgba(226,74,45,.13); border-color:rgba(226,74,45,.36); }
/* inline meta chips */
.panel .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.panel .chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:5px 11px; }
.panel .chip svg{ width:13px; height:13px; color:var(--teal-2); flex:0 0 auto; }
.panel .chip i{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.panel .chip.on{ color:var(--teal-2); border-color:rgba(37,181,154,.4); background:rgba(37,181,154,.1); }
/* big figure (Space Grotesk) */
.panel .num{ font-family:'Noto Sans',sans-serif; font-weight:600; line-height:1; }
/* small helpers */
.panel .ptitle{ font-size:12.5px; color:var(--text-2); margin-bottom:12px; }
.panel .foot{ margin-top:14px; padding-top:13px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-3); }
.panel .foot b{ color:var(--text-2); font-weight:600; }
/* avatars + routed-to row (construction) */
.panel .av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; font-family:'Noto Sans',sans-serif; color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); flex:0 0 auto; }
.panel .route{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.panel .route .who{ font-size:13px; color:var(--text); font-weight:600; }
.panel .route .who span{ display:block; font-size:11px; color:var(--text-3); font-weight:400; }
/* photo thumbnails (construction) */
.panel .thumbs{ display:flex; gap:10px; margin-bottom:12px; }
.panel .thumb{ flex:1; height:62px; border-radius:10px; border:1px solid var(--border); position:relative; overflow:hidden; background:linear-gradient(135deg,var(--surface-3),var(--surface)); }
.panel .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(37,181,154,.16),transparent 62%); }
.panel .thumb svg{ position:absolute; right:7px; bottom:6px; width:15px; height:15px; color:var(--text-3); }
/* discipline convergence (engineering) */
.panel .converge{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.panel .converge .chips{ justify-content:center; }
.panel .arrow{ color:var(--text-3); }
.panel .linked{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 12px; border:1px solid rgba(37,181,154,.32); background:rgba(37,181,154,.08); border-radius:10px; font-size:13px; color:var(--text); }
.panel .linked svg{ width:16px; height:16px; color:var(--teal-2); flex:0 0 auto; }
/* store estate grid (retail) */
.panel .tiles{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.panel .tiles i{ aspect-ratio:1; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); }
.panel .tiles i.flag{ background:rgba(243,165,30,.18); border-color:rgba(243,165,30,.55); box-shadow:0 0 12px -3px rgba(243,165,30,.6); }
/* logistics timeline */
.panel .tl{ display:flex; flex-direction:column; }
.panel .tl .step{ display:flex; gap:12px; align-items:flex-start; position:relative; padding-bottom:16px; }
.panel .tl .step:last-child{ padding-bottom:0; }
.panel .tl .step::before{ content:""; position:absolute; left:6px; top:15px; bottom:0; width:2px; background:var(--border-strong); }
.panel .tl .step:last-child::before{ display:none; }
.panel .tl .dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); flex:0 0 auto; margin-top:1px; z-index:1; }
.panel .tl .step.on .dot{ border-color:var(--teal); background:var(--teal); box-shadow:0 0 10px -1px rgba(37,181,154,.7); }
.panel .tl .lab{ font-size:13px; color:var(--text); }
.panel .tl .lab span{ display:block; font-size:11px; color:var(--text-3); }
/* building floor stack (facilities) */
.panel .stack{ display:flex; flex-direction:column; gap:5px; }
.panel .floor{ display:flex; align-items:center; gap:9px; height:23px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); padding:0 9px; }
.panel .floor small{ font-size:10.5px; color:var(--text-3); min-width:46px; }
.panel .floor .pin{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.panel .floor .pin.open{ background:var(--amber); box-shadow:0 0 8px -1px rgba(243,165,30,.85); }
.panel .floor .pin.ok{ background:var(--surface-3); }
.panel .floor .bar{ flex:1; height:5px; border-radius:3px; background:var(--surface-3); }
.panel .floor.alert .bar{ background:linear-gradient(90deg,rgba(243,165,30,.5),rgba(243,165,30,.12)); }
/* audit log (public sector) */
.panel .log .row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:12.5px; color:var(--text); }
.panel .log .row:first-child{ border-top:0; }
.panel .log .tick{ width:18px; height:18px; border-radius:50%; background:rgba(37,181,154,.14); display:grid; place-items:center; flex:0 0 auto; }
.panel .log .tick svg{ width:11px; height:11px; color:var(--teal-2); }
.panel .log .row .t{ margin-left:auto; color:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums; }

/* ===== realistic media panels: real photo backdrop + frosted-glass data card ===== */
.panel.media{ padding:0; position:relative; overflow:hidden; min-height:380px; display:flex; flex-direction:column; border-color:var(--border-strong); }
.panel.media .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.panel.media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,10,20,.46) 0%, rgba(8,10,20,.14) 30%, rgba(8,10,20,.82) 72%, rgba(8,10,20,.96) 100%); }
.panel.media > .head{ position:relative; z-index:2; padding:16px 16px 0; margin:0; }
.panel.media > .head h3,.panel.media > .head h4{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.panel.media > .glass{ position:relative; z-index:2; margin:auto 12px 12px; padding:14px 15px; border-radius:13px;
  background:rgba(11,14,24,.60); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 36px -14px rgba(0,0,0,.78); backdrop-filter:blur(13px) saturate(1.15); -webkit-backdrop-filter:blur(13px) saturate(1.15); }
/* glass content is always light-on-dark, regardless of the site theme */
.panel.media .glass{ color:rgba(255,255,255,.9); }
.panel.media .glass .ptitle{ color:rgba(255,255,255,.66); margin-bottom:11px; }
.panel.media .glass .chip{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.17); }
.panel.media .glass .chip svg{ color:var(--teal-2); }
.panel.media .glass .chip.on{ color:var(--teal-2); background:rgba(37,181,154,.20); border-color:rgba(69,211,182,.45); }
.panel.media .glass .num{ color:#fff; }
.panel.media .glass .foot{ color:rgba(255,255,255,.62); border-top-color:rgba(255,255,255,.14); }
.panel.media .glass .foot b{ color:#fff; }
.panel.media .glass .route{ border-top-color:rgba(255,255,255,.14); }
.panel.media .glass .route .who{ color:#fff; }
.panel.media .glass .route .who span{ color:rgba(255,255,255,.6); }
.panel.media .glass .linked{ color:#fff; background:rgba(37,181,154,.20); border-color:rgba(69,211,182,.4); }
.panel.media .glass .tl .lab{ color:#fff; }
.panel.media .glass .tl .lab span{ color:rgba(255,255,255,.6); }
.panel.media .glass .tl .dot{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); }
.panel.media .glass .tl .step.on .dot{ background:var(--teal); border-color:var(--teal); }
.panel.media .glass .tl .step::before{ background:rgba(255,255,255,.22); }
.panel.media .glass .tiles i{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); }
.panel.media .glass .log .row{ color:#fff; border-top-color:rgba(255,255,255,.13); }
.panel.media .glass .log .row .t{ color:rgba(255,255,255,.6); }
.panel.media .glass .kpi .k strong{ color:#fff; }
.panel.media .glass .kpi .k span{ color:rgba(255,255,255,.6); }
.panel.media .glass .donut{ width:74px; height:74px; -webkit-mask:radial-gradient(circle 23px at center,transparent 98%,#000 100%); mask:radial-gradient(circle 23px at center,transparent 98%,#000 100%); }
@media(max-width:860px){ .panel.media{ min-height:300px; } }

/* ===== News article pages + card tagging ===== */
.news-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.page-hero .news-tags{ justify-content:center; margin-bottom:18px; }
.news-tags a{ font-size:12px; font-weight:600; letter-spacing:.01em; padding:5px 12px; border-radius:999px; text-decoration:none; transition:border-color .2s, background .2s; }
.news-tags a.sol{ color:var(--teal-2); background:rgba(37,181,154,.10); border:1px solid rgba(37,181,154,.32); }
.news-tags a.sol:hover{ background:rgba(37,181,154,.18); }
.news-tags a.ind{ color:var(--text-2); background:var(--surface-2); border:1px solid var(--border-strong); }
.news-tags a.ind:hover{ border-color:var(--text-3); color:var(--text); }
.article-meta{ color:var(--text-3); font-size:14px; }
/* article prose */
.article{ max-width:760px; margin:0 auto; }
.article > * + *{ margin-top:1.05em; }
.article .lead{ font-size:19px; line-height:1.6; color:var(--text); }
.article h2{ font-family:'Noto Sans',sans-serif; font-size:25px; line-height:1.25; margin-top:1.7em; color:var(--text); }
.article h3{ font-family:'Noto Sans',sans-serif; font-size:18.5px; margin-top:1.4em; color:var(--text); }
.article p, .article li{ font-size:16.5px; line-height:1.72; color:var(--text-2); }
.article strong{ color:var(--text); font-weight:600; }
.article ul, .article ol{ padding-left:22px; }
.article li{ margin-top:.45em; }
.article a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.article blockquote{ border-left:3px solid var(--teal); margin:1.4em 0; padding:6px 0 6px 20px; color:var(--text); font-size:18px; font-style:italic; }
.article .callout{ background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:10px; padding:15px 17px; font-size:15px; }
.article .callout strong{ color:var(--amber); }
/* stat grid */
.article .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0; }
.article .stat-grid > * + *{ margin-top:0; }
.article .stat{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.article .stat strong{ font-family:'Noto Sans',sans-serif; font-size:28px; display:block; color:var(--text); line-height:1; }
.article .stat span{ font-size:12.5px; color:var(--text-3); display:block; margin-top:7px; }
@media(max-width:620px){ .article .stat-grid{ grid-template-columns:1fr; } }
/* tables */
.article table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:14.5px; }
.article th, .article td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.article thead th{ color:var(--text); font-family:'Noto Sans',sans-serif; font-size:13px; letter-spacing:.01em; border-bottom:1px solid var(--border-strong); }
.article tbody td{ color:var(--text-2); }
.article td.num, .article th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.article .src{ font-size:12.5px; color:var(--text-3); margin-top:-14px; }
/* references */
.article .refs{ font-size:13.5px; }
.article .refs li{ font-size:13.5px; color:var(--text-3); margin-top:.5em; word-break:break-word; }
.article .refs a{ color:var(--teal-2); }
/* news landing cards as links + tag chips */
a.card.news-card{ display:block; text-decoration:none; color:inherit; }
a.card.news-card h3{ transition:color .2s; }
a.card.news-card:hover h3{ color:var(--teal-2); }
.card .ntags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:11px; }
.card .ntags span{ font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:999px; }
.card .ntags .ind{ color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); }
.card .ntags .sol{ color:var(--teal-2); background:rgba(37,181,154,.10); border:1px solid rgba(37,181,154,.3); }
.card .readmore{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--teal); font-weight:600; font-size:14px; }
/* article byline + author note */
.byline{ color:var(--text-3); font-size:14px; }
.byline b{ color:var(--text-2); font-weight:600; }
.article .author-note{ margin-top:32px; padding-top:18px; border-top:1px solid var(--border); font-size:13.5px; color:var(--text-3); }
.article .author-note b{ color:var(--text-2); }
/* news pagination */
.pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:42px; flex-wrap:wrap; }
.pager-btn{ min-width:40px; height:40px; padding:0 13px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-2); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.pager-btn:hover:not(:disabled){ color:var(--text); border-color:var(--text-3); }
.pager-btn.on{ background:rgba(37,181,154,.14); border-color:rgba(37,181,154,.4); color:var(--teal-2); }
.pager-btn.nav{ font-weight:500; }
.pager-btn:disabled{ opacity:.38; cursor:default; }

/* ===================== CLARA visual hero ===================== */
.clara-hero{ --clara:#2FA8A8; --clara-2:#45d3b6; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--border-strong); border-radius:22px; padding:24px; box-shadow:var(--shadow); }
.clara-hero .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.clara-hero svg{ display:block; }
/* drawn flags (not emoji) */
.clara-flag{ display:inline-block; width:18px; height:12px; border-radius:2px; vertical-align:middle; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.22); box-shadow:0 1px 2px rgba(0,0,0,.45); background-size:cover; }
.clara-flag.jp{ background:radial-gradient(circle at 50% 50%, #bc002d 0 30%, #fff 31% 100%); }
.clara-flag.us{ background:
   linear-gradient(#3c3b6e,#3c3b6e) 0 0/42% 46% no-repeat,
   repeating-linear-gradient(180deg, #b22234 0, #b22234 1.5px, #fff 1.5px, #fff 3px); }
/* channel strip */
.clara-channels{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.clara-chan{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:7px 13px; }
.clara-chan svg{ width:15px; height:15px; }
.clara-chan.on{ color:var(--clara-2); border-color:rgba(47,168,168,.5); background:rgba(47,168,168,.12); }
.clara-live{ display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.clara-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px 1px rgba(61,220,132,.8); animation:clara-blink 1.6s ease-in-out infinite; }
/* flow row */
.clara-flow{ display:flex; align-items:center; gap:0; }
.clara-sources{ flex:1 1 0; min-width:0; align-self:stretch; display:flex; flex-direction:column; gap:14px; }
.clara-record{ flex:1 1 0; min-width:0; align-self:stretch; display:flex; flex-direction:column; gap:9px; }
.clara-core-wrap{ flex:0 0 132px; display:flex; flex-direction:column; align-items:center; gap:11px; }
.clara-conn{ flex:0 0 54px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
/* conversation card */
.clara-conv{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:13px; }
.clara-callbar{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); font-family:'JetBrains Mono',monospace; }
.clara-callbar .clara-dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px 1px rgba(61,220,132,.7); animation:clara-blink 1.6s ease-in-out infinite; }
.clara-timer{ margin-left:auto; color:var(--text-3); font-variant-numeric:tabular-nums; }
.clara-lang{ display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12.5px; color:var(--text);
  background:var(--surface-3); border:1px solid var(--border); border-radius:9px; padding:7px 10px; }
.clara-lang svg{ width:14px; height:14px; color:var(--text-3); }
.clara-lang .clara-arrow{ color:var(--text-3); }
.clara-lang .clara-lang-note{ margin-left:auto; font-size:11px; color:var(--clara-2); white-space:nowrap; }
.clara-turns{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.clara-turn{ font-size:13px; }
.clara-turn.rep .clara-orig{ font-family:'Noto Sans JP', system-ui, sans-serif; color:var(--text);
  background:var(--surface-3); border:1px solid var(--border); border-radius:12px 12px 12px 4px; padding:8px 11px; display:inline-block; max-width:94%; }
.clara-tr{ display:flex; gap:7px; align-items:flex-start; color:var(--text-2); font-size:12.5px;
  border-left:2px solid var(--clara-2); padding-left:9px; margin:6px 0 0 5px; }
.clara-tr svg{ width:13px; height:13px; color:var(--clara-2); flex:0 0 auto; margin-top:2px; }
.clara-turn.clara{ text-align:right; }
.clara-turn.clara p{ display:inline-block; max-width:94%; text-align:left; background:linear-gradient(135deg,#2FA8A8,#1c6f6f);
  color:#fff; border-radius:12px 12px 4px 12px; padding:8px 11px; font-size:12.5px; }
.clara-mods{ display:flex; gap:8px; margin-top:12px; }
.clara-mod{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; border-radius:999px; padding:4px 10px; border:1px solid; }
.clara-mod svg{ width:13px; height:13px; }
.clara-mod.voice{ color:var(--clara-2); border-color:rgba(47,168,168,.4); background:rgba(47,168,168,.1); }
.clara-mod.photo{ color:var(--amber); border-color:rgba(243,165,30,.4); background:rgba(243,165,30,.1); }
/* reporter pulled-through (amber, second source) */
.clara-reporter{ background:var(--surface-2); border:1px solid rgba(243,165,30,.28); border-left:2px solid rgba(243,165,30,.65); border-radius:14px; padding:13px; }
.clara-rep-head{ display:flex; align-items:center; gap:10px; }
.clara-avatar{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  font-family:'Noto Sans',sans-serif; font-weight:700; font-size:13px; color:#1c1404; background:linear-gradient(135deg,var(--amber),#b9760d); }
.clara-rep-head b{ font-size:13px; color:var(--text); display:block; }
.clara-rep-head .clara-rep-role{ font-size:11px; color:var(--text-3); }
.clara-matched{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--amber);
  background:rgba(243,165,30,.12); border:1px solid rgba(243,165,30,.32); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.clara-matched svg{ width:12px; height:12px; }
.clara-rep-fields{ display:grid; gap:7px; margin-top:12px; }
.clara-rep-fields div{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.clara-rep-fields span{ color:var(--text-3); }
.clara-rep-fields b{ color:var(--text-2); font-weight:600; text-align:right; }
/* connectors + signal squares */
.clara-line{ position:relative; height:2px; border-radius:2px; }
.clara-line.teal{ background:linear-gradient(90deg, transparent, rgba(47,168,168,.5), transparent); }
.clara-line.amber{ background:linear-gradient(90deg, transparent, rgba(243,165,30,.5), transparent); }
.clara-sq{ position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:3px; transform:translate(-50%,-50%);
  animation:clara-travel 2.8s linear infinite; }
.clara-sq.teal{ background:#2FA8A8; box-shadow:0 0 10px -1px rgba(47,168,168,.85); }
.clara-sq.amber{ background:var(--amber); box-shadow:0 0 10px -1px rgba(243,165,30,.85); }
.clara-sq.d2{ animation-delay:1.4s; }
.clara-conn.right .clara-sq{ animation-duration:2.4s; }
/* core */
.clara-core{ position:relative; width:96px; height:96px; border-radius:24px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 26%, #46c6c6, #2FA8A8 55%, #15686a);
  box-shadow:0 0 44px -8px rgba(47,168,168,.65), inset 0 0 22px rgba(255,255,255,.14); }
.clara-core::before{ content:""; position:absolute; inset:-7px; border-radius:30px; border:2px solid rgba(47,168,168,.55); animation:clara-pulse 2.8s ease-out infinite; }
.clara-core svg{ width:48px; height:48px; }
.clara-core-label{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.clara-core-label b{ font-family:'Noto Sans',sans-serif; font-weight:700; font-size:14px; color:var(--text); letter-spacing:.02em; }
.clara-status{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:10.5px; color:var(--clara-2); letter-spacing:.05em; animation:clara-blink 2s ease-in-out infinite; }
.clara-core-trans{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-3); }
.clara-core-trans .clara-arrow{ color:var(--text-3); }
/* record */
.clara-rec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1px; }
.clara-rec-head b{ font-family:'Noto Sans',sans-serif; font-size:14px; color:var(--text); }
.clara-building{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--clara-2); }
.clara-building::before{ content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--clara-2); border-top-color:transparent; animation:clara-spin .9s linear infinite; }
.clara-block{ border:1px solid var(--border); border-radius:12px; padding:11px 13px; background:var(--surface-2); }
.clara-block.amber{ border-left:2px solid rgba(243,165,30,.65); }
.clara-block.teal{ border-left:2px solid rgba(47,168,168,.65); }
.clara-block.neutral{ border-left:2px solid var(--border-strong); }
.clara-block-tag{ display:block; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; color:var(--text-3); }
.clara-block.amber .clara-block-tag{ color:var(--amber); }
.clara-block.teal .clara-block-tag{ color:var(--clara-2); }
.clara-kv{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; }
.clara-kv span{ color:var(--text-3); }
.clara-kv b{ color:var(--text); font-weight:600; text-align:right; display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.clara-sev{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; }
.clara-sev.med{ color:var(--amber); background:rgba(243,165,30,.14); }
.clara-sev.high{ color:var(--red); background:rgba(226,74,45,.16); }
.clara-conf{ margin-top:3px; }
.clara-conf-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-2); margin-bottom:6px; }
.clara-conf-top b{ font-family:'Noto Sans',sans-serif; color:var(--clara-2); }
.clara-conf-bar{ height:7px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.clara-conf-bar i{ display:block; height:100%; width:94%; border-radius:5px; background:linear-gradient(90deg,#2FA8A8,#45d3b6); }
.clara-action{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--text-2); background:var(--surface-3); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.clara-action svg{ width:15px; height:15px; color:var(--clara-2); flex:0 0 auto; }
/* keyframes */
@keyframes clara-travel{ 0%{ left:0; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ left:100%; opacity:0 } }
@keyframes clara-travel-v{ 0%{ top:0; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ top:100%; opacity:0 } }
@keyframes clara-pulse{ 0%{ transform:scale(.9); opacity:.7 } 100%{ transform:scale(1.28); opacity:0 } }
@keyframes clara-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
@keyframes clara-spin{ to{ transform:rotate(360deg) } }
/* paused offscreen + reduced motion */
.clara-hero.clara-paused *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .clara-hero *{ animation:none !important; }
  .clara-sq{ display:none; }
}
/* ===== Agents section ===== */
.clara-agent-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.clara-agent{ display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; }
.clara-agent .ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  color:var(--teal-2); background:rgba(47,168,168,.12); border:1px solid rgba(47,168,168,.28); }
.clara-agent .ic svg{ width:20px; height:20px; }
.clara-agent.id .ic{ color:var(--amber); background:rgba(243,165,30,.12); border-color:rgba(243,165,30,.3); }
.clara-agent h3,.clara-agent h4{ font-family:'Noto Sans',sans-serif; font-size:15px; margin:0 0 3px; color:var(--text); }
.clara-agent p{ font-size:12.5px; color:var(--text-2); margin:0; line-height:1.5; }
@media(max-width:900px){ .clara-agent-grid{ grid-template-columns:repeat(2,1fr); } }
/* ===== responsive: stack the flow ===== */
@media(max-width:760px){
  .clara-flow{ flex-direction:column; align-items:stretch; }
  .clara-conn{ flex-basis:auto; height:30px; flex-direction:row; justify-content:center; gap:30px; }
  .clara-line{ width:2px; height:100%; background:linear-gradient(180deg, transparent, rgba(47,168,168,.5), transparent); }
  .clara-line.amber{ background:linear-gradient(180deg, transparent, rgba(243,165,30,.5), transparent); }
  .clara-sq{ top:0; left:50%; animation-name:clara-travel-v; }
  .clara-core-wrap{ flex-basis:auto; }
}
@media(max-width:560px){ .clara-agent-grid{ grid-template-columns:1fr; } .clara-hero{ padding:16px; } }
.clara-agent{ transition:border-color .45s var(--ease), box-shadow .45s var(--ease); }
.clara-agent .ic{ transition:background .45s var(--ease); }
.clara-agent.active{ border-color:rgba(47,168,168,.5); box-shadow:0 0 0 1px rgba(47,168,168,.22), 0 12px 32px -16px rgba(47,168,168,.6); }
.clara-agent.active .ic{ background:rgba(47,168,168,.22); }
.clara-agent.id.active{ border-color:rgba(243,165,30,.5); box-shadow:0 0 0 1px rgba(243,165,30,.22), 0 12px 32px -16px rgba(243,165,30,.6); }
.clara-agent.id.active .ic{ background:rgba(243,165,30,.22); }
@media (prefers-reduced-motion: reduce){ .clara-agent.active{ box-shadow:none; } }

/* ===================== Review fixes (2026-06-29) ===================== */
/* 1. Kill the WordPress block-gap margin injected on every grid child, which
      pushed cards 2+ down and made the first card look taller. Grids use gap.
      !important is needed: WP's blockGap rule (`> * + *`) ties on specificity and
      loads later, so it wins without it. */
.grid > *{ margin-top:0 !important; }
/* 4. Tighten the gap between a page hero and the next section, so the visual
      element below the intro appears sooner instead of a long empty band. */
.page-hero{ padding-bottom:26px; }
.page-hero + .section-pad{ padding-top:10px; }
/* 2. Light-mode contrast: the bright teal-2 and amber accents are too pale for
      small pill/label text on light surfaces. Darken the text in light mode. */
[data-theme="light"] .tag,
[data-theme="light"] .badge-beta,
[data-theme="light"] .card-link,
[data-theme="light"] .news-tags a.sol,
[data-theme="light"] .card .ntags .sol,
[data-theme="light"] .clara-status,
[data-theme="light"] .clara-building,
[data-theme="light"] .clara-lang-note,
[data-theme="light"] .clara-mod.voice,
[data-theme="light"] .clara-block.teal .clara-block-tag,
[data-theme="light"] .clara-conf-top b{ color:#0c7563; }
[data-theme="light"] .badge-beta{ background:rgba(37,181,154,.14); border-color:rgba(12,117,99,.4); }
[data-theme="light"] .news-tags a.sol,
[data-theme="light"] .card .ntags .sol{ background:rgba(37,181,154,.14); border-color:rgba(12,117,99,.35); }
[data-theme="light"] .clara-sev.med,
[data-theme="light"] .clara-matched,
[data-theme="light"] .clara-mod.photo,
[data-theme="light"] .clara-block.amber .clara-block-tag{ color:#8a5a00; }
[data-theme="light"] .clara-sev.med{ background:rgba(243,165,30,.22); }
[data-theme="light"] .clara-matched{ background:rgba(243,165,30,.18); border-color:rgba(176,120,8,.45); }
[data-theme="light"] .clara-mod.voice{ border-color:rgba(12,117,99,.4); }
[data-theme="light"] .clara-mod.photo{ border-color:rgba(176,120,8,.4); }
/* product-card tags: darken the pale teal/purple accents in light mode (keep blue/orange) */
[data-theme="light"] .products-grid .card.prod-teal .tag{ color:#0c7563; }
[data-theme="light"] .products-grid .card.prod-purple .tag{ color:#9a6300; }
[data-theme="light"] .products-grid .card.prod.highlight .tag{ color:#9a6300 !important; }

/* ===================== Logincident AI visual ===================== */
.lai-hero{ --lai:#4A82C4; --lai-2:#6fa0dd; --lai-red:#e8674a; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, #080c16 100%);
  border:1px solid var(--border-strong); border-radius:22px; padding:24px; box-shadow:var(--shadow); }
.lai-hero .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lai-hero svg{ display:block; }
/* sources strip */
.lai-sources{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.lai-sources-lbl{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-right:2px; }
.lai-chip{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:7px 13px; }
.lai-chip svg{ width:15px; height:15px; color:var(--lai-2); }
.lai-chip.lai-chip-clara{ color:var(--teal-2); border-color:rgba(37,181,154,.32); background:rgba(37,181,154,.10); }
.lai-chip.lai-chip-clara svg{ color:var(--teal-2); }
/* stage: field + insights */
.lai-stage{ display:flex; gap:16px; align-items:stretch; }
.lai-field{ flex:1.5 1 0; min-width:0; position:relative; background:#070b14; border:1px solid var(--border); border-radius:14px; padding:12px; overflow:hidden; display:flex; flex-direction:column; min-height:320px; }
.lai-field-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.lai-field-lbl{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); letter-spacing:.04em; }
.lai-analysing{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--lai-2); }
.lai-analysing::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lai-2); box-shadow:0 0 8px 1px rgba(111,160,221,.8); animation:lai-blink 1.6s ease-in-out infinite; }
.lai-canvas{ position:relative; flex:1; }
.lai-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.6; z-index:0; pointer-events:none; }
.lai-field-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.lai-grid{ stroke:rgba(120,150,200,.07); stroke-width:1; }
.lai-dot{ fill:rgba(150,170,210,.32); }
.lai-cl{ fill:var(--lai); filter:drop-shadow(0 0 5px rgba(74,130,196,.75)); }
.lai-hot{ fill:var(--amber); filter:drop-shadow(0 0 9px rgba(243,165,30,.9)); }
.lai-link{ stroke:rgba(111,160,221,.55); stroke-width:1.2; fill:none; }
.lai-ring{ fill:none; stroke:var(--amber); stroke-width:1.4; opacity:0; }
.lai-scan{ position:absolute; top:0; bottom:0; left:-70px; width:70px; pointer-events:none; z-index:2; background:linear-gradient(90deg, transparent, rgba(111,160,221,.14), transparent); animation:lai-sweep 6.5s linear infinite; }
.lai-callout{ position:absolute; bottom:10px; left:10px; display:inline-flex; align-items:center; gap:8px; background:rgba(232,103,74,.15); border:1px solid rgba(232,103,74,.42); color:#f1a995; border-radius:10px; padding:7px 11px; font-size:12px; }
.lai-callout svg{ width:14px; height:14px; color:var(--lai-red); flex:0 0 auto; }
.lai-callout b{ color:#fff; }
/* insights */
.lai-insights{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:9px; }
.lai-ins-lbl{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:1px; }
.lai-card{ background:var(--surface-2); border:1px solid var(--border); border-left:2px solid var(--lai); border-radius:12px; padding:12px 13px; }
.lai-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.lai-card-ico{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; color:var(--lai-2); background:rgba(74,130,196,.15); border:1px solid rgba(74,130,196,.3); }
.lai-card-ico svg{ width:15px; height:15px; }
.lai-card-kick{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.lai-card-h{ font-family:'Noto Sans',sans-serif; font-size:15px; color:var(--text); margin:0 0 2px; }
.lai-card-ctx{ font-size:12.5px; color:var(--text-2); }
.lai-metric{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lai-metric.amber{ color:var(--amber); background:rgba(243,165,30,.14); }
.lai-metric.red{ color:var(--lai-red); background:rgba(232,103,74,.16); }
.lai-metric.teal{ color:var(--teal-2); background:rgba(37,181,154,.14); }
.lai-explain{ display:block; margin-top:7px; font-size:11px; color:var(--text-3); }
.lai-explain b{ color:var(--text-2); }
.lai-thumb{ position:relative; height:70px; border-radius:8px; overflow:hidden; margin-top:8px; border:1px solid var(--border); background:linear-gradient(135deg,#16263d,#0c1626); }
.lai-thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; }
.lai-bbox{ position:absolute; border:2px solid var(--amber); border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 10px -1px rgba(243,165,30,.6); z-index:2; }
.lai-thumb-tag{ z-index:2; }
.lai-thumb-tag{ position:absolute; font-size:9.5px; font-weight:700; color:#1c1404; background:var(--amber); padding:1px 5px; border-radius:3px; }
.lai-trend{ width:100%; height:26px; margin-top:7px; display:block; }
.lai-trend path{ fill:none; stroke:var(--lai-red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lai-foot{ text-align:center; color:var(--text-3); font-size:12px; margin:20px 0 0; }
/* capabilities band */
.lai-caps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lai-cap{ display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; }
.lai-cap-ico{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; color:var(--lai-2); background:rgba(74,130,196,.12); border:1px solid rgba(74,130,196,.28); }
.lai-cap-ico svg{ width:20px; height:20px; }
.lai-cap-t{ font-family:'Noto Sans',sans-serif; font-size:15px; margin:0 0 3px; color:var(--text); }
.lai-cap-d{ font-size:12.5px; color:var(--text-2); margin:0; line-height:1.5; }
@media(max-width:900px){ .lai-caps-grid{ grid-template-columns:repeat(2,1fr); } }
/* motion (calm) */
@keyframes lai-blink{ 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes lai-sweep{ 0%{ left:-70px } 100%{ left:100% } }
@keyframes lai-ringpulse{ 0%{ r:16px; opacity:.55 } 100%{ r:58px; opacity:0 } }
@keyframes lai-twinkle{ 0%,100%{opacity:.32} 50%{opacity:.62} }
@keyframes lai-clpulse{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
@keyframes lai-draw{ from{ stroke-dashoffset:var(--len) } to{ stroke-dashoffset:0 } }
.lai-tw{ animation:lai-twinkle 4s ease-in-out infinite; }
.lai-cl{ animation:lai-clpulse 3.2s ease-in-out infinite; }
.lai-link{ stroke-dasharray:var(--len); animation:lai-draw 2.8s ease-out infinite alternate; }
.lai-ring-1{ animation:lai-ringpulse 3.6s ease-out infinite; }
.lai-ring-2{ animation:lai-ringpulse 3.6s ease-out infinite 1.8s; }
.lai-hot{ animation:lai-clpulse 2.4s ease-in-out infinite; }
.lai-hero.lai-paused *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .lai-hero *{ animation:none !important; }
  .lai-scan{ display:none; }
  .lai-link{ stroke-dashoffset:0; }
  .lai-ring-1{ opacity:.5; r:26px; } .lai-ring-2{ opacity:.28; r:42px; }
}
@media(max-width:760px){ .lai-stage{ flex-direction:column; } .lai-field{ min-height:300px; } }
@media(max-width:560px){ .lai-caps-grid{ grid-template-columns:1fr; } .lai-hero{ padding:16px; } }
[data-theme="light"] .lai-metric.amber{ color:#8a5a00; }
[data-theme="light"] .lai-metric.teal{ color:#0c7563; }

/* News article hero photo */
.article-hero-img{ max-width:880px; margin:0 auto 24px; border-radius:16px; overflow:hidden; border:1px solid var(--border-strong); aspect-ratio:16/7; box-shadow:var(--shadow); }
.article-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:560px){ .article-hero-img{ border-radius:12px; aspect-ratio:3/2; margin-bottom:18px; } }

/* Pill fixes: kill the WP block-gap that stretched the first news tag (Manufacturing
   sat high with a gap under it); centre-align the row; raise light-mode contrast. */
.news-tags{ align-items:center; }
.news-tags > *{ margin-top:0 !important; }
.page-hero .eyebrow, .page-hero .badge-beta{ margin-top:0 !important; vertical-align:middle; }
[data-theme="light"] .news-tags a.sol, [data-theme="light"] .card .ntags .sol{ color:#0a5f51; background:rgba(37,181,154,.20); border-color:rgba(10,95,81,.5); font-weight:600; }
[data-theme="light"] .news-tags a.ind, [data-theme="light"] .card .ntags .ind{ color:#2a2f45; border-color:rgba(40,47,69,.30); }

/* Trim the strip below the solution product screenshots (dots gap + section base) */
.flow-dots{ margin-top:10px; }
.section-pad:has(.flow-carousel){ padding-bottom:16px; }

/* ===================== Resources cluster (pillars / spokes / glossary) ===================== */
.article .faq{ margin:34px 0; }
.article .faq h2{ margin-bottom:14px; }
details.faq-item{ border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:10px; overflow:hidden; }
details.faq-item summary{ cursor:pointer; padding:14px 18px; font-family:'Noto Sans',sans-serif; font-weight:600; font-size:16px; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{ content:'+'; color:var(--teal-2); font-size:22px; font-weight:400; line-height:1; flex:0 0 auto; }
details.faq-item[open] summary::after{ content:'\2212'; }
details.faq-item summary:hover{ color:var(--teal-2); }
details.faq-item > p, details.faq-item > div{ padding:0 18px 16px; color:var(--text-2); line-height:1.65; margin:0; }
.glossary{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }  /* 2-col A-Z: shorter reading measure, uses desktop width */
@media(max-width:720px){ .glossary{ grid-template-columns:1fr; } }
.gloss-term{ border:1px solid var(--border); border-left:2px solid var(--teal); border-radius:12px; background:var(--surface); padding:16px 20px; scroll-margin-top:90px; }
.gloss-term h2{ font-size:18px; margin:0 0 6px; }
.gloss-term p{ color:var(--text-2); line-height:1.6; margin:0; }
.resources-hub{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resources-hub a.rh-card{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.resources-hub a.rh-card:hover{ border-color:var(--teal); transform:translateY(-2px); }
.resources-hub .rh-k{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.resources-hub a.rh-card h3{ font-size:18px; margin:9px 0 6px; color:var(--text); }
.resources-hub a.rh-card p{ font-size:13.5px; color:var(--text-2); margin:0; line-height:1.55; }
@media(max-width:860px){ .resources-hub{ grid-template-columns:1fr; } }
[data-theme="light"] .gloss-term, [data-theme="light"] details.faq-item, [data-theme="light"] .resources-hub a.rh-card{ background:#fff; }

/* Home showcase: nudge bullets + CTA right, away from the device visuals (desktop only) */
@media(min-width:861px){.home .showcase-text .checks,.home .showcase-text .btn{margin-left:28px}}

/* Trusted-by proof band: full-width solid black, logos centred within the standard content grid.
   Previously a contained panel inside .hero; moved to its own top-level section specifically so
   the background can span the full browser width — .hero has overflow:hidden (needed to contain
   its glow/motif decorations), which would otherwise clip any full-bleed attempt on a descendant.
   DELIBERATE EXCEPTION to the global 112px section-spacing rule (Entry 18): this is a compact
   social-proof band, not a standard content section — excluded from .section-rhythm/--section-spacing
   and given its own much smaller padding instead. */
.trust-strip {
  background: #000000;
  padding: 40px 0;
}
/* Label restyled to match the supplied reference: plain small text, not the site's
   eyebrow/pill component, sentence case rather than the default uppercase/letter-spaced
   .trusted-tag treatment used elsewhere. */
.trust-strip .trusted-tag {
  margin-bottom: 26px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}

/* Logo group kept as a compact, centred, fixed-width cluster (not stretched edge-to-edge
   on wide viewports) per the reference — matches its "controlled group" composition. */
.trust-strip .logo-row {
  gap: 48px;
  max-width: 760px;
  margin: 0 auto;
}

/* Client logos: uniform monochrome grey (#9898A6), replacing the mixed brand colours.
   Scoped to .trust-strip only — the base .client-logo rules elsewhere are untouched.
   Filter chain approximates #9898A6 from black (exact match isn't possible via filter on
   arbitrary source colours; this lands within ~4 RGB values, visually identical at this size).
   Applied uniformly to all five logos regardless of each source SVG's own original colour,
   so the strip reads as one consistent monochrome family rather than several near-matches. */
.trust-strip .client-logo,
.trust-strip .client-logo--white,
.trust-strip .client-logo--invert {
  width: auto;
  filter: brightness(0) invert(73%) sepia(10%) saturate(275%) hue-rotate(178deg) brightness(87%) contrast(78%);
  opacity: .68;
}
.trust-strip .client-logo:hover,
.trust-strip .client-logo--white:hover,
.trust-strip .client-logo--invert:hover { opacity: .95; }
[data-theme="light"] .trust-strip .client-logo,
[data-theme="light"] .trust-strip .client-logo--white,
[data-theme="light"] .trust-strip .client-logo--invert {
  filter: brightness(0) invert(73%) sepia(10%) saturate(275%) hue-rotate(178deg) brightness(87%) contrast(78%);
  opacity: .68;
}
/* Individual optical sizing, per the supplied reference — logos are NOT normalised to one
   uniform height. Order matches the approved sequence: AON, AXA, Finning, Barratt, BMW.
   Heights are set individually per logo; width is always auto, so each logo's own real
   aspect ratio is preserved rather than being stretched or squashed to fit a fixed box. */
.trust-strip .logo-row img:nth-child(1) { height: 36px; } /* AON — strong but restrained anchor size */
.trust-strip .logo-row img:nth-child(2) { height: 36px; } /* AXA — matched to AON's scale */
.trust-strip .logo-row img:nth-child(3) { height: 40px; } /* Finning — wider rectangular mark, slightly taller */
.trust-strip .logo-row img:nth-child(4) { height: 58px; } /* Barratt Developments — taller so the two-line wordmark stays legible */
.trust-strip .logo-row img:nth-child(5) { height: 56px; } /* BMW — compact circular mark */

@media (max-width: 760px) {
  .trust-strip .logo-row { max-width: 520px; gap: 32px; }
}
@media (max-width: 640px) {
  .trust-strip { padding: 28px 0; }
  .trust-strip .logo-row img:nth-child(1) { height: 28px; }
  .trust-strip .logo-row img:nth-child(2) { height: 28px; }
  .trust-strip .logo-row img:nth-child(3) { height: 31px; }
  .trust-strip .logo-row img:nth-child(4) { height: 45px; }
  .trust-strip .logo-row img:nth-child(5) { height: 43px; }
}

/* ---------- "One platform, end to end" section: centred platform showcase composition ---------- */
.platform-showcase { position: relative; text-align: center; }
.platform-showcase-head { max-width: 680px; margin: 0 auto; }
.platform-showcase-head .hero-badge { margin-bottom: 22px; }
.platform-showcase-head h3 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 18px; }
.platform-showcase-head .lead { font-size: 18px; color: var(--text-2); line-height: 1.6; max-width: 560px; margin: 0 auto; }

.platform-showcase-visual { position: relative; margin-top: 56px; }
.platform-showcase-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(127, 101, 188, 0.5) 0%, #100F17 51%, #0C0B11 100%);
  background-size: 58% 100%; background-position: 46% 42%; background-repeat: no-repeat;
  filter: blur(85px);
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 60% 46% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 46% at 50% 40%, #000 40%, transparent 100%);
}
.platform-showcase-visual .laptop-combo { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.platform-cards {
  position: relative; z-index: 2; margin-top: 64px; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 1040px; margin-left: auto; margin-right: auto;
}
.platform-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 20px; text-align: left; position: relative;
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--acc, var(--teal)) 45%, transparent);
}
.platform-card .icon {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc, var(--teal)) 14%, transparent);
  color: var(--acc, var(--teal));
}
.platform-card .icon svg { width: 19px; height: 19px; }
.platform-card h4 { font-size: 15.5px; margin: 0 0 6px; color: #fff; font-family: 'Noto Sans', sans-serif; }
.platform-card p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.platform-card.acc-teal { --acc: var(--teal); }
.platform-card.acc-blue { --acc: #3b82f6; }
.platform-card.acc-orange { --acc: #F3A51E; }
.platform-card.acc-red { --acc: #E24A2D; }

.platform-showcase-cta { margin-top: 60px; }

@media (max-width: 900px) {
  .platform-showcase-visual .laptop-combo { max-width: 530px; }
  .platform-cards { grid-template-columns: repeat(2, 1fr); margin-top: 44px; max-width: 620px; }
}
@media (max-width: 600px) {
  .platform-showcase-visual { margin-top: 36px; }
  .platform-cards { grid-template-columns: 1fr; margin-top: 32px; gap: 14px; }
  .platform-showcase-glow { opacity: .5; }
}

/* ============================================================
   GLOBAL DESIGN-SYSTEM RULE: universal section vertical spacing
   Desktop: every major section gets 112px padding-top AND 112px
   padding-bottom, independently. These are NOT halved and NOT
   shared between adjacent sections — where two sections sit next
   to each other, the visible content-to-content gap is genuinely
   112px + 112px = 224px. This is intentional, not a bug.
   Tablet (<=860px) and mobile (<=600px) reduce the same single
   token, with the same full-top-and-bottom principle preserved
   at every breakpoint. Implemented on the homepage first for
   review; intended to extend to .section-pad site-wide once approved.
   ============================================================ */
:root {
  --section-spacing: 112px;
}
@media (max-width: 860px) {
  :root { --section-spacing: 72px; }
}
@media (max-width: 600px) {
  :root { --section-spacing: 48px; }
}

.hero { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); }
.section-rhythm { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); }

/* GLOBAL DESIGN-SYSTEM RULE: alternating section background.
   Applies the same solid #000000 already used by .trust-strip to alternating major
   sections, so the 112px rhythm reads as a visual cadence, not just whitespace.
   The class itself sets background only — it never touches padding/spacing (that
   remains governed solely by --section-spacing above) and never touches the surface
   styling of any card/component inside the section. Sections are natural full-width
   blocks already (not nested inside .container), so this needs no breakout technique
   — the background covers the full viewport automatically while inner content stays
   on the standard container grid. */
.section-black { background: rgba(0, 0, 0, 0.65); }

/* ---------- Homepage final CTA ("Ready to see Logincident in action?") refinement ----------
   Scoped via the compound selector .cta-band.cta-final so this never affects the other
   60 pages that use the shared .cta-band component on its own. The established teal
   --grad-mesh glow (already applied via the shared .cta-band::before) is inherited
   unchanged — reused, not reinvented, satisfying the "existing approved teal value" requirement. */
.cta-band.cta-final {
  background: var(--bg-2);
  border-color: var(--border);
  padding: 76px 30px;
}
.cta-band.cta-final::after { content: none; } /* remove the decorative squares for this instance only */
.cta-band.cta-final h2 { margin-bottom: 18px; }
.cta-band.cta-final p { margin: 0 auto 36px; line-height: 1.6; }
[data-theme="light"] .cta-band.cta-final {
  background: var(--bg-2);
  border-color: var(--border);
}
[data-theme="light"] .cta-band.cta-final h2 { color: var(--text); }
[data-theme="light"] .cta-band.cta-final p { color: var(--text-2); }

/* source: assets/css/patches/conformance.css */
/* ==========================================================================
   conformance.css

   Section B of "IMPLEMENTATION DECISIONS.md" (6 September 2026): Jamie's own
   rules failing to render as written, plus defects in the handover. These are
   repairs, never redesign, and they are fixed silently.

   Load order set by build.py:
     theme styles.css  ->  conformance.css  ->  light-repair.css  ->  rollout.css
   and after WordPress's global-styles-inline block. Every rule here is still
   written to win on specificity as well as on order, so it behaves the same in
   the real theme where the enqueue order may differ.

   Theme scope. Every rule in this file is theme neutral (unscoped) except one
   named light guard under P-06, because these are conformance repairs that
   apply equally to both themes. Four of them do move dark mode; each says so
   in its own block and each is sanctioned by section B.

   Not in this file, by ownership:
     P-02, and the tag promotion half of P-06  -> markup, build.py
     P-16 sitewide rollout                     -> stays behind the toggle
     P-18 pagination, P-21 carousel autoplay    -> JavaScript, patch.js
     Everything in section A                    -> light-repair.css

   Struck by the challenges and deliberately absent: LR-14, P-04, P-25, and the
   ":focus-within { mask-image: none }" clause of P-07.
   ========================================================================== */


/* ==========================================================================
   P-01  BLOCKER. Section 1.10, the universal Noto Sans typeface, does not take
   effect on any real page.

   WordPress emits global-styles-inline-css after the theme stylesheet with
   "body { font-family: Inter, system-ui, sans-serif }" and
   "h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif }". Both
   tie Jamie's element selectors on specificity and load later, so both win.
   Jamie's file no longer imports either face, so every heading falls back to
   Helvetica and every paragraph to the OS UI font, on all 76 pages.

   The fix is the higher-specificity technique the file already uses: the same
   idea as line 1347's block-gap kill, and the same ":root" prefix already used
   at line 160 for "a { text-decoration: none }".

   Measured on / at 1400px.
     Before: body   "Inter, system-ui, sans-serif"
             h1     "Space Grotesk, sans-serif"
     After:  body   "Noto Sans, system-ui, -apple-system, sans-serif"
             h1     "Noto Sans, system-ui, sans-serif"

   h5 and h6 are included, per the ruling. Jamie's own rule stops at h4, so
   without them the mega-menu h6 headings would keep the WordPress Space
   Grotesk stack and go on rendering in Helvetica.
   ========================================================================== */
:root body {
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
}
:root :is(h1, h2, h3, h4, h5, h6, .display) {
  font-family: 'Noto Sans', system-ui, sans-serif;
}


/* ==========================================================================
   P-03  BLOCKER. The industries carousel arrows push horizontal page overflow.

   The offset is "calc(var(--ind-zone) - 60px)", and the zone floors at 24px, so
   below a 1272px viewport the arrows compute a negative offset and sit outside
   the carousel, which is already the full 100vw.

   Measured on / , document scrollWidth against clientWidth:
     820px   before 856 / 820, 36px of overflow, .ind-next right: -36px
             after  820 / 820, no overflow
     1100px  before 1136 / 1100, 36px of overflow
             after  1100 / 1100, no overflow
     1400px  before 1400 / 1400, arrow left 64px. After: unchanged, still 64px.
   The overflow band runs 761px (below that the arrows are display:none) to
   1271px (at 1272px the offset reaches zero on its own).

   Flooring at 8px lets the arrows overlap the first and last card at narrow
   widths, which is the ordinary full-bleed carousel behaviour, instead of
   scrolling the whole page sideways. Above 1272px nothing changes at all, so
   the 1400px and 2200px dark baselines are untouched.

   Note, not P-03 and not fixed here: a separate 2px to 7px of overflow exists
   between roughly 430px and 600px with the arrows already hidden. Pre-existing,
   not named in section B.
   ========================================================================== */
:root .ind-prev { left: max(8px, calc(var(--ind-zone) - 60px)); }
:root .ind-next { right: max(8px, calc(var(--ind-zone) - 60px)); }


/* ==========================================================================
   P-06  Homepage heading skip, the sizing half.

   build.py promotes "One platform, end to end" from H3 to H2 and the four
   capability card titles from H4 to H3. Jamie's sizing is bound to the old tag
   names, so without this the promoted heading drops to the browser default and
   the card titles jump from 15.5px to 21px.

   Written as :is(h2, h3) and :is(h3, h4) so the rule is correct whether or not
   the markup half has run, which keeps the two agents' work independent.

   Measured on / at 1400px, before and after promotion:
     .platform-showcase-head heading  44px    ->  44px
     .platform-card title             15.5px  ->  15.5px

   The colour split is deliberate. Carrying "color: #fff" across keeps dark mode
   byte-identical, and it is the very ink LR-02 repairs, so the light guard
   below carries LR-02 across to the promoted tag too. It duplicates LR-02's
   value on purpose: without it, this block would silently re-break light mode
   on the four capability titles that LR-02 has just fixed.
   ========================================================================== */
:root .platform-showcase-head :is(h2, h3) {
  font-size: clamp(30px, 4vw, 44px);
  margin: 0 0 18px;
}
:root .platform-card :is(h3, h4) {
  font-size: 15.5px;
  margin: 0 0 6px;
  font-family: 'Noto Sans', sans-serif;
}
.platform-card h3 { color: #fff; }
/* LIGHT SCOPED. LR-02, carried across to the promoted tag.
   CO-OWNED WITH light-repair.css. That file is the authority for the LR-02
   ruling and writes the same value at the same specificity, one step later in
   the load order, so its rule is the one that actually paints. This copy is a
   safety net: it exists so the P-06 colour guard on the line above cannot
   re-break light mode if LR-02 is ever moved or removed. Change both together,
   never one alone. Verified identical: both resolve to rgb(14,19,32). */
[data-theme="light"] .platform-card h3 { color: var(--text); }


/* ==========================================================================
   P-07  Carousel mask: outer stops .3 to .6, in both the prefixed and the
   unprefixed declaration. Nothing else in the gradient moves.

   Section 1.7 specifies "full opacity inside the focus zone, 30% outside it".
   At .3 the outer cards are close to unreadable and any focus ring landing on
   one is dimmed with it. The ruling raises the floor to .6 and, on the strength
   of that, strikes the ":focus-within { mask-image: none }" clause, which fired
   on mouse click and switched off the centre-focus device entirely. That clause
   is NOT in this file.

   Measured: mask stop alpha 0.3 -> 0.6 at both ends, focus zone and ramp
   unchanged (calc(50% -/+ 486px), 40px ramp at 1400px).

   DARK MODE MOVES. The outer industries cards on the homepage brighten at every
   width. Sanctioned by P-07. Visible in home_1400 and home_390 of the baseline.
   ========================================================================== */
:root .ind-carousel {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,.6) 0, rgba(0,0,0,.6) calc(50% - var(--ind-focus) / 2 - var(--ind-ramp)),
    #000 calc(50% - var(--ind-focus) / 2), #000 calc(50% + var(--ind-focus) / 2),
    rgba(0,0,0,.6) calc(50% + var(--ind-focus) / 2 + var(--ind-ramp)), rgba(0,0,0,.6) 100%);
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,.6) 0, rgba(0,0,0,.6) calc(50% - var(--ind-focus) / 2 - var(--ind-ramp)),
    #000 calc(50% - var(--ind-focus) / 2), #000 calc(50% + var(--ind-focus) / 2),
    rgba(0,0,0,.6) calc(50% + var(--ind-focus) / 2 + var(--ind-ramp)), rgba(0,0,0,.6) 100%);
}


/* ==========================================================================
   P-08  The brand logo squashes.

   ".brand" is a flex child of ".nav" at the default "flex: 0 1 auto", and the
   logo inside it is an image with a fixed 42px height and an auto width. When
   the nav runs short of room the brand box is the item that gives way.

   Measured on / , the .brand-logo ELEMENT BOX against its correct 188 x 42
   (42px tall at the asset's 300 x 67 aspect, 4.478):
     941px   11.4 x 42     6.1 per cent of correct width
     960px   30.4 x 42    16.2 per cent
     1000px  70.4 x 42    37.4 per cent
     1024px  94.4 x 42    50.2 per cent
     1100px 170.4 x 42    90.6 per cent
     390px   81.2 x 42    43.2 per cent
     360px   51.2 x 42    27.2 per cent
     320px   11.2 x 42     6.0 per cent
   On the 941px figure the red team could not reproduce: it is real, and it is
   11.4px absolute, not 16 per cent. 941px is the single worst width on the site
   because it is one pixel above the 940px breakpoint at which the icon button
   hides and the nav links collapse into a dropdown. At 940px the box snaps
   straight back to 189.1px. A one-pixel window is easy to step over in a sweep.

   CORRECTION TO THIS BLOCK'S ORIGINAL PREMISE. It said the squashed image was
   "stretched" and "badly distorted", and that object-fit: contain repairs the
   distortion. Both halves of that are wrong, and the verification pass was
   right to call it out. logo-full.svg declares a viewBox and no
   preserveAspectRatio, so it defaults to xMidYMid meet and letterboxes inside
   whatever concrete size it is given, whichever object-fit produced that size.
   Tested directly rather than reasoned about: the same asset rendered twice at
   an 11.42 x 42 box, once object-fit: fill and once object-fit: contain, and
   the painted wordmark is a 2px band centred in the box in BOTH, identical to
   within a handful of antialiasing pixels. The mark was never distorted. It was
   always aspect-correct and always far too small.

   WHAT THIS RULE THEREFORE IS, honestly stated. It is a defensive no-op on
   today's asset: it makes the img box stop relying on the SVG's own
   letterboxing, so the aspect survives if the asset is ever replaced with one
   that has no viewBox or carries preserveAspectRatio="none". It is not a repair
   of anything a viewer can see, and it is not "byte-identical to before" at the
   widths where the header has room: the object-fit resample moves 617 pixels
   inside the 189 x 42 logo box on every page, at per-channel deltas of 1 to 6
   out of 255, which is a constant AE of about 7.9 against the dark baseline.
   Geometry is unchanged at those widths; the raster is not.

   THE LETTER OF P-08, and why it is not shipped. The ruling says "add
   flex: 0 0 auto". That was built first and measured, and it is not shippable:
     390px   page overflow 0 -> 84,  nav needs 474px of a 342px content box
     360px   page overflow 0 -> 114
     941px   page overflow 36 -> 153, nav needs 1095px of an 893px content box
     1000px  page overflow 36 -> 94
   Because body carries overflow-x: hidden, that overflow does not scroll, it
   clips: at 390px the hamburger is pushed off the right edge and the mobile
   menu becomes unreachable. The squash is the browser absorbing a header that
   genuinely does not fit, and removing the shrink only moves the failure.

   SO P-08 IS NOT FIXED, and must not be reported as fixed. Only a defensive
   guard shipped. The defect is real and it is a header capacity decision:
   the header needs about 1110px to lay out its desktop form (brand 189, links
   604, CTA group 257, container padding 48) but the mobile breakpoint is set at
   940px, roughly 170px too low, so from 941px to about 1150px the desktop nav
   is squeezed into a box that cannot hold it and the wordmark paints between
   2.5px and 38px tall. At 390px the theme toggle, the Contact pill and the
   hamburger take 261px of the 342px available, which leaves 81px for a logo
   that wants 188px. Either the breakpoint moves up to about 1150px or something
   leaves the narrow header. Both are choices, not repairs, and both are
   Jordan's. Routed with these measurements attached.
   ========================================================================== */
:root .site-header .brand-logo {
  object-fit: contain;
  object-position: left center;
}


/* ==========================================================================
   P-09  Product accents are not propagated off the homepage, the CSS half.

   Section 1.6 sets one colour per product: Digital Reporting teal,
   Data Visualisation #3b82f6, Logincident AI #F3A51E, CLARA #E24A2D. On the
   homepage Jamie binds these through an accent custom property, but every rule
   that reads it is scoped inside ".products-grid", which exists on the homepage
   and nowhere else. So on /products/ all four cards fall back to the shared
   teal, except the CLARA card, which wears Logincident AI's amber through
   ".card.highlight".

   Measured on /products/ at 1400px in dark, before:
     Digital Reporting   tag rgb(69,211,182)  link rgb(37,181,154)  icon teal
     Data Visualisation  tag rgb(69,211,182)  link rgb(37,181,154)  icon teal
     Logincident AI      tag rgb(69,211,182)  link rgb(37,181,154)  icon teal
     CLARA               tag rgb(69,211,182)  link rgb(243,165,30)  icon amber
   And after, on the same four cards:
     Digital Reporting   tag, link and icon all rgb(37,181,154)   --teal
     Data Visualisation  tag, link and icon all rgb(59,130,246)   #3b82f6
     Logincident AI      tag, link and icon all rgb(243,165,30)   #F3A51E
     CLARA               tag, link and icon all rgb(226,74,45)    #E24A2D
   Light mode on /products/ is deliberately untouched by this block: verified
   unchanged at #0c7563, #0058e9, #8a5a00 and #c0290c, which are light-repair's
   inks, and the homepage grid is unchanged in both themes.

   (a) Unscope the accent binding. Each fallback reproduces Jamie's existing ink
   exactly, so any card with no accent in scope is byte-identical in both themes
   and on all 76 pages. color-mix at 12 per cent, 25 per cent and 35 per cent of
   teal resolves to the same rgba values Jamie hard-coded.

   No ":root" prefix on the ink rules in this block, on purpose. They are written
   to sit one step BELOW anything light-repair.css scopes under
   [data-theme="light"], so section A keeps the last word on light-mode ink. They
   still beat Jamie's own rules, which they tie with, because this file loads
   after his. */
.card .tag { color: var(--acc, var(--purple-2)); }
.card .card-link { color: var(--acc, var(--teal)); }
.prod-cta { color: var(--acc, var(--teal)); }
/* Jamie's ".card.highlight .card-link" is (0,2,0) and would otherwise keep the
   CLARA card's link amber. Matched at the same specificity so it wins on order
   here, and still loses to light-repair's (0,2,1) light rule.
   Measured on /products/ in dark: rgb(243,165,30) becomes rgb(226,74,45). */
.card.highlight .card-link { color: var(--acc, var(--orange)); }

/* The icon chip and the accent eyebrow. These two were dark scoped in the first
   pass, on the reasoning that binding the light glyph to the raw accent would
   drop it under the non text bar. That reasoning was right about the INK and
   wrong about the CHIP, and shipping both halves dark scoped left /products/
   with four teal glyphs in light against teal, blue, amber and red in dark, on
   cards whose tag, link and border were already per product. Measured before
   this correction, all four .icon glyphs in light: rgb(12,117,99). The CLARA
   card was the worst reading on the page, a teal glyph on Jamie's amber chip
   inside a red bordered card.

   The correction splits the declaration the way LR-07 splits the token.
     The chip FILL and BORDER are theme neutral and bind to var(--acc). Both are
     the same declared value in light and in dark, which is exactly what LR-07's
     ruling protects: "--acc stays on brand values in both themes", so the
     product identity chip does not differ between themes.
     The GLYPH is ink, so light-repair.css light scopes it to var(--acc-ink) at
     (0,4,0), one step above these rules. Section A keeps the last word on ink.

   Measured on /products/ at 1400px light after the split, glyph against its own
   composited 12 per cent chip on the card:
     Digital Reporting  #0c7563 on #e5f6f3  5.03:1
     Data Visualisation #0058e9 on #e8f0fe  5.60:1
     Logincident AI     #8a5a00 on #fef4e4  5.05:1
     CLARA              #c0290c on #fdece9  5.14:1
   All four clear the 3:1 graphical object bar and the 4.5:1 text bar, and each
   card now carries one colour across its chip, tag, link and border.

   DARK IS UNCHANGED by removing the dark scope. These rules already applied in
   dark; dropping ":root:not([data-theme='light'])" only lowers them from (0,5,0)
   to (0,3,0), which still beats Jamie's ".card .icon" at (0,2,0) and ties his
   ".card.highlight .icon" at (0,3,0), where this file wins on load order. */
/* The icon rule is written against the four product hrefs rather than against
   ".card .icon". A general form was built first and measured: at (0,4,0) it
   outranks Jamie's ".products-grid .card .icon" and replaced the homepage's
   gradient icon chips with a flat tint on all four cards. Verified after this
   rewrite: the homepage chips are back to "gradient" in both themes, and these
   selectors match exactly the four cards on /products/ and nothing else. */
.card[href^="/digital-reporting"] .icon,
.card[href^="/data-visualisation"] .icon,
.card[href^="/logincident-ai"] .icon,
.card[href^="/clara"] .icon {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border-color: color-mix(in srgb, var(--acc) 25%, transparent);
  color: var(--acc);
}
.eyebrow.accent {
  color: var(--acc, var(--purple-2));
  border-color: color-mix(in srgb, var(--acc, var(--teal)) 35%, transparent);
}

/* (b) Bind the accent from the card's own destination. This reaches /products/
   with no markup change and would reach any future page that links to a product
   from a standard card. Verified: these four selectors match exactly four
   elements across all 76 pages, all of them on /products/. The homepage cards
   are <article> elements with no href, so they keep taking their accent from
   Jamie's own prod-teal, prod-blue, prod-purple and highlight classes, which
   set the identical values. */
.card[href^="/digital-reporting"]  { --acc: var(--teal); }
.card[href^="/data-visualisation"] { --acc: #3b82f6; }
.card[href^="/logincident-ai"]     { --acc: #F3A51E; }
.card[href^="/clara"]              { --acc: #E24A2D; }

/* (c) Unscope CLARA's own accent from ".prod". Jamie sets it at
   ".card.prod.highlight", so it never reaches the /products/ card, which
   carries "highlight" without "prod". The ":not(.prod)" is what keeps the
   homepage untouched: it is the only other ".card.highlight" on the site, it
   sits inside .products-grid, and its border and shadow are Jamie's grid
   treatment rather than this one. The hover companion restores the base
   ".card:hover" pair, which the raised specificity would otherwise swallow. */
.card.highlight:not(.prod) {
  --acc: #E24A2D;
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 0 40px -14px color-mix(in srgb, var(--acc) 40%, transparent);
}
.card.highlight:not(.prod):hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

/* (d) Give /clara/ and /logincident-ai/ their section 1.6 accents at page level,
   hooked on the WordPress body page-id class, which is stable and needs no
   markup change. Nothing else on the site sets this custom property on <body>,
   and its only consumers are the rules above plus .products-grid and
   .platform-card, neither of which appears on either page.

   DARK MODE MOVES on those two pages. Sanctioned by P-09.

   Deliberately NOT touched, and flagged in the report: the bespoke demo widget
   palettes on those pages (.clara-hero at #2FA8A8, .lai-hero at #4A82C4) are
   pre-existing, are not Jamie's, and repainting several dozen hard-coded rgba
   rules inside them would be a redesign rather than a conformance fix. */
body.page-id-12 { --acc: #E24A2D; }  /* /clara/ */
body.page-id-11 { --acc: #F3A51E; }  /* /logincident-ai/ */

/* .badge-beta is deliberately left alone. Jamie accents it inside
   .products-grid, but unscoping it here would outrank Jamie's own light-mode
   badge rule and so break LR-11, and owner decision 6 may remove the badges
   altogether. Flagged rather than fixed. */


/* ==========================================================================
   P-17  scroll-snap-align cancels the track's inline padding.

   ".ind-track" carries "padding: 4px var(--ind-zone) 28px" and each card
   carries "scroll-snap-align: start". Snapping aligns to the snapport, which is
   the scrollport reduced by scroll-padding, and scroll-padding is unset. So the
   browser resolves the initial snap by scrolling the padding away and card 1
   sits flush to the viewport edge at every width.

   Measured on / , .ind-track scrollLeft on load:
     1400px  before 124 with scroll-padding-inline "auto"
             after    0 with scroll-padding-inline 124px
     390px   before  24  ->  after 0

   DARK MODE MOVES. The carousel content shifts right by the zone width on first
   paint, which is the padding Jamie specified becoming visible. Sanctioned by
   P-17, and visible in home_1400 and home_390 of the baseline.

   Interacts with P-18: the pagination maths in patch.js must subtract the same
   inline start padding, which is what P-18 says. After this fix the track's
   resting scrollLeft is 0 rather than 124, so the two changes agree.
   ========================================================================== */
:root .ind-track { scroll-padding-inline: var(--ind-zone); }


/* ==========================================================================
   P-19  The centre-focus mask has no effect between 761px and 971px.

   The focus zone is a fixed "calc(312px * 3 + 18px * 2)", which is 972px, from
   761px upward. Below 972px of viewport the opaque band is wider than the
   viewport, so the whole carousel is inside it and the device does nothing at
   all. Section 1.7 requires a vw-relative value at the carousel's mobile
   breakpoint; this carries the same idea up to the point where the fixed value
   starts to fit.

   Measured on / , the resolved mask:
     820px  before  #000 from -76px to 896px, so the entire 0 to 820 viewport is
                    fully opaque and no card is dimmed
            after   focus zone 580px, dimmed bands 120px each side
     1400px before  focus zone 972px  ->  after 972px, identical
     2200px before  focus zone 972px  ->  after 972px, identical
     390px  Jamie's own 82vw rule still owns this width, untouched

   Held above 761px on purpose so Jamie's 82vw mobile rule, which loads earlier
   and would otherwise be overridden, keeps the 390px baseline exactly as it is.
   The 240px subtrahend leaves 120px of dimmed band each side, 40px of which is
   the ramp, which is the least that reads as an effect. The two values cross at
   1212px, so the fixed 3-card zone still governs every desktop width, which is
   what section 1.7 insists on.

   DARK MODE MOVES between 761px and 1211px only. No baseline width is affected.
   ========================================================================== */
@media (min-width: 761px) {
  :root .ind-carousel {
    --ind-focus: min(calc(312px * 3 + 18px * 2), calc(100vw - 240px));
  }
}


/* ==========================================================================
   P-20  WordPress block-gap adds an unspecified 24px at section boundaries.

   global-styles-inline-css emits ":where(.wp-site-blocks) > * { margin-block-
   start: 24px }" and ":root :where(.is-layout-flow) > * { margin-block-start:
   24px }". Section 1.4 is explicit that each section's own padding is complete
   and is neither divided nor shared, so this 24px is unspecified spacing that
   Jamie never asked for, sitting on top of his rhythm at every boundary.

   Neutralised with the technique the file already uses at line 1347, where the
   same block-gap rule had to be beaten with !important because it ties on
   specificity and loads later.

   Measured, margin-block-start on the section-boundary children:
     /            before  3 sections at 24px      ->  after  0
     /products/   before  entry-content 24px, footer 24px, and 2 of 3 sections
                          inside entry-content at 24px
                  ->  after  0 on all of them

   Interacts with P-02, which build.py fixes. The surplus </div> reparented four
   of the homepage's seven sections onto <body>, where the block-gap rule does
   not reach, which is why the homepage gap was inconsistent: three boundaries
   at 24px and four at 0. Once P-02 lands, all seven would take the 24px, so
   this rule matters more after that fix, not less.

   DARK MODE MOVES. Every page shortens by 24px per section boundary. Sanctioned
   by P-20, and visible in all 32 baseline shots as a vertical shift.
   ========================================================================== */
:root .wp-site-blocks > *,
:root .entry-content > section,
:root .entry-content > .section-pad,
:root .entry-content > .page-hero {
  margin-block-start: 0 !important;
}

/* ==========================================================================
   P-08b  The brand logo collapses between 941px and about 1150px.
   ROOT-CAUSE FIX, replacing the defensive guard above.

   The build agent correctly refused the literal ruling ("add flex: 0 0 auto"),
   because removing the shrink converts a squashed logo into a clipped header:
   body carries overflow-x: hidden, so at 390px the hamburger is pushed off the
   right edge and the mobile menu becomes unreachable. It measured the header's
   desktop form as needing about 1110px (brand 189, links 604, CTA group 257,
   container padding 48) against a mobile breakpoint set at 940px. So from
   941px to roughly 1150px the desktop nav is asked to fit in a box that cannot
   hold it, and the browser takes the difference out of the only flexible item,
   the logo, which measures 11.4px wide at 941px against a correct 188px.

   The defect is the breakpoint, not the logo. This extends Jamie's own
   @media (max-width: 940px) nav treatment, declaration for declaration, across
   the band where his desktop nav does not fit. Nothing new is designed: the
   mobile nav he built simply starts 210px earlier.

   Ground: responsive behaviour. An 11px logo on all 76 pages across a
   half-screen width band is not a design decision anyone made.
   Jamie could not have seen it: his reference file was verified at 1400, 2200,
   820 and 390, and this band falls between two of those points.
   ========================================================================== */
@media (min-width: 941px) and (max-width: 1150px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 16px 24px 24px;
    transform: translateY(-130%); transition: transform 0.35s var(--ease); z-index: 90;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 14px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .nav-icon-btn { display: none; }

  .nav-links .has-menu { display: block; }
  .caret { display: none; }
  .nav-links .menu {
    position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0;
  }
  .nav-links .menu-inner,
  .nav-links .menu-inner.menu-mega {
    grid-template-columns: 1fr; min-width: 0; gap: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 12px;
  }
  .nav-links .menu-item { padding: 10px 14px; }
  .menu-item .mi-desc { display: none; }
  .menu-group h6 { padding: 10px 12px 4px; }
}

/* ==========================================================================
   ROLLOUT  Jamie's universal rules 1.3 and 1.4, applied sitewide.
   DECIDED 6 September. Previously behind a toggle, now the default.

   His own changelog section 4 leaves this open, and his covering email argues
   for it directly: "once those are applied across the site it should polish up
   the other page templates quite a bit as well without us needing to
   individually redesign everything." That is the author of the rule saying
   what he intended it to reach.

   Reach: .section-pad on 68 pages, .card on 19.
   ========================================================================== */

/* 1.4  Section rhythm. His tokens, on the shared wrapper the other pages use. */
.section-pad {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}
/* His own exceptions, kept deliberately rather than by accident. */
.hero + .section-pad,
.page-hero + .section-pad { padding-top: 12px; }
.trust-strip { padding-top: 40px; padding-bottom: 40px; }

/* 1.3  Standard card surface.
   IMPORTANT, and the reason this needed thought rather than a find-and-replace.
   --bg-2 does not hold the same RELATIONSHIP in both themes:
       dark   page #05060d, --bg-2 #080a14   the card sits LIGHTER than the page
       light  page #f3f5fa, --bg-2 #e9edf6   the card sits DARKER than the page
   So applying his literal token in light inverts the lift he designed, and it
   also collides with .section-black, which LR-01 correctly put on --bg-2
   because in dark the band sits DEEPER than the page. Cards and bands would
   have computed the same colour and the page would have gone flat.

   The rule is therefore implemented as the relationship he designed, not the
   literal value: cards lift off the page in both themes.
       dark   var(--bg-2)   #080a14 against #05060d   1.025:1 lift
       light  var(--surface) #ffffff against #f3f5fa  1.050:1 lift
   and the band stays deeper than the page in both, so the three surfaces stay
   distinct. This is his section 1.3 "match the tonal relationship" principle
   applied to his own token.

   His card depth gradient at styles.css line 775 is PRESERVED, not deleted;
   only its stops move onto the new surface family. */
.card:not(form) {
  background: var(--bg-2);
  border: 1px solid var(--border);
}
[data-theme="light"] .card:not(form) {
  background: var(--surface);
}
.card:not(form) {
  background-image: linear-gradient(180deg, var(--bg-2) 0%, var(--surface-2) 100%);
}
[data-theme="light"] .card:not(form) {
  background-image: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

/* .section-black is deliberately NOT extrapolated. His rule 1.5 requires each
   page's real section order to be listed and alternated from existing dark
   sections as fixed points, and explicitly warns against a blind
   every-other-section rule. That needs a per-page pass, not a stylesheet. */

/* ==========================================================================
   HEADER BOUNDARY IN LIGHT MODE.  DECIDED 6 September.
   Jamie removed .site-header's border-bottom deliberately in section 1.2, and
   in dark that is right: the header is rgba(5,6,13,.72) over content and the
   backdrop-filter carries the edge.
   In light the header computes rgba(243,245,250,.82), which composites to
   exactly the page ground, so at rest there is no tonal edge of any kind,
   measured 1.00:1. On a sticky header that is a usability problem, not a
   style one, and it only exists in the theme he could not see.
   Light only. His dark header is untouched.
   ========================================================================== */
[data-theme="light"] .site-header { border-bottom: 1px solid var(--border); }

/* source: assets/css/patches/light-repair.css */
/* =========================================================================
   Logincident light mode repair
   Section A of "00 Review/IMPLEMENTATION DECISIONS.md", 6 September 2026.

   Loads AFTER the theme stylesheet (Jamie's styles.css), so source order is
   available as a tie breaker. Where a rule below has to beat one of Jamie's
   own light rules, the specificity is raised deliberately and the beaten
   selector is named in the comment.

   SCOPE RULE
   Every rule that paints is scoped [data-theme="light"]. Three rules are theme
   neutral, and none of them can change a pixel in dark:
     1. the forced colours outline in LR-10, an outline of colour transparent,
        justified where it is written;
     2. and 3. the two --acc-ink mirror declarations in LR-07, which declare a
        custom property and nothing else. Every rule that reads --acc-ink is
        light scoped, so in dark the token is computed and never consumed.
   Verified rather than asserted. With this file toggled on and off in dark mode
   on the homepage, /products/ and a glossary article, a diff of colour,
   background-color, background-image, all four border colours, box-shadow,
   outline-color, fill, stroke and opacity across every element and its
   ::before, ::after, ::placeholder and ::marker returned zero differences:
   0 of 570, 0 of 383 and 0 of 414 elements. In dark the only selectors in this
   file that match anything at all are the two custom property mirrors.

   HOW THE NEW COLOURS WERE DERIVED
   No new palette is invented. Jamie already publishes two light mode "inks",
   #0c7563 for teal and #8a5a00 / #9a6300 for amber. Read as HSL, his method is:
   hold the accent's hue, raise saturation to the ceiling, then drop lightness.
     teal  #25b59a  H169 S66 L43  becomes #0c7563  H170 S81 L25
     amber #f3a51e  H38  S90 L54  becomes #8a5a00  H39  S100 L27
   Both land at 4.79:1 and 5.05:1 on the light card ground var(--bg-2) #e9edf6.
   Re running that method on his own accents, solving lightness for 5.0:1 on
   #e9edf6, reproduces his published values to within two RGB steps
   (teal returns #0c7461, amber returns #8d5900). Applied to the two accents he
   never gave a light ink:
     blue #3b82f6  H217 S91 L60  becomes #0058e9  H217 S100 L46   5.01:1
     red  #e24a2d  H10  S76 L53  becomes #c0290c  H10  S88  L40   5.01:1
   So all four product inks sit in a 4.79:1 to 5.05:1 band on #e9edf6, which is
   the band Jamie's own two already occupied.

   Where Jamie has two candidate values, the one that passes AA is used rather
   than a third being invented. His product tag amber #9a6300 measures 4.31:1 on
   var(--bg-2), under the 4.5:1 body text threshold; his other published amber
   #8a5a00 measures 5.05:1. #8a5a00 is used.

   All ratios below were measured by compositing every semi transparent layer
   over what is actually painted behind it, then verified in the browser against
   getComputedStyle on the running prototype.

   Struck and NOT implemented: LR-14, P-04, P-25, and P-07's :focus-within
   clause.
   ========================================================================= */


/* =========================================================================
   LIGHT TOKEN REMAPS
   LR-08 and LR-09. These extend Jamie's own [data-theme="light"] token block
   at styles.css lines 549 to 561, which sets the surface, border, text and
   shadow tokens but leaves --text-3, --teal-2 and --purple-2 on their dark
   values. Same selector, later in source order, so it wins the tie.
   ========================================================================= */
[data-theme="light"] {

  /* LR-08. Overrides the missing light value for --text-3, which stays on the
     dark token #6c7390 through Jamie's light block and computes #707a93 only
     because his light block never touches it.
     Measured on var(--bg) #f3f5fa: 3.93:1 before, 5.33:1 after.
     Measured on var(--bg-2) #e9edf6: 3.66:1 before, 4.96:1 after.
     This token carries footer column headings, the trust strip label, article
     bylines, table "no" cells, form placeholders and the carousel captions, all
     of which were failing the 4.5:1 body text threshold in light. */
  --text-3: #5b657f;

  /* LR-09. Overrides styles.css line 20 (--teal-2) and line 27 (--purple-2,
     which is an alias of --teal-2). Both stayed on #45d3b6 in light.
     Measured on var(--bg) #f3f5fa: 1.71:1 before, 5.15:1 after.
     Measured on var(--surface) #ffffff: 1.87:1 before, 5.61:1 after.
     Both are declared explicitly rather than relying on the alias, so the
     intent survives anyone later editing the alias.
     Named consumers the red team found that neither spec listed, all now
     repaired by this one remap: .card .icon (line 296), a.card.news-card:hover
     h3 (line 1171), .panel .log .tick svg (line 1088) and
     details.faq-item summary:hover (line 1496). Also .pull-quote (line 662),
     .eyebrow.accent (line 86), .card .tag (line 302) and .article .refs a
     (line 1167). Every one of them paints on a light surface in light mode, so
     none of them is a dark panel casualty.
     Measured on /resources/: .card .icon glyph 1.54:1 before, 4.63:1 after;
     .card .tag 1.71:1 before, 5.15:1 after; details.faq-item summary::after
     glyph on /glossary/ 1.87:1 before, 5.61:1 after; .article .refs a 1.71:1
     before, 5.15:1 after.
     One exception to note rather than fix here: on /products/ the conformance
     pass binds .card .icon to the card's own product accent, which outranks
     --purple-2, so three of those four icons stay under 3:1. That is P-09's
     surface, not LR-09's, and it is flagged for the integrator. */
  --teal-2: #0c7563;
  --purple-2: #0c7563;
}

/* LR-08 and LR-09, the always dark island exceptions.
   Both rulings say to keep Jamie's own exceptions for the always dark glass
   panels. An always dark island is a container whose ground is a fixed dark
   hex, or a dark scrim over a photograph, rather than a theme token, so it
   paints the same in light as it does in dark. A token remapped for light
   surfaces is wrong inside one, and the remap has to be undone there.

   These exceptions are written per element, not per container, because none of
   the three containers involved is uniformly dark. Verified below.

   1. .lai-field, styles.css line 1396, background #070b14.
      --text-3 consumer: .lai-field-lbl.
      Measured on #070b14: 4.59:1 before the remap, 3.39:1 with it, 4.59:1 with
      this exception. Deliberately unchanged from Jamie's light value.

   2. .lai-foot, styles.css line 1437, the caption under the Logincident AI
      hero. It sits at the bottom of .lai-hero, whose background is
      linear-gradient(180deg, var(--surface) 0%, #080c16 100%), so in light the
      panel runs white at the top and near black at the bottom. The foot is at
      the dark end.
      Pixel truth at 1400px light, ground read from the rendered gradient behind
      the caption, #181c25:
        --text-3 #707a93, Jamie's light value   3.97:1
        --text-3 #5b657f, LR-08's remap         2.93:1
      So the remap is a regression here and the exception restores 3.97:1.
      NOT FIXED and routed: 3.97:1 is still under 4.5:1. It is under 4.5:1 in
      dark as well, on the same painted ground, so it is a pre-existing failure
      of Jamie's own caption rather than anything this pass introduced, and
      lifting it in light alone would make an always dark panel read differently
      between the two themes for no reason a viewer could see.

      The verification report proposed moving this exception up to .lai-hero.
      Measured, that would be wrong: the other four --text-3 consumers on that
      panel sit on its LIGHT half or on .lai-card, which is var(--surface-2),
      and the remap is what makes them pass. Pixel truth at 1400px light, ground
      then #5b657f then #707a93:
        .lai-sources-lbl  #f6f6f6  5.38:1  3.97:1
        .lai-ins-lbl      #e5e5e6  4.62:1  3.41:1
        .lai-card-kick    #f6f8fc  5.47:1  4.04:1
        .lai-explain      #f6f8fc  5.47:1  4.04:1
      A container wide exception would push all four back under the bar. Hence
      the single element selector.

   3. .panel.media .glass, styles.css line 1098, a rgba(11,14,24,0.6) scrim with
      a backdrop blur over a photograph, and Jamie paints every ink inside it
      white or near white in both themes, which is what makes it an island.
      --teal-2 consumers inside it: .chip svg at line 1105 and .chip.on at 1106.
      Pixel truth on /industries/construction/ at 1400px light, the chip "40s on
      phone", ground read from the chip's own padding strip, rgb(24,54,57):
        --teal-2 #45d3b6, Jamie's value  6.92:1
        --teal-2 #0c7563, LR-09's remap  2.30:1
      Confirmed that this is the whole exposure: all three .panel .chip.on
      elements on the site, on /industries/construction/, /engineering/ and
      /public-sector/, are inside .glass, and no .chip.on anywhere sits on a
      light ground. --purple-2 is carried with --teal-2 because Jamie defines it
      as var(--teal-2) and the two must not come apart inside the island.
      Nothing outside .glass on those pages is touched. */
[data-theme="light"] .lai-field,
[data-theme="light"] .lai-foot { --text-3: #707a93; }
[data-theme="light"] .panel.media .glass {
  --teal-2: #45d3b6;
  --purple-2: #45d3b6;
}


/* =========================================================================
   LR-01  Alternating section band
   Overrides .section-black at styles.css line 1673, specificity (0,1,0),
   beaten here at (0,2,0).
   Before: rgba(0,0,0,0.65) over var(--bg) #f3f5fa composites to #555658.
     Section headings var(--text) #0e1320 on #555658 measured 2.52:1.
     Lead paragraphs var(--text-2) #46506a on #555658 measured 1.09:1.
   After: var(--bg-2) #e9edf6.
     Section headings 15.81:1. Lead paragraphs 6.85:1.
   var(--bg-2) is a slight recession from var(--bg), which is the same
   relationship the band has in dark mode. The alternative, var(--surface) white
   bands, is owner decision 4 and is a one token change from here.
   ========================================================================= */
[data-theme="light"] .section-black { background: var(--bg-2); }


/* =========================================================================
   LR-02  Capability card titles
   Overrides .platform-card h4 at styles.css line 1624, which hardcodes #fff.
   Specificity (0,1,1), beaten here at (0,2,1).
   The card ground is var(--bg-2) #e9edf6, verified in the browser.
   Before: #ffffff on #e9edf6, 1.17:1. After: var(--text) #0e1320, 15.81:1.
   Four titles on the homepage.
   Note on measuring this one in the prototype: P-06 in the conformance pass
   renames these titles from h4 to h3, so Jamie's #fff rule stops matching and
   the title already measures 15.81:1 with this file switched off. The 1.17:1
   figure is Jamie's handover as delivered, with the h4 markup his stylesheet
   was written against.
   The selector carries h3 as well as h4 because P-06 in the conformance pass
   promotes these titles from h4 to h3 and reissues Jamie's colour on the new
   tag name. :is() keeps this rule correct either way and keeps the file
   self sufficient. The conformance pass also ships its own light scoped copy of
   this fix for h3; the two are identical in effect, and this one is the
   authority for the LR-02 ruling.
   ========================================================================= */
/* CO-OWNED WITH conformance.css, which writes the same value on
   [data-theme="light"] .platform-card h3 as a guard against its own P-06 colour
   fix. This rule is the authority and wins on source order; the :is() form is
   what makes it survive P-06's h4 to h3 promotion in build.py. Change both
   together, never one alone. */
[data-theme="light"] .platform-card :is(h3, h4) { color: var(--text); }


/* =========================================================================
   LR-03  Hero badge eyebrow
   Overrides .eyebrow.hero-badge at styles.css line 256, which sets color:#fff.
   Specificity (0,2,0), beaten here at (0,3,0).
   Decoupled from LR-01: the component paints its own interior through
   ::after at z-index -1 with background:var(--bg-2), so the ground is
   #e9edf6 for all five instances regardless of the band behind them. Confirmed
   in the browser, computed rgb(233, 237, 246) on every instance.
   Before: #ffffff on #e9edf6, 1.17:1. After: var(--text) #0e1320, 15.81:1.
   The gradient ring itself (::before) is untouched. LR-14, retuning that ring,
   is struck.
   ========================================================================= */
[data-theme="light"] .eyebrow.hero-badge { color: var(--text); }


/* =========================================================================
   LR-04  Header "Contact us"
   Overrides .btn-header-contact at styles.css line 133, which sets color:#fff.
   Specificity (0,1,0), beaten here at (0,2,0).
   The pill's interior is painted by ::after with background:var(--bg-2), and by
   var(--surface) on hover (styles.css line 143).
   Before, at rest: #ffffff on #e9edf6, 1.17:1.
   Before, on hover: #ffffff on #ffffff, 1.00:1 exactly.
   After, at rest: var(--text) #0e1320 on #e9edf6, 15.81:1.
   After, on hover: var(--text) on #ffffff, 18.54:1.
   The multicolour gradient ring is untouched. Keeping this text white is owner
   decision 1; reversing this is deleting one line.
   ========================================================================= */
[data-theme="light"] .btn-header-contact { color: var(--text); }


/* =========================================================================
   LR-05  "One platform" atmospheric glow
   Overrides .platform-showcase-glow at styles.css line 1596, specificity
   (0,1,0), beaten here at (0,2,0).
   Jamie's gradient is
     linear-gradient(90deg, rgba(127,101,188,.5), #100F17 51%, #0C0B11 100%)
   Both dark stops are dark mode surface values, so on a light page the layer
   paints a grey smudge behind the laptop, which is what makes the section read
   as a white box with a dirty shadow in it.
   Not a text contrast item, so it is measured as a stop against the page it
   sits on, with the layer's own opacity .85 applied and the 85px blur left off,
   which makes the figures an upper bound on how dark any pixel gets.
     stop 2  #100F17 composites to #323239, 11.66:1 against var(--bg) #f3f5fa
     stop 3  #0C0B11 composites to #2f2e34, 12.33:1
   Both stops move to var(--bg), which composites to #f3f5fa, 1.00:1, so the
   glow dissolves into the page exactly as Jamie's dark stops dissolve into his
   dark page.
   The purple stop and its 0.5 alpha are reproduced verbatim. It composites to
   #c2b8e0, 1.71:1, a soft tint, which is the effect Jamie intended.
   Only the background is redeclared: background-size, background-position,
   background-repeat, filter, opacity and the mask all continue to inherit from
   his rule. Verified in the browser: computed backgroundImage becomes
   linear-gradient(90deg, rgba(127,101,188,0.5) 0%, rgb(243,245,250) 51%,
   rgb(243,245,250) 100%).
   ========================================================================= */
[data-theme="light"] .platform-showcase-glow {
  background: linear-gradient(90deg, rgba(127, 101, 188, 0.5) 0%, var(--bg) 51%, var(--bg) 100%);
}


/* =========================================================================
   LR-06  Trust strip, band and label only
   Band overrides .trust-strip at styles.css line 1556 (background:#000000),
   specificity (0,1,0), beaten here at (0,2,0).
   Label overrides .trust-strip .trusted-tag at styles.css line 1565
   (color: rgba(255,255,255,0.45)), specificity (0,2,0), beaten at (0,3,0).

   Band before: a full bleed pure black slab on an otherwise light page.
   Band after: var(--bg-2) #e9edf6, the same slight recession from var(--bg)
   that LR-01 gives the alternating bands, and the same relationship the strip
   has to the page in dark mode.

   Label before: rgba(255,255,255,0.45) over #000000 composites to #737373,
   4.43:1 against the black band, which fails the 4.5:1 body text threshold.
   Label after: var(--text-3), which LR-08 sets to #5b657f, on #e9edf6, 4.96:1.
   That is not a new colour: it is the value Jamie's own base .trusted-tag rule
   at styles.css line 807 already asks for. His white alpha override existed
   only because the strip was black. With the strip light, reverting to his own
   token is the smallest possible repair.

   LOGO TREATMENT IS STRUCK and is NOT touched here. Jamie's grey filter at
   styles.css lines 1561 to 1566 stays exactly as written. Flattening the logos
   to black measures 8.57:1 and would make them the loudest thing on the page,
   and a CSS filter over a trademark is a modification while BMW and AXA
   clearance is unconfirmed. Owner decision 2.
   ========================================================================= */
[data-theme="light"] .trust-strip { background: var(--bg-2); }
[data-theme="light"] .trust-strip .trusted-tag { color: var(--text-3); }


/* =========================================================================
   LR-07  Split the accent token
   Jamie's four product accents each drive two very different jobs from one
   variable, --acc: a solid identity chip fill, its drop shadow, the card hover
   border and the ambient card glow (all decorative, all correct in both
   themes), and three pieces of small text (all illegible in light). Remapping
   --acc itself would recolour the identity of all four products in light mode.
   So --acc keeps Jamie's brand values in both themes, and a second token,
   --acc-ink, carries the text colour.

   ON THE :root FORM. The ruling asks for "--acc-ink: var(--acc) at :root".
   Declared literally at :root that cannot work, and would break dark mode:
   custom properties inherit their COMPUTED value, so var(--acc) is substituted
   once, at :root, where --acc is not defined. The result is the guaranteed
   invalid value, which every card then inherits instead of its own accent, and
   color: var(--acc-ink) would compute to unset. The mirror is therefore
   declared on the same elements that declare --acc, which is the only place it
   can resolve per card. The :root default below is kept for the case of an
   element that carries no accent class at all.

   The mirror declarations are theme neutral and provably inert today: they
   define a custom property and nothing else, and every rule that reads
   --acc-ink in this file is scoped [data-theme="light"]. They exist so that a
   developer lifting this into the real theme can change styles.css lines 949,
   953 and 958 to var(--acc-ink) directly and have dark mode resolve, byte for
   byte, to the same var(--acc) it resolves to now.
   ========================================================================= */
:root { --acc-ink: var(--acc); }
.prod-teal,
.prod-blue,
.prod-purple,
.card.prod.highlight { --acc-ink: var(--acc); }

/* LR-07, the light inks. Derivation is in the file header. */
[data-theme="light"] .prod-teal          { --acc-ink: #0c7563; }  /* Digital Reporting, from --teal   #25b59a */
[data-theme="light"] .prod-blue          { --acc-ink: #0058e9; }  /* Data Visualisation, from        #3b82f6 */
[data-theme="light"] .prod-purple        { --acc-ink: #8a5a00; }  /* Logincident AI, from            #F3A51E */
[data-theme="light"] .card.prod.highlight { --acc-ink: #c0290c; } /* CLARA, from                     #E24A2D */

/* LR-07 consumer 1 of 3: the product tag.
   Overrides styles.css line 949 (.products-grid .card .tag, colour var(--acc)),
   and Jamie's own three light tag overrides at lines 1377 to 1379, which are
   specificity (0,5,0). The (0,5,0) forms below are written out so each one wins
   its tie on source order. Line 1379 carries !important, so that one selector
   has to answer with !important; it is the only !important in this block and it
   exists solely to unseat that declaration.
   Line 1379 also paints CLARA #9a6300, an amber tuned for CLARA's historic
   orange. Jamie flags that himself as stale in changelog section 4. Routing the
   tag through --acc-ink corrects it to the red family in one move.
   Measured on the card ground var(--bg-2) #e9edf6:
     Digital Reporting  #25b59a  2.20:1  becomes #0c7563  4.79:1
     Data Visualisation #3b82f6  3.14:1  becomes #0058e9  5.01:1
     Logincident AI     #F3A51E  1.75:1  becomes #8a5a00  5.05:1
     CLARA              #9a6300  4.31:1  becomes #c0290c  5.03:1 (and correct hue) */
[data-theme="light"] .products-grid .card .tag,
[data-theme="light"] .products-grid .card.prod-teal .tag,
[data-theme="light"] .products-grid .card.prod-blue .tag,
[data-theme="light"] .products-grid .card.prod-purple .tag { color: var(--acc-ink); }
[data-theme="light"] .products-grid .card.prod.highlight .tag { color: var(--acc-ink) !important; }

/* LR-07 consumer 2 of 3, carrying LR-11.
   Overrides styles.css lines 953 to 954 (.products-grid .card .badge-beta),
   specificity (0,3,0), beaten here at (0,4,0).
   LR-11: Jamie already wrote the correct light treatment for this component at
   styles.css line 1365, but at (0,2,0) it has never applied inside a product
   card, so the badge kept a raw accent tint. Rather than layering a third
   treatment on top, his own values are reissued at a specificity that reaches.
   Ground: rgba(37,181,154,0.14) over #e9edf6 composites to #cee5e9.
   Measured, Logincident AI badge: #F3A51E on its own 14% amber tint #eae3d8,
   1.61:1 before; #8a5a00 on #cee5e9, 4.52:1 after.
   Measured, CLARA badge: #E24A2D on its own 14% red tint #e8d6da, 2.87:1
   before; #c0290c on #cee5e9, 4.49:1 after.
   If the Beta badges are removed under owner decision 6, delete this block. */
[data-theme="light"] .products-grid .card .badge-beta {
  color: var(--acc-ink);
  background: rgba(37, 181, 154, 0.14);
  border-color: rgba(12, 117, 99, 0.4);
}

/* LR-07 consumer 3 of 3: the card's "Learn more" link.
   Overrides styles.css line 958 (.products-grid .prod-cta, colour var(--acc)),
   specificity (0,2,0), beaten here at (0,3,0).
   Measured on var(--bg-2) #e9edf6, same four before and after figures as the
   tag: 2.20, 3.14, 1.75 and 3.41 become 4.79, 5.01, 5.05 and 5.03. */
[data-theme="light"] .products-grid .prod-cta { color: var(--acc-ink); }

/* LR-07, the .platform-card half. Pure ink, so it keeps the plain remap of
   --acc as the ruling requires: the only things a platform card's accent drives
   are the icon glyph colour, a 14% tint behind it and a shadow.
   Overrides styles.css lines 1626 to 1629, specificity (0,2,0), beaten at
   (0,3,0).
   Measured, icon glyph on its own 14% tint over var(--bg-2):
     teal   #25b59a on #cee5e9  1.96:1  becomes #0c7563 on #cadce1  3.97:1
     blue   #3b82f6 on #d1def6  2.71:1  becomes #0058e9 on #c8d8f4  4.08:1
     amber  #F3A51E on #eae3d8  1.61:1  becomes #8a5a00 on #dcd8d4  4.18:1
     red    #E24A2D on #e8d6da  2.87:1  becomes #c0290c on #e3d2d5  4.05:1
   These are 19px stroke glyphs, so the bar is the 3:1 non text threshold; all
   four clear it, three of the four failed it before. */
[data-theme="light"] .platform-card.acc-teal   { --acc: #0c7563; }
[data-theme="light"] .platform-card.acc-blue   { --acc: #0058e9; }
[data-theme="light"] .platform-card.acc-orange { --acc: #8a5a00; }
[data-theme="light"] .platform-card.acc-red    { --acc: #c0290c; }


/* =========================================================================
   NEW  /products/ light mode accents
   The gap both specifications missed. /products/ has no .products-grid and no
   prod-* classes, so LR-07 never reaches it and Jamie's lines 1354 to 1356 keep
   painting every .tag and every .card-link the teal ink #0c7563. Three of the
   four products therefore wear Digital Reporting's colour, and CLARA wears
   Logincident AI's amber through an inline style attribute.

   The four cards are addressed by their href, which is the only stable hook the
   captured markup offers. If the conformance pass adds prod-* classes under
   P-09, the light ink mappings above fire as well and set the identical value,
   so the two are compatible.

   The consumer rule deliberately falls back to #0c7563, Jamie's existing light
   value, for every .card .tag and .card .card-link elsewhere on the site that
   has no accent, so nothing outside /products/ changes.
   The card ground is .card's own gradient, var(--surface) #ffffff at the top
   through var(--surface-2) #f6f8fc at the bottom, so each ink is quoted against
   #ffffff, where the tag sits, and #f6f8fc, where the link sits.
   Jamie's handover alone: all four tags and all four links are #0c7563, that is
   5.61:1 and legible, but three of the four wear Digital Reporting's colour,
   and CLARA's tag wears #f3a51e at 2.06:1 through an inline style attribute.
   As the prototype is actually built, the conformance pass binds each card's
   accent from its href, which puts the raw brand colours back on this page.
   Measured on /products/ at 1400px in light, before and after this file:
     Digital Reporting  #25b59a  2.58:1  becomes #0c7563  5.61:1 / 5.28:1
     Data Visualisation #3b82f6  3.68:1  becomes #0058e9  5.88:1 / 5.53:1
     Logincident AI     #f3a51e  2.06:1  becomes #8a5a00  5.93:1 / 5.57:1
     CLARA              #e24a2d  4.00:1  becomes #c0290c  5.89:1 / 5.54:1
   The .badge-beta on this page is untouched and stays on Jamie's own light
   rule, measured 4.57:1, because there is no .products-grid here for line 953
   to reach.
   ========================================================================= */
[data-theme="light"] a.card[href="/digital-reporting/"]  { --acc-ink: #0c7563; }
[data-theme="light"] a.card[href="/data-visualisation/"] { --acc-ink: #0058e9; }
[data-theme="light"] a.card[href="/logincident-ai/"]     { --acc-ink: #8a5a00; }
[data-theme="light"] a.card[href="/clara/"]              { --acc-ink: #c0290c; }

[data-theme="light"] .card .tag,
[data-theme="light"] .card .card-link { color: var(--acc-ink, #0c7563); }

/* NEW, second half: the product icon chip and the accent eyebrow in light.

   The first pass sent all four /products/ glyphs to one ink, var(--purple-2)
   #0c7563, on the reasoning that LR-09 names ".card .icon" as a consumer it has
   to repair. That fixed the contrast and lost the identity: measured, all four
   glyphs computed rgb(12,117,99) in light while dark showed teal, blue, amber
   and red, on cards whose tag, link and border were already per product. On the
   CLARA card it put a teal glyph on Jamie's amber chip inside a red bordered
   card, three accents on one card.

   The completion is the same split-token move LR-07 makes for the tag, the
   badge and the link, extended to the glyph. The conformance pass now binds the
   chip fill and border to var(--acc) in BOTH themes, so the identity chip is
   byte identical between them, which is the thing LR-07's ruling protects. The
   ink is section A's, so it comes from --acc-ink here, one specificity step
   above the conformance rule.

   Measured on /products/ at 1400px light, glyph against its own composited 12
   per cent chip, before this rule and after:
     Digital Reporting  #0c7563 on #e5f6f3  5.03:1  ->  #0c7563 on #e5f6f3  5.03:1
     Data Visualisation #0c7563 on #e5f6f3  5.03:1  ->  #0058e9 on #e7f0fe  5.12:1
     Logincident AI     #0c7563 on #e5f6f3  5.03:1  ->  #8a5a00 on #fef4e4  5.44:1
     CLARA              #0c7563 on #fef4e4  5.16:1  ->  #c0290c on #fce9e6  5.04:1
   And the accent eyebrow, measured on its own composited pill:
     /clara/           #0c7563 5.28:1  ->  #c0290c on #eceef4  5.08:1
     /logincident-ai/  #0c7563 5.28:1  ->  #8a5a00 on #eceef4  5.11:1
   The 3:1 graphical object bar and the 4.5:1 text bar are both cleared on all
   four, contrast is held where it already passed, and each card now carries one
   colour across chip, tag, link and border in light exactly as it does in dark.

   The accent eyebrow travels with them. It is the same component on /clara/ and
   /logincident-ai/, where P-09 sets the page accent on the body class, so
   --acc-ink is mirrored onto those two bodies here for light. Everywhere else
   .eyebrow.accent has no accent in scope and falls back to var(--purple-2),
   which is #0c7563 in light, so nothing outside those pages moves. */
body.page-id-12,
body.page-id-11 { --acc-ink: var(--acc); }
[data-theme="light"] body.page-id-12 { --acc-ink: #c0290c; }  /* /clara/          */
[data-theme="light"] body.page-id-11 { --acc-ink: #8a5a00; }  /* /logincident-ai/ */

[data-theme="light"] .card[href^="/digital-reporting"] .icon,
[data-theme="light"] .card[href^="/data-visualisation"] .icon,
[data-theme="light"] .card[href^="/logincident-ai"] .icon,
[data-theme="light"] .card[href^="/clara"] .icon { color: var(--acc-ink, var(--purple-2)); }
[data-theme="light"] .eyebrow.accent { color: var(--acc-ink, var(--purple-2)); }

/* NOTE. CLARA's tag on /products/ carried style="color:var(--orange)" inline in
   the captured markup, which no selector can outrank without !important. P-09
   in the conformance pass now strips that attribute at build time, verified in
   the built page, so no !important is needed here and none is used. If that
   build step is ever dropped, CLARA's tag reverts to #f3a51e at 2.06:1 on the
   white card and this rule stops reaching it.
   Measured: #f3a51e on #ffffff 2.06:1 with the attribute present,
   #c0290c 5.89:1 with it removed and the rule above applying. */


/* =========================================================================
   LR-10  Focus indicator, light scoped, with LR-17 folded in
   Overrides three rules that share one inadequate treatment:
     styles.css line 109  .btn:focus-visible
     styles.css line 128  .nav-icon-btn:focus-visible
     styles.css line 146  .btn-header-contact:focus-visible
   Each sets outline:none and substitutes box-shadow 0 0 0 3px
   rgba(37,181,154,0.3). Composited over var(--bg) #f3f5fa that ring is
   #b5e2dd, measuring 1.29:1 against the page. The 3:1 threshold for a focus
   indicator is not close to being met, and because Jamie's rule also removes
   the browser's own outline, the net effect on a light page is a control that
   looks unfocused.
   Correction to earlier reporting: this is not a repair of a pre-existing
   staging bug. Staging had no outline:none and Chrome painted its default
   ring. The intent, one consistent treatment on the shared base, is right; the
   value was never measured.

   Value: rgba(12,117,99,0.8). The ink is Jamie's own light teal, already in the
   stylesheet as rgba(12,117,99,.4) at line 1365; only the alpha moves, and it
   moves to the first tenth that clears 3:1 on every light ground the ring can
   land on.
   Measured, ring against the surface behind it:
     var(--surface) #ffffff   1.32:1 before, 3.77:1 after
     var(--surface-2) #f6f8fc 1.30:1 before, 3.63:1 after
     var(--bg) #f3f5fa        1.29:1 before, 3.55:1 after
     var(--bg-2) #e9edf6      1.27:1 before, 3.39:1 after
   The single 3px ring, Jamie's shape, is preserved. See the report for the one
   residual: where the ring abuts a .btn-primary's own teal fill it measures
   1.50:1 against the fill, which no single colour ring can solve.
   ========================================================================= */
[data-theme="light"] .btn:focus-visible,
[data-theme="light"] .nav-icon-btn:focus-visible,
[data-theme="light"] .btn-header-contact:focus-visible {
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.8);
}

/* LR-17, folded into LR-10 as the ruling requires, and the ONLY theme neutral
   rule in this file.
   Justification for it not being scoped. Jamie's three rules set outline:none,
   which is invisible to a normal renderer but is also invisible in forced
   colours mode (Windows High Contrast), where box-shadow is not painted at all.
   In that mode a focused control currently has no indicator whatsoever, in
   either theme. A transparent outline is the standard remedy: forced colours
   mode substitutes a system colour for transparent, so the outline appears
   there and only there.
   Provably inert in normal rendering: an outline of colour transparent paints
   no pixels, and outlines never participate in layout, so nothing moves. It
   also only exists in the :focus-visible state, which no screenshot in the dark
   baseline captures. Verified against _baseline-dark: all 32 hashes unchanged.
   P-04, the unscoped version of this that also changed dark mode, is struck and
   is not what this is. */
.btn:focus-visible,
.nav-icon-btn:focus-visible,
.btn-header-contact:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}


/* =========================================================================
   LR-12  Article links, blockquote, callout inks, and .menu-group h6
   All four consume raw brand accents that are only legible on a dark ground.
   The replacements are Jamie's own light inks, #0c7563 and #8a5a00, so this
   introduces no colour the file does not already contain.
   ========================================================================= */

/* Overrides .article a at styles.css line 1146 (colour var(--teal)),
   specificity (0,1,1), beaten here at (0,2,1). Body copy, so the bar is 4.5:1.
   Measured on var(--bg) #f3f5fa: 2.36:1 before, 5.15:1 after.
   The underline Jamie added stays, so the link is not signalled by colour
   alone. */
[data-theme="light"] .article a { color: #0c7563; }

/* Overrides .article blockquote at styles.css line 1147. The quote text is
   var(--text) and was already fine; the 3px rule down its left edge is the
   failure. It is a non text boundary, so the bar is 3:1.
   Measured on var(--bg) #f3f5fa: var(--teal) #25b59a 2.36:1 before,
   #0c7563 5.15:1 after. */
[data-theme="light"] .article blockquote { border-left-color: #0c7563; }

/* Overrides .article .callout at line 1148 and .article .callout strong at
   line 1149, both (0,2,0), beaten here at (0,3,0). The callout sits on
   var(--surface-2) #f6f8fc.
   Measured, the strong text: var(--amber) #f3a51e 1.93:1 before, #8a5a00
   5.57:1 after. Body copy, bar 4.5:1.
   Measured, the 3px left rule: 1.93:1 before, 5.57:1 after. Boundary, bar 3:1.
   The callout's own background and hairline border are untouched. */
[data-theme="light"] .article .callout { border-left-color: #8a5a00; }
[data-theme="light"] .article .callout strong { color: #8a5a00; }

/* Overrides .menu-group h6 at styles.css line 195 (colour var(--teal)),
   specificity (0,1,1), beaten here at (0,2,1). The mega menu group headings sit
   on .menu-inner, var(--surface-2) #f6f8fc in light. 11px uppercase, so body
   copy, bar 4.5:1.
   Measured: 2.42:1 before, 5.28:1 after.
   The selector is h6 deliberately. P-31, which would have renamed this element,
   is struck, so h6 stands. */
[data-theme="light"] .menu-group h6 { color: #0c7563; }


/* =========================================================================
   LR-13  Carousel pagination dots
   One rule per state, set on the dot element itself. P-25's ::before
   restructure is struck: it collided with this and also changed the .ind-dots
   gap, which nothing asked for.
   Overrides .ind-dot (line 883), .ind-dot.on (line 884), .testi-dot (line 822)
   and .testi-dot[aria-current="true"] (line 823). Each is beaten by one
   attribute selector of extra specificity.
   Dots are the only affordance for both carousels, so the bar is the 3:1 non
   text threshold in both states, and the two states must stay distinguishable.

   Inactive. rgba(12,18,34,0.5) is Jamie's own light ink function, the same
   rgba(12,18,34,alpha) he uses at .03 through .16 for light surfaces, with the
   alpha raised to the first half step that clears 3:1.
   Measured, .ind-dot on var(--bg) #f3f5fa: rgba(255,255,255,0.22) composites to
   #fafbfd, 1.02:1 before; #80848e, 3.43:1 after.
   Measured, .testi-dot on the carousel card var(--bg-2) #e9edf6:
   var(--border-strong) rgba(12,18,34,0.16) composites to #c6cad4, 1.40:1
   before; #7a808c, 3.37:1 after.

   Active. var(--teal) #25b59a measures 2.20:1 on the carousel card and 2.36:1
   on the page, both under 3:1, so the active dot was the less visible of the
   two states in light. It moves to the same light teal ink used everywhere else
   in this file.
   Measured, .ind-dot.on on #f3f5fa: 2.36:1 before, 5.15:1 after.
   Measured, .testi-dot[aria-current] on #e9edf6: 2.20:1 before, 4.79:1 after.
   Active stays distinguishable by hue and by Jamie's own width change, 8px to
   22px and 9px to 26px, which is untouched.
   ========================================================================= */
[data-theme="light"] .ind-dot,
[data-theme="light"] .testi-dot { background: rgba(12, 18, 34, 0.5); }

[data-theme="light"] .ind-dot.on,
[data-theme="light"] .testi-dot[aria-current="true"] { background: #0c7563; }


/* =========================================================================
   LR-15  Light gradient headline
   Overrides Jamie's own light rule at styles.css lines 576 to 579, same
   specificity (0,2,0), won on source order.
   His light gradient already fixes the first stop, #0e1320, but leaves the
   other two on raw brand values. .grad-text carries the second line of the
   homepage H1, "Understand what matters.", at clamp(38px, 6vw, 66px), which is
   large text, so the bar is 3:1.
   Measured on var(--bg) #f3f5fa, stop by stop:
     stop 1  #0e1320  17.00:1 before and after, unchanged
     stop 2  var(--teal) #25b59a   2.36:1 before, #0c7563  5.15:1 after
     stop 3  var(--amber) #f3a51e  1.89:1 before, #8a5a00  5.43:1 after
   Worst stop goes from 1.89:1 to 5.15:1. Stop positions, angle and the clip
   technique are reproduced exactly; only the two colours move, and they move to
   the two inks LR-09 and LR-12 already establish, so the headline is the same
   family as every other light ink on the page.
   ========================================================================= */
[data-theme="light"] .grad-text {
  background: linear-gradient(120deg, #0e1320 18%, #0c7563 62%, #8a5a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================================
   LR-16  Light form fields
   Overrides .field input, .field textarea at styles.css line 916.
   In light, Jamie's field is background rgba(255,255,255,0.03) inside a
   .contact-form whose ground is linear-gradient(var(--surface), var(--surface-2)),
   that is #ffffff grading to #f6f8fc. The field interior composites to #ffffff
   at the top of the form: the input is literally the same colour as the card it
   sits in. Its border, var(--border-strong) rgba(12,18,34,0.16), composites to
   #d8d9dc, 1.41:1 against the card. There is no perceptible field.

   Surface: var(--bg) #f3f5fa. This is not invented. It is exactly the treatment
   Jamie's other form component already uses, .auth-field input at styles.css
   line 608, background:var(--bg) on a var(--surface) card. Reused rather than
   reinvented.
   Boundary: rgba(12,18,34,0.5), his light ink function again, alpha raised to
   the first half step that clears 3:1 against BOTH sides of the edge.
   THE .field RULES BELOW REACH NOTHING ON THIS SITE, AND THAT IS WHY THE THREE
   REAL FAMILIES FOLLOW THEM. Verified: a runtime count over all 76 built pages
   at ?theme=light returns 0 for ".field", 0 for ".field input, .field textarea"
   and 0 for ".contact-form", against 367 real input, select and textarea
   elements. The figures immediately below were taken with Jamie's .field markup
   injected into /contact/ by hand, so they describe his component, not any page
   that exists. They are kept because the component is his and the rules are the
   correct treatment for it if the markup ever ships, but on this build they
   paint nothing.

   Measured in the browser, with Jamie's .field markup mounted inside a
   .contact-form on /contact/, the boundary:
     against the card exterior #ffffff   1.41:1 before, 3.50:1 after
     against the lower card    #f6f8fc   1.41:1 before, 3.47:1 after
     against the field interior          1.41:1 before, when the interior
       composites to #ffffff and is indistinguishable from the card;
       3.43:1 after, against the new #f3f5fa interior
   Measured, the field's own contents:
     input text var(--text) #0e1320  18.54:1 before on #ffffff,
       17.00:1 after on #f3f5fa. Both pass; the drop is the interior moving.
     placeholder var(--text-3) #5b657f on #f3f5fa, 5.33:1, up from #707a93 at
       3.93:1 before LR-08
   ========================================================================= */
[data-theme="light"] .field input,
[data-theme="light"] .field textarea {
  background: var(--bg);
  border-color: rgba(12, 18, 34, 0.5);
}

/* LR-16, THE MANDATORY CORRECTION. Verified as a real regression in the draft.
   The rule immediately above is (0,2,1). Jamie's focus rule, .field input:focus,
   is also (0,2,1) (styles.css line 918) and loads earlier, so on a straight tie
   the repair wins and a focused field keeps the resting grey border: the teal
   focus border is silently killed and the field gains no indicator at all.
   The focus state is therefore redeclared here, light scoped, at (0,3,1), after
   the repair.
   Jamie's focus ring, rgba(37,181,154,0.16), composites over the white card to
   #dcf3ef and measures 1.16:1, so it was never adequate on its own either. It
   moves to the same rgba(12,117,99,0.8) LR-10 uses, so the site has one light
   focus colour rather than two.
   Measured, the 3px ring against the card behind it:
     var(--surface) #ffffff    1.16:1 before, 3.77:1 after
     var(--surface-2) #f6f8fc  1.15:1 before, 3.63:1 after
   Measured, the 1px focus border:
     var(--teal) #25b59a against the #f3f5fa field interior 2.36:1 before,
     #0c7563 5.15:1 after; and 5.61:1 against the white card outside it.
   Both sides of the focus edge now clear 3:1, and the focused state is
   unambiguously different from the resting state. */
[data-theme="light"] .field input:focus,
[data-theme="light"] .field textarea:focus {
  border-color: #0c7563;
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.8);
}


/* =========================================================================
   LR-16, RETARGETED AT THE FORM MARKUP THIS SITE ACTUALLY HAS.

   The rules above are Jamie's ".field" component and match zero elements on all
   76 pages. LR-16's ruling is "light form fields get a surface and a boundary",
   with the mandatory red-team correction that the focus state must be
   re-declared light-scoped immediately after, at higher specificity, or the
   surface repair outranks the teal focus border and leaves the field with no
   indicator at all. That ruling is applied here to the three families that do
   exist. The treatment is unchanged: interior var(--bg), boundary
   rgba(12,18,34,0.5), focus ink #0c7563 with the rgba(12,117,99,0.8) ring that
   LR-10 already establishes, so the site has one light focus colour.

   FAMILY 1, #licc. The contact form component, on /contact/, /sign-up/ and
   /book-a-demo/. Its CSS is in a <style> block in the page body, which is
   PRE-EXISTING STAGING MARKUP AND NOT JAMIE'S, and it loads after this
   stylesheet, so the selectors here have to beat it on specificity rather than
   on order. The two rules to beat are
     "#licc input,#licc select,#licc textarea"                          (0,1,1)
     "[data-theme=light] #licc input, #licc select, #licc textarea"     (1,1,1)
   and, for the focus half, "#licc input:focus, ..."                    (1,1,1)
   which the light rule ties at (1,1,1) and beats on order, which is exactly why
   the focused field had no indicator. ":root[data-theme='light']" makes these
   (1,2,1) and (1,3,1) and settles both.

   Measured on /contact/ at 1400px light, before this rule:
     field interior var(--surface-2) #f6f8fc inside a #ffffff card
     boundary rgba(12,18,34,0.16) composited, 1.41:1 against the interior and
       1.41:1 against the card, against a 3:1 bar
     focused: border rgba(12,18,34,0.16), box-shadow none, outline-style none,
       that is, pixel identical to the resting state, a WCAG 2.4.7 Level AA
       failure on the primary conversion form
   And after:
     interior var(--bg) #f3f5fa inside the same #ffffff card
     boundary rgba(12,18,34,0.5), 3.45:1 against the interior and 3.52:1
       against the card, both over the 3:1 bar
     focused: border #0c7563 at 5.15:1 against the interior, ring
       rgba(12,117,99,0.8) at 3.79:1 against the white card, so the focused
       state is now unambiguously different from the resting state
     field text var(--text) #0e1320 on #f3f5fa, 17.00:1
     placeholder #5b657f on #f3f5fa, 5.33:1, see the placeholder rule below

   FAMILY 2, the inline-styled fields. On /book-a-demo/ and the /news/
   newsletter, the fields carry their whole appearance in a style attribute,
   "background:rgba(255,255,255,0.04);border:1px solid var(--border-strong)".
   In light that background composites to #ffffff, identical to the card behind
   it, 1.00:1, so there is no field at all. An inline declaration cannot be
   beaten by specificity, so these two are the only !important declarations in
   this file's form work, and they are confined to the two properties that have
   to move. The attribute substring selector is exact rather than clever: it
   matches 9 elements across the whole build, which is every field carrying that
   inline treatment and nothing else.
   Verified against the alternative of stripping the inline style in build.py:
   the same attribute also carries the padding, radius, colour and font size,
   and removing it would drop the fields to browser defaults in DARK, which the
   frozen-dark rule forbids. Light-scoped !important is the narrow fix.
   These fields keep Chrome's own "outline: auto 1px rgb(0,95,204)" focus ring,
   because nothing in their inline style or in Jamie's sets outline:none. That
   is an adequate indicator, and adding a second ring on top of it would paint
   two, so the focus state is deliberately left alone here.

   FAMILY 3, .auth-field. Jamie's own sign-in component, styles.css lines 608
   and 609, on /sign-in/. It already has a distinct surface, var(--bg) on a
   var(--surface) card, so only the boundary and the focus state need the
   treatment.
   Measured on /sign-in/ at 1400px light, before:
     resting boundary var(--border) rgba(12,18,34,0.1) composites to
       rgb(220,222,228) on the #f3f5fa interior, 1.23:1, and after the rule
       below 3.45:1 against the interior and 3.52:1 against the card
     focus border var(--teal) #25b59a on the #f3f5fa interior, 2.36:1
     focus ring rgba(37,181,154,0.22) composites to rgb(207,239,233) on the
       white card, 1.22:1
   And after: focus border #0c7563 5.15:1 against the interior, focus ring
   rgba(12,117,99,0.8) 3.79:1 against the white card.
   Both focus figures are under the 3:1 non-text threshold, which is the same
   failure LR-10 repairs on .btn, .nav-icon-btn and .btn-header-contact.
   Dark is adequate on this component and is untouched.

   SCOPE NOTE FOR THE REPORT. Families 1 and 2 are pre-existing staging CSS and
   inline markup rather than Jamie's, and family 3 is a fourth component the
   audit did not name. All three are taken under LR-16's own words, "light form
   fields get a surface and a boundary", rather than left inert while the file
   claimed the work was done. Declared rather than assumed.
   ========================================================================= */

/* Family 1, resting state. */
:root[data-theme="light"] #licc input,
:root[data-theme="light"] #licc select,
:root[data-theme="light"] #licc textarea {
  background: var(--bg);
  border-color: rgba(12, 18, 34, 0.5);
}

/* Family 1, THE MANDATORY CORRECTION, declared after the rule above and at
   higher specificity so it cannot be swallowed by it or by the page's own
   light rule. */
:root[data-theme="light"] #licc input:focus,
:root[data-theme="light"] #licc select:focus,
:root[data-theme="light"] #licc textarea:focus {
  border-color: #0c7563;
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.8);
}

/* Family 2, the inline-styled fields on /book-a-demo/ and /news/. */
[data-theme="light"] input[style*="rgba(255,255,255,0.04)"],
[data-theme="light"] select[style*="rgba(255,255,255,0.04)"],
[data-theme="light"] textarea[style*="rgba(255,255,255,0.04)"] {
  background: var(--bg) !important;
  border-color: rgba(12, 18, 34, 0.5) !important;
}

/* Family 3, Jamie's .auth-field on /sign-in/. */
[data-theme="light"] .auth-field input,
[data-theme="light"] .auth-select { border-color: rgba(12, 18, 34, 0.5); }

[data-theme="light"] .auth-field input:focus,
[data-theme="light"] .auth-select:focus {
  border-color: #0c7563;
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.8);
}

/* LR-16, the placeholder. Jamie's .field rules point placeholders at
   var(--text-3), and LR-16's own measurement block quotes the placeholder as
   part of the field's contents. None of the three real families sets a
   placeholder colour at all, so all of them fall through to Chrome's UA default
   rgb(117,117,117). Measured on the new #f3f5fa interior that is 4.22:1, under
   the 4.5:1 bar (it was 4.29:1 on the old #f6f8fc interior, so the surface
   change LR-16 mandates costs 0.07 of it). Pointing them at the same
   var(--text-3) that LR-08 has already remapped to #5b657f takes it to 5.33:1
   and puts one placeholder ink on the site. Light scoped, so the dark
   placeholder keeps the UA default it has today. */
:root[data-theme="light"] #licc input::placeholder,
:root[data-theme="light"] #licc textarea::placeholder,
[data-theme="light"] input[style*="rgba(255,255,255,0.04)"]::placeholder,
[data-theme="light"] textarea[style*="rgba(255,255,255,0.04)"]::placeholder,
[data-theme="light"] .auth-field input::placeholder { color: var(--text-3); }

/* =========================================================================
   LR-15b  Headline gradient: bring the amber back.   JORDAN, 6 Sep.
   Supersedes LR-15's stops above.

   Jordan asked why the light headline cannot carry Jamie's amber, correctly
   guessing it is a contrast problem on white. It is, but LR-15 over-corrected.

   Jamie's dark stops measured on the light page ground var(--bg) #f3f5fa:
     --teal-2  #45d3b6   1.71:1     brand amber  #f3a51e   1.89:1
   Both are invisible on a light ground, which is why they had to move. That
   part was unavoidable.

   But LR-15 then took them to #0c7563 (5.15:1) and #8a5a00 (5.43:1), the
   4.5:1 BODY-TEXT bar. .grad-text carries the homepage H1's second line at
   clamp(38px, 6vw, 66px) bold, which is large text, where WCAG AA asks 3:1.
   So it was solved two full stops darker than it needed to be, and the amber
   desaturated to 90 per cent on the way down, which is what makes it read
   olive rather than amber.

   These stops hold Jamie's exact hues (teal 168, amber 38) at FULL
   saturation and stop at the real bar:
     #009d7d  3.15:1      #c27b00  3.14:1
   Same hue as his, fully saturated, as bright as the light ground allows.
   ========================================================================= */
[data-theme="light"] .grad-text {
  background: linear-gradient(120deg, #0e1320 18%, #009d7d 62%, #c27b00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   LR-06b  Trust strip logos: crisper.   JORDAN, 6 Sep.
   Supersedes the "leave Jamie's filter alone" position in LR-06.

   Jamie's filter chain is identical in his light and dark rules, character
   for character, which is the clearest evidence the light pass was drafted
   and abandoned rather than decided. On black it yields #9898a6 at .82
   opacity, 5.16:1, a restrained but perfectly legible grey. Carried onto the
   light band #e9edf6 unchanged it yields #a7a7b4 at 2.03:1, which is why the
   five marks read as watermarks.

   This matches the DARK relationship rather than inventing a new one:
     dark    #9898a6 on #000000     5.16:1
     light   black at .58 opacity   5.06:1  (#626467 composited)
   Deliberately NOT the flat 8.57:1 black an earlier draft proposed, which
   would make the logos the loudest thing on the page.

   Trademark note: his chain already begins with brightness(0), so every mark
   including the BMW roundel is ALREADY flattened to a silhouette in both
   themes today. This changes the grey, not the modification, so it does not
   alter the BMW and AXA clearance question either way.
   ========================================================================= */
[data-theme="light"] .trust-strip .client-logo,
[data-theme="light"] .trust-strip .client-logo--white,
[data-theme="light"] .trust-strip .client-logo--invert {
  filter: brightness(0);
  opacity: .58;
}
[data-theme="light"] .trust-strip .client-logo:hover,
[data-theme="light"] .trust-strip .client-logo--white:hover,
[data-theme="light"] .trust-strip .client-logo--invert:hover {
  opacity: .74;
}

/* source: assets/css/patches/phase2.css */
/* =========================================================================
   PHASE 2 DECISIONS, Jordan, 7 September 2026.
   Two owner decisions from the review, both measured before and after.
   Loaded after light-repair.css and conformance.css, so it wins on order
   where the selectors tie.
   ========================================================================= */


/* -------------------------------------------------------------------------
   D-015  The primary button. ACCEPTED: "Darken to #12715f".

   Jamie's rule, styles.css line 111:
     .btn-primary { background: var(--grad-purple); color: #fff; }
     --grad-purple: linear-gradient(135deg, #25b59a 0%, #1b9e86 100%);

   White on #25b59a measures 2.58:1. The text is 15px, so the bar is 4.5:1.
   This failed on all 76 pages IN BOTH THEMES and is byte-identical in Jamie's
   file and on staging, so it is neither his doing nor a regression. That is
   exactly why nobody caught it: there was nothing to diff against.

   The decision named --teal-deep #12715f, which is already in the stylesheet
   at line 21. Jamie's gradient runs light to dark, so the second stop has to
   move as well or the far end of the button fails a different bar: #0d5f50
   measures only 2.67:1 against the dark page, under the 3:1 required for a
   UI component's own boundary. The pair below is the only one that clears
   BOTH bars at BOTH ends in BOTH themes.

   Measured, white text on the fill:
     #25b59a  2.58:1  FAILS      -> #15806b  4.85:1  passes  (stop 1)
     #1b9e86  3.34:1  FAILS      -> #12715f  5.91:1  passes  (stop 2)
   Measured, fill against the page it sits on:
     dark  --bg #05060d   4.17:1 and 3.42:1, both over the 3:1 bar
     light --bg #f3f5fa   4.44:1 and 5.42:1, both over the 3:1 bar
   Gradient angle, stops and direction are Jamie's, unchanged. Only the two
   ink values move.
   ------------------------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, #15806b 0%, #12715f 100%);
  color: #fff;
}


/* -------------------------------------------------------------------------
   D-017  The dark focus ring. ACCEPTED: "Fix the dark ring".

   THIS IS A SANCTIONED CHANGE TO DARK MODE, the first one. Re-take the pixel
   baseline after it.

   Jamie's rule, styles.css line 109, and its two siblings at 128 and 146:
     .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,181,154,0.3); }

   Correction to my own earlier reporting, repeated here so it is not lost:
   this is NOT a repair of a pre-existing staging bug. Staging set no
   outline:none and Chrome painted its own adequate ring. Jamie's rule removes
   that and substitutes a weaker one, so as shipped it REPLACES an adequate
   indicator with an inadequate one. The intent, one consistent treatment on
   the shared base, is right. The value was never measured.

   LR-10 already fixed the light half, scoped to [data-theme="light"], and
   left dark alone because dark was frozen. D-017 unfreezes it.

   The hue is fine; the alpha is the whole problem. Jamie's own teal at full
   strength measures 7.85:1 against the darkest ground. 0.6 is the first tenth
   that clears 3:1 on every dark surface the ring can land on, which is the
   same rule LR-10 applied to light.

   Measured, ring against the surface behind it, before and after:
     --bg        #05060d   1.62:1  ->  3.36:1
     --bg-2      #080a14   1.65:1  ->  3.37:1
     --surface   #0f1120   1.69:1  ->  3.30:1
     --surface-2 #141627   1.72:1  ->  3.25:1
   The single 3px ring, Jamie's shape, is preserved. Scoped away from light so
   LR-10's rgba(12,117,99,0.8) still governs there.
   ------------------------------------------------------------------------- */
:root:not([data-theme="light"]) .btn:focus-visible,
:root:not([data-theme="light"]) .nav-icon-btn:focus-visible,
:root:not([data-theme="light"]) .btn-header-contact:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 181, 154, 0.6);
}


/* -------------------------------------------------------------------------
   D-049  The dark tertiary text colour. ACCEPTED: "Yes go for it".

   THE SECOND SANCTIONED CHANGE TO DARK MODE. Re-take the pixel baseline.

   Jamie's token, styles.css line 35:
     --text-3: #6c7390;

   Every dark-mode contrast failure found in the 9 September sweep was this
   one token, and nothing else. Footer headings and legal links, the flow
   carousel kicker, the incident due-date line, and the copyright notice, on
   every page. Light mode is unaffected and already passes: LR-08 remaps it
   there and that value is untouched.

   The first figure I gave Jordan was #737a97, taken against three surfaces.
   That was wrong. Measured against all four dark grounds the token actually
   lands on, #737a97 still fails two of them. #787f9c is the smallest
   lightening that clears every one.

   Measured, text against the surface behind it, before and after:
     --bg        #05060d   4.33:1  ->  5.12:1
     --bg-2      #080a14   4.22:1  ->  5.00:1
     --surface   #0f1120   4.01:1  ->  4.74:1
     --surface-2 #141627   3.83:1  ->  4.53:1
   AA for body text is 4.5:1, so the worst case moves from failing to passing.

   The three text tiers stay clearly separated, which is the point of a
   tertiary colour:
     --text   #f4f5fb  18.59:1
     --text-2 #a6abc4   8.90:1
     --text-3 #787f9c   5.12:1
   Twelve points per channel. Scoped away from light so LR-08 still governs
   there.
   ------------------------------------------------------------------------- */
:root:not([data-theme="light"]) {
  --text-3: #787f9c;
}

/* source: assets/css/patches/phase2-ui.css */
/* =========================================================================
   PHASE 2 UI, Jordan's review of the prototype, 7 September 2026.

   Three things he asked for:
     A  the cards, "particularly in light mode, are very plain"
     B  the two enquiry forms, "a bit of a lick of paint... UI and UX"
     C  the related reading boxes, "should they be a bit smaller, they seem massive"

   Loaded last, after conformance.css, light-repair.css and phase2.css.
   ========================================================================= */


/* =========================================================================
   A.  CARD DEPTH IN LIGHT MODE

   Diagnosis, not preference. Jamie gives every card a gradient and a hover
   treatment at styles.css lines 775 and 776, and NEITHER is theme-scoped:

     .card       { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
     .card:hover { border-color: rgba(37,181,154,0.4);
                   box-shadow: 0 22px 55px -24px rgba(0,0,0,0.8), ... }

   In dark that reads beautifully: #0f1120 to #141627 is a visible lift, and a
   near-black shadow on a near-black ground is exactly right.

   In light the same two rules do almost nothing. #ffffff to #f6f8fc is a
   gradient you cannot see, there is NO resting shadow at all, and the hover
   shadow is 80 per cent black, which on a pale ground reads as grey smudge
   rather than depth. So a light card is a white rectangle with a 1px
   rgba(12,18,34,0.10) border. That is the "very plain".

   The fix is the light-mode equivalent of what Jamie already does in dark,
   not a new design: cards sit ON the page rather than being drawn on it, and
   they lift on hover. Grounds: this is a light-mode regression against the
   treatment the design already specifies, the same class of defect as LR-03.

   Deliberately restrained. Two soft shadow layers, a fractionally stronger
   border, and Jamie's own teal on hover. No new colour, no new radius, no
   accent bar, nothing that was not already in the system.
   ========================================================================= */

[data-theme="light"] .card:not(form) {
  border-color: rgba(12, 18, 34, 0.09);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 6px 16px -8px rgba(16, 24, 40, 0.10);
}

/* Jamie's hover shadow is rgba(0,0,0,0.8), tuned for a near-black ground.
   Same shape and same teal, re-inked for a pale one. */
[data-theme="light"] .card:not(form):hover {
  border-color: rgba(12, 117, 99, 0.35);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.05),
    0 18px 36px -16px rgba(16, 24, 40, 0.18),
    0 0 0 1px rgba(12, 117, 99, 0.10);
}

/* The icon chip inside a card is a flat tint in light and disappears into the
   card. One inset hairline gives it an edge, using the accent already there. */
[data-theme="light"] .card:not(form) .icon {
  box-shadow: inset 0 0 0 1px rgba(12, 18, 34, 0.06);
}


/* =========================================================================
   B.  THE TWO ENQUIRY FORMS

   Jordan: "make the contact and book a demo forms the same (the contact is
   slightly better)... only name, company and email mandatory... a bit of a
   lick of paint to make it a bit nicer to look at. UI and UX."

   The markup is unified in content_edits.py: /book-a-demo/ now uses the
   /contact/ form's structure, labels and field set. This is the paint.

   UX, not decoration:
     - a real focus ring on every field, not just buttons
     - required fields carry a visible mark, so nobody guesses
     - selects get a chevron, so they stop looking like text inputs
     - the invalid state only appears after a field has been touched, so the
       form does not shout at someone who has not typed yet
     - 16px on mobile, because anything smaller makes iOS zoom the page
   ========================================================================= */

#licc-form,
#licd-form {
  display: grid;
  gap: 4px;
}

#licc-form label,
#licd-form label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted, var(--text));
}

/* the required mark. Content, not colour alone, so it does not depend on hue */
#licc-form label:has(+ input[required])::after,
#licd-form label:has(+ input[required])::after,
#licc-form div:has(input[required]) > label::after,
#licd-form div:has(input[required]) > label::after {
  content: " *";
  color: var(--teal);
  font-weight: 700;
}

#licc-form input,
#licc-form select,
#licc-form textarea,
#licd-form input,
#licd-form select,
#licd-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: inherit;   /* NOT the `font` shorthand: `font: 15px/1.4 inherit`
                             is invalid, and a textarea then falls back to the
                             UA monospace default. That is what it did. */
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  appearance: none;
}

#licc-form textarea,
#licd-form textarea {
  min-height: 104px;
  resize: vertical;
}

/* the chevron, so a select reads as a select. Inline SVG as a data URI:
   the CSP blocks external images and this needs no network at all. */
#licc-form select,
#licd-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7b77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[data-theme="light"] #licc-form select,
[data-theme="light"] #licd-form select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346506a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

#licc-form input:hover,
#licc-form select:hover,
#licc-form textarea:hover,
#licd-form input:hover,
#licd-form select:hover,
#licd-form textarea:hover {
  border-color: var(--text-muted, var(--border-strong));
}

/* Fields had no focus treatment of their own at all: only the browser default,
   which Jamie's outline:none removes on buttons and which is easy to miss on a
   dark ground. Measured: rgba(12,117,99,0.55) ring on light surfaces clears
   3:1, matching LR-10's bar; the dark ring reuses phase2.css's 0.6 teal. */
#licc-form input:focus-visible,
#licc-form select:focus-visible,
#licc-form textarea:focus-visible,
#licd-form input:focus-visible,
#licd-form select:focus-visible,
#licd-form textarea:focus-visible {
  outline: 2px solid transparent;   /* forced-colours mode, per LR-17 */
  outline-offset: 1px;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(37, 181, 154, 0.6);
}
[data-theme="light"] #licc-form input:focus-visible,
[data-theme="light"] #licc-form select:focus-visible,
[data-theme="light"] #licc-form textarea:focus-visible,
[data-theme="light"] #licd-form input:focus-visible,
[data-theme="light"] #licd-form select:focus-visible,
[data-theme="light"] #licd-form textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.28);
}

/* Only complain once someone has actually left a field. :user-invalid does
   exactly this and needs no JavaScript. */
#licc-form input:user-invalid,
#licd-form input:user-invalid {
  border-color: var(--red, #c0290c);
}

#licc-form .licc-row2,
#licd-form .licc-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* The label inside a row sits on the grid child, so its own top margin would
   double the row gap. Zero it and carry the rhythm on the row instead, or the
   rows close up against the field above them. */
#licc-form .licc-row2 > div > label:first-child,
#licd-form .licc-row2 > div > label:first-child { margin-top: 0; }
#licc-form .licc-row2,
#licd-form .licc-row2 { margin-top: 16px; }
#licc-form > .licc-row2:first-child,
#licd-form > .licc-row2:first-child { margin-top: 0; }

/* Every .licc-* rule lives in an inline <style> block inside contact.html and
   NOWHERE ELSE, so re-using that markup on /book-a-demo/ produced a correctly
   structured form with an unstyled grey submit button. Defining the component
   here is what actually makes the two forms the same, rather than making them
   merely look the same on one page.
   Ink is contact's own #04211c on #25b59a, measured 6.58:1. Deliberately NOT
   the darkened D-015 primary: that pairing is white on deep teal, and this
   button already clears AA comfortably on its own terms. */
#licc-form .licc-send,
#licd-form .licc-send {
  margin-top: 20px;
  width: 100%;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #04211c;
  background: #25b59a;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
#licc-form .licc-send:hover,
#licd-form .licc-send:hover { background: #2ec4a7; transform: translateY(-1px); }
#licc-form .licc-send:active,
#licd-form .licc-send:active { transform: translateY(0); }
#licc-form .licc-send:focus-visible,
#licd-form .licc-send:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 181, 154, 0.6);
}
#licc-form .licc-send[disabled],
#licd-form .licc-send[disabled] {
  opacity: 0.6;
  cursor: progress;
}

#licc-form .licc-fine,
#licd-form .licc-fine {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, inherit);
  opacity: 0.85;
}

@media (max-width: 560px) {
  #licc-form .licc-row2,
  #licd-form .licc-row2 { grid-template-columns: 1fr; }
  /* iOS zooms the whole page for any field under 16px */
  #licc-form input, #licc-form select, #licc-form textarea,
  #licd-form input, #licd-form select, #licd-form textarea { font-size: 16px; }
}


/* =========================================================================
   C.  RELATED READING, SMALLER

   Jordan: "should the new related reading boxes be a bit smaller, they seem
   massive".

   They are the news-index card verbatim, which is right for a page whose whole
   job is the article list and too heavy for a footnote on an industry page.
   The card there leads with a 1:1 image, so at a 2-up width the image alone is
   over 400px tall.

   Scoped to .related-reading only, so the news index itself is untouched.
   ========================================================================= */

.related-reading .news-card > div:first-child {
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}
.related-reading .news-card { padding: 18px; }
.related-reading .news-card h3 { font-size: 17px; }
.related-reading .news-card p { font-size: 14px; }
.related-reading .news-grid { gap: 18px; }

/* the block is a footnote, so it does not need a full section's air above it */
.related-reading.section-pad { padding-top: 42px; }


/* =========================================================================
   D.  THE CLIENT LOGOS, light mode

   Jordan, 7 September: "I don't think the grey is very nice on the light page.
   Similar on the client success stories.. some are colour, some are grey."

   Cause, because it decides what is fixable here. The five source SVGs are not
   a matched set:
     aon.svg                   #eb0017, true Aon red
     axa.svg                   #9898A6 and white, ALREADY greyed on disk
     barratt-developments.svg  #9898A6, ALREADY greyed on disk
     barratt-redrow.svg        white only
     finning.svg               no explicit fills, renders black

   The trust strip forces every logo monochrome so the row reads as one family,
   which is why it looks deliberate there. The testimonial logos have no such
   rule, so Aon comes through in red and the other three come through black.
   That is exactly the "some are colour, some are grey".

   ALL-COLOUR IS NOT ACHIEVABLE FROM THESE FILES. Three of the five have no
   colour version on disk at all. Full colour needs sourced replacements for
   AXA, Finning and Barratt Redrow, which is a licensing question as much as a
   design one. Consistent monochrome IS achievable, and is what this does.

   Two changes:
     1. the light strip stops looking washed. brightness(0) at 0.58 opacity on
        a #f3f5fa ground lands around #6e7278, a mid grey that reads faded
        rather than chosen. At 0.78 it lands near #3a3d42, a confident dark
        slate. Still monochrome, still one family, no longer washed out.
     2. the testimonial logos get the same treatment, so the carousel stops
        alternating between a red logo and three black ones.

   Light only. Dark is untouched: whitened logos on a near-black ground are
   correct there and dark stays frozen. Worth knowing that dark testimonials
   still show Aon in red, which is the same inconsistency and would need a
   sanctioned dark change to match.
   ========================================================================= */

[data-theme="light"] .trust-strip .client-logo,
[data-theme="light"] .trust-strip .client-logo--white,
[data-theme="light"] .trust-strip .client-logo--invert {
  filter: brightness(0);
  opacity: 0.78;
}
[data-theme="light"] .trust-strip .client-logo:hover,
[data-theme="light"] .trust-strip .client-logo--white:hover,
[data-theme="light"] .trust-strip .client-logo--invert:hover {
  opacity: 1;
}

/* The testimonial logos are monochrome again, by Jordan's decision of
   7 September after seeing them in colour: "some of these dont work". The four
   marks genuinely do not sit together, and a carousel showing them one after
   another exposes that more than a static row would. This flattens all four to
   one family so the eye stays on the quote. */
[data-theme="light"] .testi-logo,
[data-theme="light"] .testi-logo.client-logo--white,
[data-theme="light"] .testi-logo.client-logo--invert {
  filter: brightness(0);
  opacity: 0.78;
}

/* Dark had no rule at all, which is why Aon still came through in its true red
   and AXA in the #9898A6 grey baked into its own file: only the light half was
   ever flattened. brightness(0) collapses any source colour to black and
   invert(1) lifts it to white, so all four land on one ink whatever they ship
   as. Jordan, 7 September: "Aon is still red and AXA is grey rather than white." */
:root:not([data-theme="light"]) .testi-logo,
:root:not([data-theme="light"]) .testi-logo.client-logo--white,
:root:not([data-theme="light"]) .testi-logo.client-logo--invert {
  filter: brightness(0) invert(1);
  opacity: 0.86;
}


/* -------------------------------------------------------------------------
   D2.  Barratt Redrow optical sizing

   conformance.css line 1574 sets the fourth logo to 58px, commented "Barratt
   Developments, taller so the two-line wordmark stays legible". That was sized
   for a different mark:

     barratt-developments.svg  viewBox 0 0 87 60    aspect 1.45
     barratt-redrow.svg        viewBox 0 0 370 111  aspect 3.33

   At 58px the old logo rendered 84px wide. The new one renders 193px wide,
   which is wider than Finning at 150px and makes it dominate a row of four.
   46px puts it at 153px, level with Finning, and the roundel plus two-line
   wordmark still reads at that size.
   ------------------------------------------------------------------------- */
.trust-strip .logo-row img:nth-child(4) { height: 46px; }


/* -------------------------------------------------------------------------
   A2.  Coloured shadows on the cards, Jamie's own device

   Jordan, 7 September: "Also what about shadows like Jamie did on the homepage
   for the platform end to end cards (eg. report in seconds, automatic routing)"

   He is pointing at the right thing, and it is better than what I had built.
   styles.css line 1613:

     .platform-card {
       box-shadow: 0 30px 60px -34px
                   color-mix(in srgb, var(--acc, var(--teal)) 45%, transparent);
     }
     .platform-card.acc-teal   { --acc: var(--teal); }
     .platform-card.acc-blue   { --acc: #3b82f6; }
     .platform-card.acc-orange { --acc: #F3A51E; }
     .platform-card.acc-red    { --acc: #E24A2D; }

   Each card casts a large soft shadow IN ITS OWN ACCENT COLOUR. The colour
   arrives from underneath rather than being painted inside the card, so the
   surface stays clean and nothing sits behind the text. It is more elegant than
   the corner washes I had written, and more to the point it is the language the
   design already speaks, so it needs no defending.

   Earlier attempts, both replaced: a teal tint on the heading (wrong lever, the
   box was plain, not the words), then two corner washes (closer, but a device
   the design did not already have).

   Cycles the same four inks in the same order Jamie uses. Light only: dark cards
   already carry his gradient and teal hover, and dark stays frozen.

   ------------------------------------------------------------------------- */

[data-theme="light"] .card:not(form) {
  --acc: var(--teal);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 26px 52px -32px color-mix(in srgb, var(--acc) 60%, transparent);
}

/* Cycle the accent across a row, the same four inks and the same order Jamie
   uses on the platform cards, so a row of four is not four identical objects. */
[data-theme="light"] .card:not(form):nth-child(4n+2) { --acc: #3b82f6; }   /* blue */
[data-theme="light"] .card:not(form):nth-child(4n+3) { --acc: #F3A51E; }   /* amber */
[data-theme="light"] .card:not(form):nth-child(4n)   { --acc: #E24A2D; }   /* red */

[data-theme="light"] .card:not(form):hover {
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 34px 64px -30px color-mix(in srgb, var(--acc) 75%, transparent);
}


/* =========================================================================
   E.  MAKE "AS SUPPLIED" MODE IMPOSSIBLE TO MISS

   The prototype has a comparison mode that reverts the page to Jamie's
   pre-rollout state. It is genuinely useful. It is also stored in localStorage
   under "li-proto-mode", so once it is on it STAYS on, across every page and
   every session, until somebody switches it back.

   On 7 September Jordan reported the card treatment "plain again" and the two
   forms still looking different. Both were correct: his browser was in this
   mode, where rollout.css deliberately reverts exactly those things. I spent
   three rounds hunting a cascade bug that was not there.

   The toolbar does say which mode it is in, in small text in the corner. That
   is clearly not enough. An amber rule across the top of the viewport is,
   and it costs nothing when the mode is off.
   ========================================================================= */

html.proto-as-supplied body::before {
  content: "AS JAMIE SUPPLIED  ·  review changes are hidden in this mode  ·  switch to Full rollout in the toolbar";
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  background: #8a5a00; color: #fff;
  font: 700 11.5px/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 16px; text-align: center;
  pointer-events: none;
}
html.proto-as-supplied body { border-top: 0; }


/* -------------------------------------------------------------------------
   A3.  A very soft corner wash, but only where a card has no icon

   Jordan, 7 September: "Quite like the very soft corner colour too when cards
   have no icon. Might work with the shadow."

   It does, and the two tie together because both read from the same `--acc`,
   so a card's corner is always the colour of its own shadow rather than an
   unrelated second accent. That was the weakness of the earlier two-tone
   version: teal inside, something else underneath.

   Scoped to icon-less cards on purpose. A card with a teal icon chip already
   has its colour, and adding a wash behind it doubles up. A card holding only a
   heading and a paragraph has nothing, which is the case Jordan raised at the
   start of this thread.

   Very soft, as asked: 12 per cent of the accent, fading out by 72 per cent of
   the corner. Measured at 16 per cent the muted body text still read 6.5:1 or
   better on every one of the four inks, so 12 has room to spare.
   ------------------------------------------------------------------------- */

[data-theme="light"] .card:not(form):not(:has(.icon)):not(:has(img)) {
  background:
    radial-gradient(150px 130px at 100% 0%,
      color-mix(in srgb, var(--acc) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
[data-theme="light"] .card:not(form):not(:has(.icon)):not(:has(img)):hover {
  background:
    radial-gradient(170px 150px at 100% 0%,
      color-mix(in srgb, var(--acc) 18%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}


/* =========================================================================
   A4.  THE SAME TREATMENT IN DARK. SANCTIONED by Jordan, 7 September.

   "Should we see what dark looks like with similar?" then, on seeing it,
   "Lovely. Leave both."

   This is the SECOND sanctioned change to dark mode, after D-017's focus ring.
   The pixel baseline was re-taken on 7 September to match.

   Dark is where Jamie's device was born: .platform-card sits on the dark hero
   and casts a 45 per cent accent shadow, so a coloured glow under a card is
   already native here rather than an import from the light theme. The values
   are pitched a little stronger than light, because a coloured glow has to
   clear a near-black ground (--bg #05060d) rather than a pale one, and a little
   tighter, because it reads as glow rather than shadow at this end.

   The corner wash is kept lower than light, 9 per cent against 12, for the same
   reason in reverse: an accent over #0f1120 lifts faster than the same accent
   over white.

   Jamie's own dark hover, border teal at 0.4 with a 1px teal ring, is kept and
   the accent simply flows into it, so this reads as an extension of what he
   wrote rather than a replacement.
   ========================================================================= */

:root:not([data-theme="light"]) .card:not(form) {
  --acc: var(--teal);
  box-shadow: 0 26px 56px -34px color-mix(in srgb, var(--acc) 70%, transparent);
}
:root:not([data-theme="light"]) .card:not(form):nth-child(4n+2) { --acc: #3b82f6; }
:root:not([data-theme="light"]) .card:not(form):nth-child(4n+3) { --acc: #F3A51E; }
:root:not([data-theme="light"]) .card:not(form):nth-child(4n)   { --acc: #E24A2D; }

:root:not([data-theme="light"]) .card:not(form):not(:has(.icon)):not(:has(img)) {
  background:
    radial-gradient(150px 130px at 100% 0%,
      color-mix(in srgb, var(--acc) 9%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

:root:not([data-theme="light"]) .card:not(form):hover {
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
  box-shadow:
    0 34px 68px -30px color-mix(in srgb, var(--acc) 85%, transparent),
    0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}
:root:not([data-theme="light"]) .card:not(form):not(:has(.icon)):not(:has(img)):hover {
  background:
    radial-gradient(170px 150px at 100% 0%,
      color-mix(in srgb, var(--acc) 15%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}


/* =========================================================================
   D.  TABLES ON A PHONE, found 8 September 2026 by measuring the rendered page.

   Two articles carry data tables inside <figure class="wp-block-table">. At
   390px the table is 386px wide and starts 24px in from the container edge, so
   it ends at 410 and pushes the whole PAGE sideways: 20px of horizontal scroll
   on the document, which is the worst kind because it moves the header too.

   The figure had overflow-x:visible. Giving it its own scroll container is the
   standard fix: the table scrolls, the page does not.
   ========================================================================= */
.article figure.wp-block-table,
.article .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* a table in its own scroll container should not also be squeezed */
.article figure.wp-block-table > table {
  min-width: 100%;
  width: max-content;
}


/* =========================================================================
   E.  LIGHT-MODE INK FOR THE --teal CONSUMERS light-repair.css MISSED.
       Found 8 September 2026 by a contrast audit over 150 page checks.

   --teal is #25b59a and is defined once, with no [data-theme="light"] remap.
   light-repair.css LR-07 already remaps the identical colour on .card .tag and
   .card .card-link to #0c7563, quoting "2.58:1 becomes 5.61:1". Four more
   consumers were simply not on that selector list:

     .card .readmore     54 instances: every news card on /news/, on all eight
                         industry pages and all nine solution pages. 2.58:1 on
                         the white card, 2.42:1 at the card foot where the
                         gradient reaches #f6f8fc
     .footer-legal a     the Privacy and Terms links, on all 91 pages. 2.20:1
                         on the light footer ground #e9edf6
     .lic-cc a           "Read our privacy notice" in the cookie banner, 2.58:1
     .ph .ph-tag         placeholder tags on two solution pages, 2.20:1

   #0c7563 is the value the repair pass already chose, and it clears 4.5:1 on
   all three grounds: 5.61:1 on white, 5.28:1 on #f6f8fc, 4.79:1 on #e9edf6.
   No new token, no new colour.
   ========================================================================= */
[data-theme="light"] .card .readmore,
[data-theme="light"] .footer-legal a,
[data-theme="light"] .lic-cc a,
[data-theme="light"] .ph .ph-tag {
  color: var(--acc-ink, #0c7563);
}

/* =========================================================================
   F.  ARTICLE TABLES THAT ARE NOT IN A FIGURE.
       Section D covered figure.wp-block-table. The audit found two more that
       are bare <table> in .article, on /glossary/quality-management/ and
       /news/power-of-the-checklist/. One adds 104px of horizontal scroll to the
       whole page at 390px; the other is clipped unscrollably by
       body{overflow-x:hidden}, so its last column cannot be reached at all.

   A bare table gets the same treatment: it scrolls, the page does not.
   ========================================================================= */
.article > table,
.article table:not(figure table) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: max-content;
  min-width: 100%;
}


/* =========================================================================
   G.  THE CAPTURE TILES GET JAMIE'S COLOURED SHADOW.
       Jordan, 8 September 2026: "in the solutions what can you capture boxes,
       i think we should give them the shadows".

   .cap-tile has a background, a border, a radius and a hover lift, and NO
   box-shadow at all, which is why the row reads flat. Jamie's own device is on
   .platform-card at styles.css:1616:

     box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--acc) 45%, transparent)
     .platform-card.acc-teal/.acc-blue/.acc-orange/.acc-red set --acc

   So this is his component's treatment applied to another of his components,
   not a new invention. Four tiles per solution page and nine on the hub, so the
   accent cycles on nth-child(4n).

   The icon takes the same accent, as it does on .platform-card. A red shadow
   under a teal icon reads as two unrelated decisions; the device works because
   they share the accent.

   NOTE THIS CHANGES DARK MODE, which is otherwise frozen. It is a sanctioned
   change: Jordan asked for it directly. Reversible by deleting this block.
   ========================================================================= */
.cap-tiles .cap-tile:nth-child(4n+1) { --acc: var(--teal); }
.cap-tiles .cap-tile:nth-child(4n+2) { --acc: #3b82f6; }
.cap-tiles .cap-tile:nth-child(4n+3) { --acc: #f3a51e; }
.cap-tiles .cap-tile:nth-child(4n+4) { --acc: #e24a2d; }

.cap-tiles .cap-tile {
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--acc, var(--teal)) 45%, transparent);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cap-tiles .cap-tile:hover {
  box-shadow: 0 34px 68px -30px color-mix(in srgb, var(--acc, var(--teal)) 60%, transparent);
}
.cap-tiles .cap-tile .ti {
  background: color-mix(in srgb, var(--acc, var(--teal)) 14%, transparent);
  color: var(--acc, var(--teal));
}

/* Light mode needs a little more of the colour to read against a white ground,
   the same reasoning as section A of this file. */
[data-theme="light"] .cap-tiles .cap-tile {
  box-shadow: 0 26px 52px -30px color-mix(in srgb, var(--acc, var(--teal)) 55%, transparent);
}
[data-theme="light"] .cap-tiles .cap-tile:hover {
  box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--acc, var(--teal)) 70%, transparent);
}


/* =========================================================================
   D.  THREE FIXES FROM LAUNCH DAY, 9 September 2026

   Jordan, on the live site: "on a mobile the top bar is quite cluttered and
   the logo pays the price. Could we do something to make the contact bar
   smaller maybe and or the slider smaller?" and, separately, the eyebrow
   sitting hard against its heading on /book-a-demo/.

   Both were measured on www.logincident.com before anything was written.
   ========================================================================= */


/* -------------------------------------------------------------------------
   D-1  The eyebrow with no gap beneath it.

   MEASURED, and the original diagnosis was wrong in its scope. The note
   written on launch day said the eyebrow had "0px gap, sitewide". It does
   not. On /book-a-demo/ four eyebrows measure 20, 0, 18 and 18 pixels, and
   the homepage measures 26, 22 and 18. Only ONE container is affected.

   The three that work do so because their container gives the heading a top
   margin of its own:

     .section-head h2          margin: 18px 0 16px   (styles.css line 89)
     .page-hero .eyebrow + h1  its own hero rule
     .platform-showcase-head   22px

   .showcase-text has no such rule, so its h2 falls through to
   licon_layout_reset() in functions.php, which zeroes WordPress's
   block-gap margins so they cannot override Jamie's spacing (D-023). The
   zero is that reset showing through a gap in the theme's own spacing, not
   a fault in the reset.

   So the fix belongs on .showcase-text, NOT on .eyebrow. Adding a bottom
   margin to .eyebrow globally, as the launch-day note proposed, would have
   pushed the three CORRECT containers to 36 and 38 pixels and broken the
   homepage to fix one section of one page.

   18px matches .section-head, so this adopts the existing number rather
   than inventing a second one. 26 instances across the site.
   ------------------------------------------------------------------------- */
.showcase-text .eyebrow + h2 { margin-top: 18px; }


/* -------------------------------------------------------------------------
   D-2  Mobile header: the logo squeezed to 43 per cent of its width.

   MEASURED at 390px on the live site:

     inner width (390 minus the container's 24px padding each side)   342px
     .nav-cta                                                       260.8px
       Contact us pill   146.8   (padding 13px 22px, 15px text, 16px arrow)
       theme toggle       52
       hamburger          42
       two 10px gaps      20
     what is left for the logo                                       81.2px

   The logo's own file is 300 x 67, so at its specified 42px height it wants
   188px. It is being flex-shrunk to 81px, which is why it reads as small
   and crowded. conformance.css line 230 already gives it object-fit:contain
   so it letterboxes rather than distorts, and that measurement was routed to
   Jordan at the time as a choice rather than a repair. This is his answer.

   Each reduction below is one of the two he named, or is needed to make
   them add up:

     arrow hidden        saves 25px  (16px icon plus the 9px flex gap)
     pill padding 22->14 saves 16px
     pill text 15->13.5  saves about 5px
     toggle 52->44       saves 8px   ("or the slider smaller")
     hamburger 26->24    saves 6px
     .nav-cta gap 10->8  saves 4px

   About 64px returned to the logo. The right margin on .brand keeps the
   logo and the pill from touching, since .nav is justify-content:space-between
   and would otherwise let them meet at the narrowest widths.

   Breakpoint is 500px, not 940px. Above roughly 513px the logo is already at
   its full 188px and needs no help, so compacting the controls there would be
   a change with no problem behind it.
   ------------------------------------------------------------------------- */
@media (max-width: 500px) {
  .site-header .nav-cta { gap: 8px; }
  .site-header .brand { margin-right: 14px; min-width: 0; }

  .site-header .btn-header-contact { padding: 10px 14px; font-size: 13.5px; }
  .site-header .btn-header-contact svg { display: none; }

  .site-header .theme-toggle { width: 44px; flex: 0 0 44px; }
  /* the thumb is 20px inset 3px, so the travel is width minus 26 */
  [data-theme="light"] .site-header .theme-toggle .tt-thumb { transform: translateX(16px); }

  .site-header .nav-toggle { padding: 6px; }
  .site-header .nav-toggle svg { width: 24px; height: 24px; }
}


/* -------------------------------------------------------------------------
   D-3  Height guard for the responsive content images.

   licon_content_images() in functions.php now adds width and height
   attributes to content images that had none, so the browser can reserve the
   right box and avoid a layout shift. styles.css line 70 sets

     img { max-width: 100%; display: block; }

   with NO height:auto. Without that, a height attribute is a presentational
   hint the browser honours literally, so the two 2400x1720 figures on an
   article page would render 760 wide by 1720 tall. Stretched, not scaled.

   Scoped to the marker class the filter adds, so it touches only the images
   the filter changed. 273 images on the site already carry a height attribute
   with no inline style, and a global rule would have reached all of them.

   The selector is ONE class (0,1,0) on purpose. It must lose to

     .article-hero-img img { width:100%; height:100%; object-fit:cover; }   (0,1,1)

   which fills a 16/7 container and must keep its own height. A tie would have
   gone to this file, since it loads last, and flattened every article hero.
   ------------------------------------------------------------------------- */
.licon-rimg { height: auto; }


/* -------------------------------------------------------------------------
   D-4  D-040 closed: the mega-menu no longer emits h6 before the page h1.

   Every page on the site opened its heading outline like this:

     h6  By reporting category
     h6  By outcome
     h1  Capture what happens. Understand what matters.

   Those two are the group labels inside the Solutions mega-menu. They are
   navigation labels, not document headings, and because the header renders
   before the content they put two h6 elements ahead of the h1 on all 91 pages.
   A screen reader user listing headings met them first, on every page.

   parts/header.html now uses <p class="menu-group-label"> instead of <h6>.
   These rules carry the h6 treatment across unchanged, so nothing moves.

   Replaces, without altering the look:
     styles.css line 195               the base treatment
     styles.css line 222               padding under 940px
     conformance.css line 522          padding 941px to 1150px
     light-repair.css line 597         the light-mode colour
   The two padding rules were identical, so the media queries collapse into one
   at 1150px, which is where the desktop nav gives way to the mobile menu.
   ------------------------------------------------------------------------- */
.menu-group .menu-group-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 6px 12px 6px;
  margin: 0;
  font-weight: 700;
}
[data-theme="light"] .menu-group .menu-group-label { color: #0c7563; }
@media (max-width: 1150px) {
  .menu-group .menu-group-label { padding: 10px 12px 4px; }
}


/* -------------------------------------------------------------------------
   D-5  Trust strip label: 4.43:1, below the AA minimum for normal text.

   MEASURED. .trust-strip has background #000000 and .trusted-tag is
   rgba(255,255,255,0.45) at 14px, which composites to #737373 and gives
   4.43:1. WCAG AA wants 4.5:1 for text under 18.66px. It misses by a hair,
   which is why it survived a casual look.

   Raising the alpha to 0.50 gives #808080 and 5.32:1, a comfortable margin
   for a change small enough not to alter the band's character.

   LIGHT MODE IS ALREADY COMPLIANT and is deliberately untouched: light-repair
   line 295 puts the label on var(--bg-2) in var(--text-3), which after that
   file's own --text-3 correction to #5b657f measures 4.96:1. Hence the
   :root:not([data-theme="light"]) guard. Without it this rule would load after
   light-repair, match in both themes, and undo that repair.

   THIS CHANGES DARK MODE, which is otherwise frozen. It is an accessibility
   repair, which rule 1 permits, and Jordan asked for it directly on
   9 September. Re-take the dark pixel baseline at 08 Prototype/_baseline-dark/.
   ------------------------------------------------------------------------- */
:root:not([data-theme="light"]) .trust-strip .trusted-tag {
  color: rgba(255, 255, 255, 0.50);
}


/* -------------------------------------------------------------------------
   D-6  Skip link.

   WordPress prints its .skip-link stylesheet on every page of this site, but
   the theme never emitted the link, and there is no <main> and no <nav>
   either. Measured on the live homepage: the first focusable element was an
   anchor with no text, followed by the whole mega-menu. A keyboard user had to
   pass roughly thirty links to reach the content, on every page, with nothing
   to skip past them.

   Styled on brand rather than left to WordPress's default grey box, since it
   is the first thing a keyboard user sees. Off-screen until focused, which is
   the standard pattern, and never display:none, which would take it out of the
   tab order and defeat the point.
   ------------------------------------------------------------------------- */
.licon-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--teal);
  color: #04211c;
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.licon-skip:focus {
  left: 0;
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}
/* The target takes tabindex="-1" so focus actually moves there. Suppress the
   ring on it, because the user did not tab to it and a stray outline round the
   whole content area reads as a fault. */
#content:focus { outline: none; }


/* -------------------------------------------------------------------------
   D-7  Search results.

   Same fault as the 404 had. There was no search template, so WordPress fell
   back to `index`, which is header + wp:post-content + footer. On a search
   results page wp:post-content has no query loop, so it rendered the FIRST
   MATCHING PAGE'S ENTIRE CONTENT under the heading "Search Results for ...".
   Searching "incident reporting" showed the whole glossary page dressed up as
   a result. Not blank like the 404, which is why it was easy to miss, but
   arguably more confusing.

   templates/search.html now runs a real query loop. These rules dress the core
   blocks as the site's own cards, because WordPress's defaults would otherwise
   land unstyled: licon_layout_reset() zeroes block margins, so every margin
   below is set deliberately rather than inherited.
   ------------------------------------------------------------------------- */
.lic-results .wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
.lic-results .wp-block-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  transition: border-color .25s, transform .25s var(--ease);
}
.lic-results .wp-block-post:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.lic-results .wp-block-post-title {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.lic-results .wp-block-post-title a { color: var(--text); text-decoration: none; }
.lic-results .wp-block-post-title a:hover { color: var(--teal); }
.lic-results .wp-block-post-excerpt__excerpt {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}
.lic-results .wp-block-post-excerpt__more-text { margin: 8px 0 0; }

.lic-noresults { color: var(--text-2); font-size: 17px; line-height: 1.6; }
.lic-noresults a { color: var(--teal); }

.lic-pagination { margin-top: 30px; gap: 8px; }
.lic-pagination a,
.lic-pagination .page-numbers {
  color: var(--text-2);
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  text-decoration: none;
  font-size: 14.5px;
}
.lic-pagination a:hover { color: var(--text); border-color: var(--border-strong); }
.lic-pagination .page-numbers.current {
  color: var(--text);
  border-color: var(--teal);
  background: rgba(37, 181, 154, 0.10);
}

/* The search form in the hero, matched to the site's inputs rather than left
   as the browser default. */
.lic-search-form { max-width: 480px; margin: 22px auto 0; }
.lic-search-form .wp-block-search__inside-wrapper {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 4px 4px 6px;
  gap: 6px;
}
.lic-search-form .wp-block-search__input {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-size: 15px;
  padding: 10px 14px;
}
.lic-search-form .wp-block-search__input:focus { outline: none; }
.lic-search-form .wp-block-search__button {
  background: var(--teal);
  color: #04211c;
  border: 0;
  border-radius: 999px;
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 20px;
  cursor: pointer;
  margin: 0;
}
.lic-search-form .wp-block-search__button:hover { background: var(--teal-2); }

[data-theme="light"] .lic-results .wp-block-post-title a { color: var(--text); }
/* =========================================================================
   Industry media panels, 16 September 2026.
   Site review of 15 September, findings V01, V02 and V03. Every number in
   these notes was measured on the live page before the rule was written.
   ========================================================================= */

/* V02. The eight industry photographs reuse .ph, the placeholder component,
   which carries 34px of padding, a 1.5px dashed border, a 16px radius, a
   tinted background and min-height 200px. styles.css:1098 positions the image
   but resets none of that, and with border-box sizing the photograph was inset
   by 35px on every side. Visible on desktop, not only on a phone. Scoped to
   the direct img child so the placeholder component itself is untouched. */
.panel.media > img.ph {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
}

/* V01. The insurance doughnut is a conic gradient sized 74px inside a flex
   row with no shrink protection: computed flex was 0 1 auto, so its width
   followed the row while its height stayed at 74px. Measured live:
   28.5 x 74 at a 320px viewport, 46.9 x 74 at 390px, 57.4 x 74 at 430px.
   It was only circular at 768px and above. */
.panel.media .glass .donut {
  flex: 0 0 74px;
  width: 74px;
  min-width: 74px;
  height: 74px;
  aspect-ratio: 1;
}

/* The figure beside the chart is a flex child with min-width auto, so it
   refused to shrink and pushed all of the shrinking onto the chart. */
.panel.media .glass .donut + * { min-width: 0; }

/* V03. The panel header is a nowrap flex row holding a title and a status
   pill. At a 320px viewport the pill ran 12px past the header and was clipped
   by the panel's own overflow. */
.panel.media > .head {
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* The showcase keeps 44px of padding at every width, so a 320px screen loses
   88px, more than a quarter of it, before any content is laid out. That is
   what squeezed the chart row to 124px in the first place. */
@media (max-width: 600px) {
  .showcase,
  .showcase.reverse { padding: 22px; }
}

/* =========================================================================
   Narrow-screen clipping found while measuring the above. Not in the review,
   which did no mobile testing. The site sets body{overflow-x:hidden}, so
   none of this produces a horizontal scrollbar: the content is simply cut
   off at the right edge and nothing signals that it happened. Measuring page
   overflow on this site proves nothing; the screenshots are the test.
   ========================================================================= */

/* Grid items default to min-width:auto, so a showcase column cannot shrink
   below its widest unbreakable content and overflows the container instead.
   On /data-visualisation/ at a 320px viewport that pushed the whole "Not
   limited to what we thought of" block 60px past the screen, heading, body
   copy, bullets and dashboard image together. */
.showcase > * { min-width: 0; }

/* What set that floor was the browser mock's address bar: the URL is one
   unbreakable string, so its min-content width sized the entire column. */
.browser-url {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .cap-tiles holds two columns down to 900px. At 320px the right-hand tile
   was cut by 3 to 16px on /solutions/esg/, /health-safety/,
   /incident-management/ and /quality/, where the words are longest. */
.cap-tiles .cap-tile { min-width: 0; }
@media (max-width: 480px) {
  .cap-tiles { grid-template-columns: 1fr; }
}

/* Same cause once more, in the tick lists. Each li is a grid item and a flex
   container, so its automatic minimum size held the whole line at its
   min-content width: 253px inside a 226px column on /solutions/audit/ at
   320px, cutting the end off every bullet. */
.checks li { min-width: 0; }

/* =========================================================================
   The chat launcher was sitting on top of the footer legal line.
   ========================================================================= */

/* The launcher is fixed to the bottom right and the legal line is the last
   thing on the page, so at the end of the scroll the two occupy the same
   corner. Measured on /about/ with the page scrolled to the bottom: at a
   430px viewport the launcher already covered both Privacy and Terms, before
   anything was added to that line. The fix is clearance under the line, not
   moving the launcher, which has to stay where people expect it. */
@media (max-width: 1100px) {
  .site-footer .footer-bottom { padding-bottom: 104px; }
}

/* gx: glossary index, 21 Sep 2026 */
/* ---------------------------------------------------------------------------
   Glossary index, /glossary/. Added 21 September 2026.

   Replaces 30 identical bordered cards in a two column stack with a filterable
   A-Z list. Every colour comes from the theme's own tokens (--text, --text-2,
   --border, --teal ...) so the light and dark toggle keeps working without this
   file knowing anything about either. Nothing here defines a :root variable,
   which would leak into the rest of the site.

   Everything is scoped under .gx-wrap. The old .gloss-term and .resources-hub
   rules stay where they are and simply stop matching, because the page no
   longer emits that markup.
   --------------------------------------------------------------------------- */

.gx-wrap { max-width: 1040px; margin: 0 auto; }

/* Controls -------------------------------------------------------------- */

.gx-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border-strong);
  padding-block: 12px;
  margin-bottom: 2px;
}

/* The filter cannot work without JS, so it stays hidden until patch.js
   marks the document. The A-Z rail is hidden with it, because its buttons
   filter rather than jump. */
.gx-filter { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gx-rail { display: none; flex-wrap: wrap; gap: 2px; align-items: center; }
.gx-js .gx-filter,
.gx-js .gx-rail { display: flex; }

.gx-q {
  flex: 1 1 260px;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 12px);
  padding: 10px 14px;
}
.gx-q::placeholder { color: var(--text-3); }
.gx-q:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

.gx-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.gx-rail button {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 4px;
  line-height: 1;
}
.gx-rail button:hover { background: rgba(37, 181, 154, 0.12); }
.gx-rail button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.gx-rail button.is-on { background: var(--teal); color: #05060d; }
.gx-rail button.gx-all { color: var(--text-2); }

/* The terms -------------------------------------------------------------- */

.gx-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 46px;
  margin: 0;
  padding: 0;
}

/* A grid rather than column-count on purpose: an anchor lands reliably, and
   filtering reflows without the column balancer moving everything. */
.gx-row {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.gx-row.is-hidden { display: none; }

.gx-term { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.gx-term a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.gx-term a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.gx-term a::after { content: ' \2192'; color: var(--teal); font-weight: 500; }

.gx-def { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

.gx-empty { display: none; padding: 28px 0; color: var(--text-2); }
.gx-empty.is-on { display: block; }

/* Reference articles ----------------------------------------------------- */

.gx-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 22px;
}
.gx-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 12px);
  padding: 18px 20px 16px;
}
.gx-cat h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.gx-cat h3 a { color: var(--text); text-decoration: none; }
.gx-cat h3 a:hover { color: var(--teal); }
.gx-cat .gx-blurb { margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.gx-cat ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid rgba(37, 181, 154, 0.22); }
.gx-cat li { margin-bottom: 6px; font-size: 14px; line-height: 1.4; }
.gx-cat ul a { text-decoration: none; }
.gx-cat ul a:hover { text-decoration: underline; }
.gx-cat .gx-n {
  display: block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 620px) {
  .gx-list { grid-template-columns: 1fr; }
}

/* source: assets/css/patches/cookie-consent.css */
/* Cookie consent banner. Bottom sheet rather than a centre-screen modal: it
   must not block the page, because a wall in front of the content pressures
   people into accepting, and pressured consent is not consent. */
.lic-cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 32px -12px rgba(16, 24, 40, 0.28);
  animation: lic-cc-up 0.28s ease both;
}
@keyframes lic-cc-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lic-cc { animation: none; } }

.lic-cc-in {
  max-width: 1180px; margin: 0 auto; padding: 18px 24px;
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.lic-cc-copy { flex: 1 1 420px; min-width: 0; }
.lic-cc-h { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: var(--text); }
.lic-cc-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2, var(--text)); max-width: 74ch; }
.lic-cc-p a { color: var(--teal); text-decoration: underline; }

.lic-cc-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.lic-cc-btns button {
  font: 600 14px/1 inherit; padding: 12px 20px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  transition: background 0.18s, border-color 0.18s;
}
/* equal weight, deliberately: accept carries the fill, decline carries the same
   size, padding and type. Neither is hidden or de-emphasised. */
.lic-cc-btns .lic-cc-yes { background: #25b59a; border-color: #25b59a; color: #04211c; }
.lic-cc-btns .lic-cc-yes:hover { background: #2ec4a7; }
.lic-cc-btns .lic-cc-no:hover { border-color: var(--text); }
.lic-cc-btns button:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 181, 154, 0.6);
}
[data-theme="light"] .lic-cc-btns button:focus-visible { box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.35); }

@media (max-width: 720px) {
  .lic-cc-in { padding: 16px 18px; gap: 14px; }
  .lic-cc-btns { width: 100%; }
  .lic-cc-btns button { flex: 1; }
}


/* The banner is a full-width bottom sheet and the chat launcher sits bottom
   right, so the banner was covering it: Playwright could not click the chat
   button at all, the banner intercepted the pointer. Lift the launcher above the
   banner while it is showing. The class is set by cookie-consent.js. */
html.lic-cc-open .lic-chat,
html.lic-cc-open .lic-chat-wrap,
html.lic-cc-open #licPanel {
  bottom: 132px;
}
@media (max-width: 720px) {
  html.lic-cc-open .lic-chat,
  html.lic-cc-open .lic-chat-wrap,
  html.lic-cc-open #licPanel { bottom: 190px; }
}

/* =========================================================================
   The persistent cookie settings control, 16 September 2026, site review
   finding F01. It sits in the footer legal line beside Privacy and Terms,
   on every page, and cookie-consent.js inserts it.

   It is a button that has to look exactly like the two links either side of
   it, so the chrome is reset and the colours are taken from the same places
   the footer links take theirs: the inherited footer ink in dark, and the
   repaired accent ink in light, where the footer ground is #e9edf6 and the
   plain teal measured 2.20:1. #0c7563 gives 4.79:1 on that ground. Same
   value, same reason, as the .footer-legal a rule in phase2-ui.css.
   ========================================================================= */
.footer-legal .lic-cc-sep { opacity: .5; margin: 0 8px; }
.footer-legal .lic-cc-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.footer-legal .lic-cc-link:hover { text-decoration: underline; }
.footer-legal .lic-cc-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(37, 181, 154, 0.6);
}
[data-theme="light"] .footer-legal .lic-cc-link { color: var(--acc-ink, #0c7563); }
[data-theme="light"] .footer-legal .lic-cc-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(12, 117, 99, 0.35);
}

/* source: assets/css/patches/lix.css */
/* ============================================================================
   lix  Logincident illustrative examples
   Three synthetic-data visuals that replace the .ph placeholder blocks on
   /solutions/risk-intelligence/ (A, B) and /solutions/audit/ (C).

   Load position: LAST in licon_patch_styles(), after phase2-ui.css.
   Tokens only. Dark is :root, light is [data-theme="light"] on <html>.
   No third-party CSS, no webfont, no external request.
   ========================================================================= */

:root{
  /* Third series and diagram surface. Brand red is deliberately unused:
     these are categories, not severities. */
  --lix-c1: var(--teal);
  --lix-c2: var(--amber);
  --lix-c3: #8f9ab8;
  --lix-grid: var(--border);
  --lix-surface: var(--surface-2);
}
[data-theme="light"]{
  --lix-c3: #5d6784;
  --lix-surface: var(--surface-2);
}

/* ---- shared figure shell ------------------------------------------------ */
.lix{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding:24px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lix-head h3{
  font-size:19px;
  line-height:1.3;
  margin:0;
}
.lix-sub{
  font-size:14px;
  color:var(--text-2);
  margin:4px 0 0;
}
.lix-meta{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:8px 0 0;
}
.lix-note{
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-3);
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* ---- expandable data table (shared by A and B) -------------------------- */
.lix-details{ margin:0; }
.lix-details > summary{
  cursor:pointer;
  font-size:13px;
  color:var(--text-2);
  padding:8px 0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.lix-details > summary::-webkit-details-marker{ display:none; }
.lix-details > summary::before{
  content:"";
  width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .18s var(--ease);
}
.lix-details[open] > summary::before{ transform:rotate(90deg); }
.lix-details > summary:hover{ color:var(--text); }
.lix-details > summary:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}
.lix-tablewrap{ overflow-x:auto; }
.lix table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:0;
}
.lix table caption{
  text-align:left;
  font-size:12.5px;
  color:var(--text-3);
  padding-bottom:8px;
}
.lix th, .lix td{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.lix thead th{
  color:var(--text-2);
  font-weight:600;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border-strong);
}
.lix td.num, .lix th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.lix tfoot td{ font-weight:600; border-bottom:none; border-top:1px solid var(--border-strong); }

/* ========================================================================
   VISUAL A  Reports by week
   ===================================================================== */
.lix-chart{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 10px;
  /* reserve space so nothing shifts while fonts load */
  min-height:240px;
}
.lix-yaxis{
  display:flex;
  flex-direction:column-reverse;
  justify-content:space-between;
  font-size:11px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  /* the half-em insets centre each tick label on its gridline rather than
     hanging it off the top and bottom of the band */
  padding:calc(22px - 0.5em) 0 calc(44px - 0.5em);
  line-height:1;
}
.lix-plot{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(6px,1.6vw,16px);
  align-items:end;
  position:relative;
  padding:22px 0 44px;   /* 22px for the total labels, 44px for week labels */
}
/* zero-baseline gridlines, drawn behind the bars */
.lix-plot::before{
  content:"";
  position:absolute;
  inset:22px 0 44px 0;
  background:repeating-linear-gradient(
    to top,
    var(--lix-grid) 0 1px,
    transparent 1px calc(25% - 0px)
  );
  pointer-events:none;
}
.lix-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  height:200px;
  position:relative;
}
/* Taken out of flow so the stack below it spans the whole 0 to 12 scale and
   lines up with the y-axis ticks. In flow it stole about 25px of the column
   and every bar read low against its own axis. */
.lix-total{
  position:absolute;
  left:0; right:0;
  text-align:center;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.lix-stack{
  display:flex;
  flex-direction:column-reverse;
  border-radius:6px 6px 0 0;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-bottom:none;
}
.lix-seg{
  display:block;
  min-height:3px;
}
.lix-seg-1{ background:var(--lix-c1); }
.lix-seg-2{
  background:var(--lix-c2);
  /* second encoding: diagonal hatch, so the series survives greyscale */
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.34) 0 3px, transparent 3px 7px);
}
.lix-seg-3{
  background:var(--lix-c3);
  background-image:radial-gradient(rgba(0,0,0,.38) 1.2px, transparent 1.3px);
  background-size:7px 7px;
}
.lix-xlabel{
  position:absolute;
  top:100%;
  left:0; right:0;
  padding-top:10px;
  text-align:center;
  font-size:11.5px;
  line-height:1.35;
  color:var(--text-2);
}
.lix-xlabel b{ display:block; font-weight:600; color:var(--text); }

.lix-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--text-2);
}
.lix-legend li{ display:flex; align-items:center; gap:8px; }
.lix-key{
  width:14px; height:14px;
  border-radius:3px;
  border:1px solid var(--border-strong);
  flex:none;
}
.lix-key-1{ background:var(--lix-c1); }
.lix-key-2{
  background:var(--lix-c2);
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.34) 0 3px, transparent 3px 7px);
}
.lix-key-3{
  background:var(--lix-c3);
  background-image:radial-gradient(rgba(0,0,0,.38) 1.2px, transparent 1.3px);
  background-size:7px 7px;
}
.lix-legend .lix-legend-n{
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* ========================================================================
   VISUAL B  Reports by site
   ===================================================================== */
/* The basemap is a REAL OpenStreetMap render, baked to a flat PNG at build time
   by make_sitemap.py and served from our own theme. No map vendor, no tile
   request, no third-party call at runtime. The theme's own swap in main.js
   picks up the "-light" twin for anything under /sol/, so both themes are
   handled by the file path alone. */
.lix-mapwrap{
  position:relative;
  /* the pins size themselves against this, so they scale with the map */
  container-type:inline-size;
  /* reserve the ratio so the card never shifts while the image loads */
  aspect-ratio:4 / 3;
  width:100%;
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--lix-surface);
}
.lix-map-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lix-pins{ position:absolute; inset:0; }

/* Each pin is anchored to its real coordinate as a percentage, so it stays on
   its place at every width. Marker AREA is proportional to count, which is what
   "sized by volume" means. Teal throughout: no red, no severity ramp, and the
   number is printed inside, so size is never the only encoding. */
.lix-pin{
  position:absolute;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.lix-pin-dot{
  width:var(--lix-d);
  height:var(--lix-d);
  border-radius:50%;
  background:var(--teal);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(10px, 2.5cqw, 15px);
  font-weight:700;
  color:#04201b;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.lix-pin-l{
  font-size:clamp(9px, 2cqw, 12px);
  font-weight:600;
  color:#f4f5fb;
  background:rgba(5,6,13,.72);
  padding:2px 7px;
  border-radius:999px;
  white-space:nowrap;
}
[data-theme="light"] .lix-pin-l{
  color:#0e1320;
  background:rgba(255,255,255,.86);
  box-shadow:0 1px 4px rgba(20,30,60,.18);
}

.lix-rank{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.lix-rank li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.lix-rank li:last-child{ border-bottom:none; }
.lix-rank-pos{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  color:var(--text-3);
  width:18px;
  flex:none;
}
.lix-rank-name{ flex:1; color:var(--text); }
.lix-rank-n{
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
  white-space:nowrap;
}

/* ========================================================================
   VISUAL C  Find the right record
   ===================================================================== */
.lix-ex{ gap:16px; }
.lix-controls{
  display:grid;
  grid-template-columns:minmax(180px,1.6fr) repeat(2,minmax(130px,1fr)) auto;
  gap:12px;
  align-items:end;
}
.lix-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.lix-field label{
  font-size:12px;
  color:var(--text-2);
  font-weight:600;
}
.lix-field input,
.lix-field select{
  width:100%;
  font:inherit;
  font-size:14px;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  min-height:42px;
}
.lix-field select{
  /* keep the native control, just stop Safari shrinking it */
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
.lix-field input:focus-visible,
.lix-field select:focus-visible,
.lix-btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
.lix-btn{
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:10px 18px;
  min-height:42px;
  cursor:pointer;
  white-space:nowrap;
}
.lix-btn:hover:not(:disabled){ border-color:var(--teal); color:var(--teal); }
.lix-btn:disabled{ opacity:.45; cursor:default; }

.lix-status{
  font-size:13px;
  color:var(--text-2);
  margin:0;
  font-variant-numeric:tabular-nums;
}
.lix-empty{
  font-size:14px;
  color:var(--text-2);
  margin:0;
  padding:24px 0;
  text-align:center;
}
.lix-pill{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--text-2);
  background:var(--surface-2);
  white-space:nowrap;
}
.lix-rows td.sum{ white-space:normal; min-width:230px; }
.lix-rows td.rec{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;
}
.lix-pager{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.lix-pager .lix-status{ margin-right:auto; }

/* -- progressive enhancement ---------------------------------------------
   Without JavaScript the controls and pager never appear and the table is
   capped at the first six rows by CSS. lix.js adds .lix-ready and takes over,
   so a control is only ever visible when it actually works. */
.lix-ex:not(.lix-ready) .lix-controls,
.lix-ex:not(.lix-ready) .lix-pager,
.lix-ex:not(.lix-ready) .lix-empty{ display:none; }
.lix-ex:not(.lix-ready) .lix-rows tr:nth-child(n+7){ display:none; }
.lix-ex.lix-ready .lix-rows tr[hidden]{ display:none; }

/* ========================================================================
   Responsive
   ===================================================================== */
@media (max-width:900px){
  .lix-controls{ grid-template-columns:1fr 1fr; }
  .lix-controls .lix-field:first-child{ grid-column:1 / -1; }
  .lix-controls .lix-btn{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .lix{ padding:18px; }
  .lix-chart{ grid-template-columns:auto 1fr; gap:0 8px; }
  .lix-col{ height:170px; }
  .lix-xlabel{ font-size:10.5px; }
  .lix-rows td.sum{ min-width:0; }
}
@media (max-width:420px){
  .lix-plot{ gap:5px; }
  .lix-xlabel{ font-size:10px; letter-spacing:-0.01em; }
  .lix-controls{ grid-template-columns:1fr; }
  .lix-controls .lix-field:first-child,
  .lix-controls .lix-btn{ grid-column:auto; }
}

/* Narrow screens show the same fields as cards, so nothing is dropped. */
@media (max-width:700px){
  .lix-rows, .lix-rows tbody, .lix-rows tr, .lix-rows td{ display:block; width:auto; }
  .lix-ex .lix-table thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .lix-rows tr{
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    margin-bottom:10px;
    background:var(--surface-2);
  }
  .lix-rows td{
    border-bottom:none;
    padding:3px 0;
    white-space:normal;
    display:flex;
    gap:10px;
  }
  .lix-rows td::before{
    content:attr(data-label);
    flex:none;
    width:80px;
    color:var(--text-3);
    font-size:12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .lix-details > summary::before{ transition:none; }
}

/* Visual C's table caption duplicates the visible figcaption notice, so it is
   available to assistive technology only. The visible synthetic disclosure is
   the figcaption, which is never hidden. */
.lix-sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* 30 Sep 2026: wrap long URLs in article text (source lists) so no page is wider than a phone */
.article li,.article p{overflow-wrap:anywhere}