/* fonts/fonts.css — fiper-brand package file, bundled at build time (FF-R4C D2); source md5 288f9ffc17bf6f2be5db267c6123dbbd */
/* Licences: brand/fonts/licenses/ (SIL OFL 1.1 per family, copyright + reserved font names) */
/* Fiper Brand Identity System v2.3.5 — fonts.css (GENERATED by scripts/subset-fonts.py from brand/fonts/full/ — do not edit by hand).
   Unicode-range split subsets of the complete official files (same families, weights, styles and font-display; glyph outlines, GSUB/GPOS shaping and names untouched):
   IBM Plex Sans Arabic = arabic + latin (Latin + digits + currency stay in the Arabic family so digits inside Arabic runs never fall back); Barlow Condensed / Inter / IBM Plex Mono / IBM Plex Sans = latin + latin-ext.
   A page fetches only the ranges it uses. The complete files remain in fonts/full/ with fonts/full/fonts.css as the fallback set (same declarations, no unicode-range). Load this before tokens.css. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/BarlowCondensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/BarlowCondensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/BarlowCondensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/BarlowCondensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/brand/fonts/BarlowCondensed-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/brand/fonts/BarlowCondensed-800-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+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexMono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/IBMPlexSans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/IBMPlexSans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexSans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexSans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/IBMPlexSans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/IBMPlexSans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/IBMPlexSansArabic-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/Inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/Inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/Inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/Inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/Inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/Inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/Inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2200-22FF,U+2500-259F,U+25A0-25FF,U+2713-2714,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/Inter-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* tokens.css — fiper-brand package file, bundled at build time (FF-R4C D2); source md5 61f90333fe573e62ffb3969888ad300b */
/* Fiper Brand Identity System v2.6.0 — tokens.css (GENERATED from brand/tokens.json, DTCG 2025.10; do not edit by hand)
   Layers: --fp-p-* primitives · --fp-* semantic roles · --fp-c-* component tokens · --fp-observed-* = site observations kept for documentation, never to be used (verify-identity whitelists only these lines).
   Dark (charcoal) is the DEFAULT for every app and site; the light theme is APPROVED as OPTIONAL (CEO decision 30 Oct 2026, decision item 3): <html data-theme="light"> — a complete semantic set, user/system toggle; marketing surfaces stay charcoal.
   Status of every value (approved / observed / proposed / deprecated): tokens.json $extensions.fiper.status
   v2.3.4: textual values (file names, placements, fixed wordings) are CSS <string>s in double quotes — a consumer that reads one from CSS strips the quotes (or reads tokens.json directly); the file parses with the strict PostCSS parser (gate: verify-tokens). */
:root{
  /* primitives */
  --fp-p-charcoal-950: #0A0708;
  --fp-p-charcoal-900: #0E0C0D;
  --fp-p-charcoal-875: #120D0E;
  --fp-p-charcoal-850: #141011;
  --fp-p-charcoal-825: #171112;
  --fp-p-charcoal-800: #1B1516;
  --fp-p-red-500: #DC2626;
  --fp-p-red-600: #A31212;
  --fp-p-red-800: #7A1512;
  --fp-p-ember-500: #F0421B;
  --fp-p-logo-red-light: #E03636;
  --fp-p-logo-red-mid: #AD1D1C;
  --fp-p-logo-red-dark: #9C1515;
  --fp-p-logo-shadow-light: #A82929; /* PROPOSED */
  --fp-p-logo-shadow-mid: #821615; /* PROPOSED */
  --fp-p-logo-shadow-dark: #751010; /* PROPOSED */
  --fp-p-logo-wordmark-dark: #2C2929;
  --fp-p-sand-100: #EDEAE6;
  --fp-p-sand-500: #8E8681;
  --fp-p-white: #FFFFFF;
  --fp-p-green-500: #2AB37A;
  --fp-p-amber-400: #D9A441;
  --fp-p-blue-400: #5B9BD5; /* PROPOSED */
  --fp-p-sand-50: #F7F4F1; /* PROPOSED */
  --fp-p-sand-75: #EFEBE7; /* PROPOSED */
  --fp-p-sand-600: #6B635E; /* PROPOSED */
  --fp-p-red-700: #B91C1C; /* PROPOSED */
  --fp-p-green-700: #146A45; /* PROPOSED */
  --fp-p-amber-700: #7A520A; /* PROPOSED */
  --fp-p-blue-700: #275E94; /* PROPOSED */
  --fp-p-sand-a09: rgba(237,234,230,0.09);
  --fp-p-sand-a12: rgba(237,234,230,0.12);
  --fp-p-sand-a14: rgba(237,234,230,0.14);
  --fp-p-sand-a35: rgba(237,234,230,0.35);
  --fp-p-sand-a05: rgba(237,234,230,0.05);
  --fp-p-sand-a06: rgba(237,234,230,0.06); /* PROPOSED */
  --fp-p-sand-a07: rgba(237,234,230,0.07); /* PROPOSED */
  --fp-p-sand-a08: rgba(237,234,230,0.08); /* PROPOSED */
  --fp-p-sand-a38: rgba(237,234,230,0.38); /* PROPOSED */
  --fp-p-red-a06: rgba(220,38,38,0.06);
  --fp-p-red-a12: rgba(220,38,38,0.12); /* PROPOSED */
  --fp-p-red-a16: rgba(220,38,38,0.16);
  --fp-p-red-a28: rgba(220,38,38,0.28);
  --fp-p-red-a35: rgba(220,38,38,0.35);
  --fp-p-red-a40: rgba(220,38,38,0.40);
  --fp-p-red-a45: rgba(220,38,38,0.45);
  --fp-p-red-a50: rgba(220,38,38,0.50);
  --fp-p-mut-a85: rgba(142,134,129,0.85);
  --fp-p-mut-a90: rgba(142,134,129,0.9);
  --fp-p-bg-a72: rgba(10,7,8,0.72); /* PROPOSED */
  --fp-p-bg-a85: rgba(10,7,8,0.85);
  --fp-p-black-a55: rgba(0,0,0,0.55);
  --fp-p-green-a12: rgba(42,179,122,0.12); /* PROPOSED */
  --fp-p-amber-a12: rgba(217,164,65,0.12); /* PROPOSED */
  --fp-p-blue-a12: rgba(91,155,213,0.12); /* PROPOSED */
  --fp-p-ink-a10: rgba(18,13,14,0.10); /* PROPOSED */
  --fp-p-ink-a35: rgba(18,13,14,0.35); /* PROPOSED */
  --fp-p-ink-a08: rgba(18,13,14,0.08); /* PROPOSED */
  --fp-p-ink-a38: rgba(18,13,14,0.38); /* PROPOSED */
  --fp-p-ink-a18: rgba(18,13,14,0.18); /* PROPOSED */
  --fp-p-selection-a35: rgba(220,38,38,0.35);
  --fp-p-sand-200: #E6E1DC; /* PROPOSED */
  --fp-p-sand-150: #E9E5E1; /* PROPOSED */
  --fp-p-charcoal-775: #2A2325; /* PROPOSED */
  --fp-p-sand-a40: rgba(237,234,230,0.40); /* PROPOSED */
  --fp-p-ink-a55: rgba(18,13,14,0.55); /* PROPOSED */
  --fp-p-red-400: #F05252;
  --fp-p-sand-a28: rgba(237,234,230,0.28);
  --fp-p-ink-a22: rgba(18,13,14,0.22);
  --fp-p-bg-a08: rgba(10,7,8,0.08);
  --fp-p-paper-a85: rgba(247,244,241,0.85);
  --fp-p-red-a08: rgba(220,38,38,0.08);
  --fp-p-green-a08: rgba(42,179,122,0.08);
  --fp-p-amber-a08: rgba(217,164,65,0.08);
  --fp-p-blue-a08: rgba(91,155,213,0.08);
  --fp-p-sand-300: #DAD4CE;
  /* semantic */
  --fp-ground-bg: #0A0708;
  --fp-ground-coal: #120D0E;
  --fp-ground-panel: #171112;
  --fp-ground-frame: #0E0C0D;
  --fp-ground-chrome: #141011;
  --fp-ground-bezel: #1B1516;
  --fp-line-ash: rgba(237,234,230,0.09);
  --fp-line-strong: rgba(237,234,230,0.35);
  --fp-line-frame: rgba(237,234,230,0.12);
  --fp-line-brand: rgba(220,38,38,0.45);
  --fp-line-brand-soft: rgba(220,38,38,0.40);
  --fp-line-dark-mail: #2A2325; /* PROPOSED */
  --fp-line-input: rgba(237,234,230,0.40); /* PROPOSED */
  --fp-line-divider: rgba(237,234,230,0.28);
  --fp-text-primary: #EDEAE6;
  --fp-text-muted: #8E8681;
  --fp-text-risk: rgba(142,134,129,0.9);
  --fp-text-disclaimer: rgba(142,134,129,0.85);
  --fp-text-on-brand: #FFFFFF;
  --fp-text-selection: #FFFFFF;
  --fp-text-icon-on-brand: #FFFFFF; /* PROPOSED */
  --fp-text-on-success: #0A0708; /* PROPOSED */
  --fp-text-on-danger: #0A0708; /* PROPOSED */
  --fp-text-label: #8E8681; /* PROPOSED */
  --fp-brand-red: #DC2626;
  --fp-brand-red-deep: #7A1512;
  --fp-brand-red-gradient-end: #A31212;
  --fp-brand-ember: #F0421B;
  --fp-brand-red-wash: rgba(220,38,38,0.06);
  --fp-brand-red-wash-strong: rgba(220,38,38,0.16);
  --fp-brand-selection-bg: rgba(220,38,38,0.35);
  --fp-brand-logo-gradient: linear-gradient(90deg, #E03636 0%, #AD1D1C 50%, #9C1515 100%);
  --fp-action-primary: #DC2626;
  --fp-action-primary-end: #A31212;
  --fp-action-primary-pressed: #7A1512; /* PROPOSED */
  --fp-observed-action-primary-shadow: rgba(220,38,38,0.35); /* OBSERVED ONLY — not applied */
  --fp-observed-action-primary-shadow-hover: rgba(220,38,38,0.5); /* OBSERVED ONLY — not applied */
  --fp-action-focus-ring: #F0421B; /* PROPOSED */
  --fp-action-disabled-fg: rgba(237,234,230,0.38); /* PROPOSED */
  --fp-action-disabled-bg: rgba(237,234,230,0.08); /* PROPOSED */
  --fp-state-success: #2AB37A;
  --fp-state-danger: #F05252;
  --fp-state-warning: #D9A441; /* PROPOSED */
  --fp-state-info: #5B9BD5; /* PROPOSED */
  --fp-state-success-wash: rgba(42,179,122,0.12); /* PROPOSED */
  --fp-state-danger-wash: rgba(220,38,38,0.12);
  --fp-state-warning-wash: rgba(217,164,65,0.12); /* PROPOSED */
  --fp-state-info-wash: rgba(91,155,213,0.12); /* PROPOSED */
  --fp-finance-gain: #2AB37A;
  --fp-finance-loss: #F05252;
  --fp-finance-neutral: #8E8681;
  --fp-finance-pending: #D9A441;
  --fp-chart-series-1: #DC2626; /* PROPOSED */
  --fp-chart-series-2: #EDEAE6; /* PROPOSED */
  --fp-chart-series-3: #8E8681; /* PROPOSED */
  --fp-chart-series-4: #D9A441; /* PROPOSED */
  --fp-chart-series-5: #5B9BD5; /* PROPOSED */
  --fp-chart-series-6: #2AB37A; /* PROPOSED */
  --fp-chart-candle-up: #2AB37A;
  --fp-chart-candle-down: #F05252;
  --fp-chart-grid: rgba(237,234,230,0.07); /* PROPOSED */
  --fp-chart-axis: #8E8681;
  --fp-chart-crosshair: rgba(237,234,230,0.35); /* PROPOSED */
  --fp-chart-area-fill: rgba(220,38,38,0.12); /* PROPOSED */
  --fp-chart-benchmark: #8E8681;
  --fp-chart-line: #2AB37A;
  --fp-chart-line-down: #F05252;
  --fp-chart-dot: #2AB37A;
  --fp-media-grade: rgba(10,7,8,0.08);
  --fp-font-family-display: 'Barlow Condensed', sans-serif;
  --fp-font-family-body: Inter, sans-serif;
  --fp-font-family-mono: 'IBM Plex Mono', monospace;
  --fp-font-family-arabic: 'IBM Plex Sans Arabic', Inter, sans-serif;
  --fp-font-family-sans-alt: 'IBM Plex Sans', sans-serif; /* PROPOSED */
  --fp-font-weight-regular: 400; /* PROPOSED */
  --fp-font-weight-medium: 500; /* PROPOSED */
  --fp-font-weight-semibold: 600; /* PROPOSED */
  --fp-font-weight-bold: 700; /* PROPOSED */
  --fp-font-weight-display: 800; /* PROPOSED */
  --fp-font-size-xs: 0.68rem;
  --fp-font-size-sm: 0.75rem;
  --fp-font-size-md: 0.85rem;
  --fp-font-size-base: 0.92rem;
  --fp-font-size-lg: 0.98rem;
  --fp-font-size-xl: 1.3rem;
  --fp-font-size-2xl: 1.9rem;
  --fp-font-size-3xl: 2rem;
  --fp-font-size-4xl: 2.9rem;
  --fp-font-size-app-caption: 13px;
  --fp-font-size-app-body: 16px;
  --fp-font-size-app-title: 20px;
  --fp-font-size-app-display: 28px;
  --fp-font-size-app-hero: 40px;
  --fp-font-lineHeight-body: 1.65;
  --fp-font-lineHeight-heading: 1.05;
  --fp-font-lineHeight-arabic-body: 1.9;
  --fp-font-lineHeight-arabic-heading: 1.3;
  --fp-font-lineHeight-legal: 1.7;
  --fp-font-letterSpacing-heading: 0.5px;
  --fp-font-letterSpacing-eyebrow: 0.06em; /* PROPOSED */
  --fp-observed-font-letterSpacing-tag: 0.2em; /* OBSERVED ONLY — not applied */
  --fp-font-letterSpacing-arabic: 0;
  --fp-font-app-scale-caption: 13px;
  --fp-font-app-scale-body: 16px;
  --fp-font-app-scale-title: 20px;
  --fp-font-app-scale-display: 28px;
  --fp-font-app-scale-hero: 40px;
  --fp-space-1: 4px; /* PROPOSED */
  --fp-space-2: 8px; /* PROPOSED */
  --fp-space-3: 12px; /* PROPOSED */
  --fp-space-4: 16px; /* PROPOSED */
  --fp-space-5: 20px; /* PROPOSED */
  --fp-space-6: 24px; /* PROPOSED */
  --fp-space-7: 28px; /* PROPOSED */
  --fp-space-8: 32px; /* PROPOSED */
  --fp-space-10: 40px; /* PROPOSED */
  --fp-space-12: 48px; /* PROPOSED */
  --fp-space-16: 64px; /* PROPOSED */
  --fp-space-24: 96px; /* PROPOSED */
  --fp-space-30: 120px; /* PROPOSED */
  --fp-space-btn-y: 14px;
  --fp-space-btn-x: 32px;
  --fp-space-btn-sm-y: 10px;
  --fp-space-btn-sm-x: 22px;
  --fp-space-card-y: 26px;
  --fp-space-card-x: 24px;
  --fp-space-gutter: 16px;
  --fp-space-section-min: 64px;
  --fp-space-section-max: 120px;
  --fp-size-wrap-max: 1200px;
  --fp-size-wrap-pct: 92%;
  --fp-size-logo-nav-h: 26px;
  --fp-size-touch-min: 44px; /* PROPOSED */
  --fp-size-icon-tile: 52px;
  --fp-size-icon-sm: 16px; /* PROPOSED */
  --fp-size-icon-md: 20px; /* PROPOSED */
  --fp-size-icon-lg: 24px; /* PROPOSED */
  --fp-size-header-h: 56px; /* PROPOSED */
  --fp-size-tabbar-h: 56px; /* PROPOSED */
  --fp-size-bp-min: 360px; /* PROPOSED */
  --fp-size-bp-design: 390px; /* PROPOSED */
  --fp-size-bp-sm: 640px;
  --fp-size-bp-md: 900px;
  --fp-size-bp-lg: 1200px;
  --fp-radius-pill: 999px;
  --fp-radius-card: 16px;
  --fp-radius-media: 14px;
  --fp-radius-sheet: 18px;
  --fp-radius-input: 12px; /* PROPOSED */
  --fp-radius-sm: 8px; /* PROPOSED */
  --fp-radius-logo-mark: 23%;
  --fp-radius-device: 22px;
  --fp-observed-shadow-primary: 0 6px 26px rgba(220,38,38,0.35); /* OBSERVED ONLY — not applied */
  --fp-observed-shadow-primary-hover: 0 10px 36px rgba(220,38,38,0.5); /* OBSERVED ONLY — not applied */
  --fp-shadow-overlay: 0 22px 70px rgba(0,0,0,0.55);
  --fp-shadow-none: none; /* PROPOSED */
  --fp-z-base: 0; /* PROPOSED */
  --fp-z-raised: 10; /* PROPOSED */
  --fp-z-sticky: 20; /* PROPOSED */
  --fp-z-header: 80;
  --fp-z-scrim: 90; /* PROPOSED */
  --fp-z-sheet: 100; /* PROPOSED */
  --fp-z-toast: 110; /* PROPOSED */
  --fp-z-tooltip: 120; /* PROPOSED */
  --fp-motion-duration-press: 100ms;
  --fp-motion-duration-hover: 250ms;
  --fp-motion-duration-state: 300ms;
  --fp-motion-duration-surface: 350ms;
  --fp-motion-duration-reveal: 800ms;
  --fp-motion-duration-small: 200ms;
  --fp-motion-duration-sheet: 280ms;
  --fp-motion-duration-large: 400ms;
  --fp-motion-duration-count: 600ms;
  --fp-motion-duration-success: 1200ms;
  --fp-motion-duration-shake: 320ms;
  --fp-motion-duration-skeleton: 1400ms;
  --fp-motion-easing-standard: cubic-bezier(0.2,0.7,0.2,1);
  --fp-motion-easing-exit: cubic-bezier(0.22,1,0.36,1);
  --fp-motion-easing-press: ease-out;
  --fp-motion-easing-enter: cubic-bezier(0.2,0.7,0.2,1);
  --fp-motion-easing-spring-soft: cubic-bezier(0.34,1.2,0.64,1);
  --fp-motion-press-scale: 0.97;
  --fp-motion-reveal-offset: 26px;
  --fp-motion-offset-small: 8px;
  --fp-motion-offset-push: 24px;
  --fp-motion-offset-sheet: 100%;
  --fp-motion-offset-count: 1em;
  --fp-motion-offset-shake: 6px;
  --fp-motion-reduced-motion: "opacity-or-none";
  --fp-motion-haptics-financial-confirm: "medium";
  --fp-motion-haptics-success: "success";
  --fp-motion-haptics-error: "error";
  --fp-motion-haptics-curve-edge: "light";
  --fp-motion-haptics-web-ios: "unsupported";
  --fp-motion-haptics-web-android: "navigator.vibrate";
  --fp-motion-haptics-native: "full";
  /* component */
  --fp-c-button-primary-fill: linear-gradient(120deg, #DC2626, #A31212);
  --fp-c-button-primary-text: #FFFFFF;
  --fp-c-button-primary-icon: #FFFFFF;
  --fp-c-button-primary-shadow: none; /* PROPOSED */
  --fp-c-button-primary-shadow-hover: none; /* PROPOSED */
  --fp-c-button-primary-fill-pressed: #7A1512;
  --fp-c-button-primary-radius: 999px;
  --fp-c-button-primary-padding-y: 14px;
  --fp-c-button-primary-padding-x: 32px;
  --fp-c-button-primary-font-size: 0.92rem;
  --fp-c-button-primary-font-weight: 700;
  --fp-c-button-primary-press-scale: 0.97;
  --fp-c-button-primary-press-duration: 100ms;
  --fp-c-button-secondary-fill: #171112;
  --fp-c-button-secondary-border: rgba(237,234,230,0.35);
  --fp-c-button-secondary-text: #EDEAE6;
  --fp-c-button-ghost-border: rgba(237,234,230,0.09);
  --fp-c-button-ghost-border-hover: rgba(237,234,230,0.35);
  --fp-c-button-ghost-text: #EDEAE6;
  --fp-c-button-destructive-fill: #F05252; /* PROPOSED */
  --fp-c-button-destructive-text: #0A0708;
  --fp-c-button-destructive-default-style: "outline or text — never filled";
  --fp-c-button-destructive-fill-scope: "final-confirmation-dialog-only";
  --fp-c-button-disabled-fill: rgba(237,234,230,0.08);
  --fp-c-button-disabled-text: rgba(237,234,230,0.38);
  --fp-c-button-focus-ring: #F0421B;
  --fp-c-button-min-height: 44px;
  --fp-c-button-small-padding-y: 10px;
  --fp-c-button-small-padding-x: 22px;
  --fp-c-button-small-font-size: 0.82rem;
  --fp-c-input-fill: #120D0E; /* PROPOSED */
  --fp-c-input-border: rgba(237,234,230,0.40); /* PROPOSED */
  --fp-c-input-border-error: #F05252;
  --fp-c-input-text: #EDEAE6;
  --fp-c-input-placeholder: #8E8681;
  --fp-c-input-radius: 12px;
  --fp-c-input-font-size: 16px;
  --fp-c-input-min-height: 44px;
  --fp-c-input-padding: 12px 14px; /* PROPOSED */
  --fp-c-input-otp-width: 44px; /* PROPOSED */
  --fp-c-input-otp-height: 52px; /* PROPOSED */
  --fp-c-input-otp-font-size: 22px; /* PROPOSED */
  --fp-c-input-otp-gap: 8px; /* PROPOSED */
  --fp-c-input-otp-active-border: #F0421B;
  --fp-c-card-fill: #171112;
  --fp-c-card-border: rgba(237,234,230,0.09);
  --fp-c-card-border-hover: rgba(220,38,38,0.45);
  --fp-c-card-radius: 16px;
  --fp-c-card-padding-y: 26px;
  --fp-c-card-padding-x: 24px;
  --fp-c-card-title-size: 1.3rem;
  --fp-c-table-header-fill: #120D0E;
  --fp-c-table-header-text: #8E8681;
  --fp-c-table-row-line: rgba(237,234,230,0.09);
  --fp-c-table-row-height: 48px; /* PROPOSED */
  --fp-c-table-row-height-compact: 40px; /* PROPOSED */
  --fp-c-table-row-selected: rgba(220,38,38,0.06);
  --fp-c-table-number-font: 'IBM Plex Mono', monospace;
  --fp-c-chip-height: 24px; /* PROPOSED */
  --fp-c-chip-brand-height: 20px;
  --fp-c-chip-radius: 999px;
  --fp-c-chip-wash-alpha: 0.12; /* PROPOSED */
  --fp-c-chip-sharia-fill: rgba(42,179,122,0.12);
  --fp-c-chip-sharia-text: #2AB37A; /* PROPOSED */
  --fp-c-toast-fill: #120D0E;
  --fp-c-toast-border: rgba(237,234,230,0.35);
  --fp-c-toast-accent-width: 3px; /* PROPOSED */
  --fp-c-toast-max-width: 420px; /* PROPOSED */
  --fp-c-toast-duration: 300ms;
  --fp-c-toast-auto-dismiss: 5000ms; /* PROPOSED */
  --fp-c-tabbar-height: 56px;
  --fp-c-tabbar-fill: rgba(10,7,8,0.92); /* PROPOSED */
  --fp-c-tabbar-blur: 14px;
  --fp-c-tabbar-active: #DC2626;
  --fp-c-tabbar-inactive: #8E8681;
  --fp-c-tabbar-label-size: 11px; /* PROPOSED */
  --fp-c-tabbar-icon-size: 24px;
  --fp-c-header-height: 56px;
  --fp-c-header-fill: rgba(10,7,8,0.85);
  --fp-c-header-border: rgba(237,234,230,0.09);
  --fp-c-header-logo-height: 26px;
  --fp-c-header-descriptor-min-width: 640px;
  --fp-c-sheet-fill: #171112;
  --fp-c-sheet-radius: 18px;
  --fp-c-sheet-scrim: rgba(10,7,8,0.72); /* PROPOSED */
  --fp-c-sheet-shadow: 0 22px 70px rgba(0,0,0,0.55);
  --fp-c-sheet-handle: 36px 4px; /* PROPOSED */
  --fp-c-sheet-in-duration: 350ms;
  --fp-c-dialog-destructive-cancel-style: "secondary-outline-filled";
  --fp-c-dialog-destructive-initial-focus: "cancel";
  --fp-c-dialog-destructive-order: "safe-start, destructive-end";
  --fp-c-dialog-confirm-cancel-style: "ghost";
  --fp-c-skeleton-fill: rgba(237,234,230,0.09);
  --fp-c-skeleton-pulse-duration: 1200ms; /* PROPOSED */
  --fp-c-skeleton-pulse-min-opacity: 0.45; /* PROPOSED */
  --fp-c-skeleton-show-after: 150ms; /* PROPOSED */
  --fp-c-skeleton-min-visible: 400ms; /* PROPOSED */
  --fp-c-chart-background: #171112;
  --fp-c-chart-grid: rgba(237,234,230,0.07);
  --fp-c-chart-axis-text: #8E8681;
  --fp-c-chart-axis-font-size: 0.68rem;
  --fp-c-chart-line-width: 2px;
  --fp-c-chart-candle-body: 10px; /* PROPOSED */
  --fp-c-chart-candle-wick: 1px; /* PROPOSED */
  --fp-c-chart-up: #2AB37A;
  --fp-c-chart-down: #F05252;
  --fp-c-chart-benchmark-dash: 4 4; /* PROPOSED */
  --fp-c-chart-line: #2AB37A;
  --fp-c-chart-dot: #2AB37A;
  --fp-c-chart-app-grid: none;
  --fp-c-chart-app-y-axis: none;
  --fp-c-chart-app-value-labels: "first-and-last";
  --fp-c-eyebrow-font: Inter, sans-serif; /* PROPOSED */
  --fp-c-eyebrow-size: 13px;
  --fp-c-eyebrow-weight: 600; /* PROPOSED */
  --fp-c-eyebrow-letter-spacing: 0.06em; /* PROPOSED */
  --fp-c-eyebrow-color: #8E8681; /* PROPOSED */
  --fp-c-eyebrow-arabic-font: 'IBM Plex Sans Arabic', Inter, sans-serif;
  --fp-c-eyebrow-arabic-weight: 600; /* PROPOSED */
  --fp-c-eyebrow-arabic-letter-spacing: 0;
  --fp-c-logo-nav-height: 26px;
  --fp-c-logo-master-file: "logos/svg/fiper-lockup-horizontal-colour.svg";
  --fp-c-logo-clear-space: 0.5; /* PROPOSED */
  --fp-c-logo-min-lockup-screen: 20px; /* PROPOSED */
  --fp-c-logo-min-lockup-print: 6mm; /* PROPOSED */
  --fp-c-logo-min-mark-screen: 16px; /* PROPOSED */
  --fp-c-logo-min-mark-print: 4mm; /* PROPOSED */
  --fp-c-logo-aspect: 2.851;
  --fp-c-logo-mark-aspect: 0.987;
  --fp-c-logo-mark-radius-ratio: 23%;
  --fp-c-logo-gap-to-wordmark: 0.156;
  --fp-c-logo-product-lockup-name-height: 0.62; /* PROPOSED */
  --fp-c-logo-product-lockup-gap: 0.4; /* PROPOSED */
  --fp-c-logo-product-lockup-by-fiper-lockup-height: 0.5; /* PROPOSED */
  --fp-c-logo-product-lockup-partner-logo-height: 1.0; /* PROPOSED */
  --fp-c-logo-video-corner-height: 96px;
  --fp-c-video-logo-corner-height: 96px;
  --fp-c-video-logo-corner-inset: 64px;
  --fp-c-video-lower-third-hold: 3400ms;
  --fp-c-video-lower-third-count: 1;
  --fp-c-video-reveal-easing: 0.2,0.7,0.2,1;
  --fp-c-video-fade-easing: linear;
  --fp-c-video-risk-line-size-1080: 24px;
  --fp-c-video-risk-line-size-1920: 22px;
  --fp-c-video-risk-line-placement-9x16: "side-left-rotated";
  --fp-c-video-risk-line-placement-16x9: "bottom-start";
  --fp-c-video-risk-line-color: rgba(237,234,230,0.28);
  --fp-c-video-risk-line-presence: "first-to-last-frame";
  --fp-c-video-corner-mark-fade: 300ms;
  --fp-c-video-corner-word-delay: 150ms;
  --fp-c-video-transition-fade: 240ms;
  --fp-c-video-transition-opacity: 0.9;
  --fp-c-video-grain-opacity-min: 0.04;
  --fp-c-video-grain-opacity-max: 0.06;
  --fp-c-video-grain-fps: 24;
  --fp-c-video-vignette-max: 0.45;
  --fp-c-video-entity-line: "Fiper Global UAE — Company registration number: 2422384";
  --fp-c-video-master-encode: "H.264 CRF 16 preset slow, AAC 256k, yuv420p, faststart";
  --fp-c-video-share-encode: "H.264 CRF 21, maxrate 10M, bufsize 20M, AAC 256k, faststart";
  --fp-c-video-fps: 30;
  --fp-c-video-closing-card: none;
  --fp-c-video-logo-presence-official: "first-to-last-frame";
  --fp-c-video-logo-presence-person: none;
  --fp-c-video-entity-line-placement: "caption";
  --fp-c-video-entity-line-placement-person: "inside-risk-line";
  --fp-c-video-caption-emphasis-danger: #F05252;
  --fp-c-video-caption-emphasis-profit: #2AB37A;
  --fp-c-video-caption-emphasis-info: #D9A441;
  --fp-c-video-lower-third-total-max: 4000ms;
  --fp-c-video-lower-third-placement-9x16: "bottom-centre";
  --fp-c-video-lower-third-bottom-9x16: 80%;
  --fp-c-video-takeaway-size-1080: 76px;
  --fp-c-video-takeaway-side-margin-1080: 130px;
  --fp-c-video-title-card-size-1080: 76px;
  --fp-c-video-title-card-side-margin-1080: 130px;
  --fp-c-video-caption-max-chars: 26;
  --fp-c-video-caption-during-takeaway: "hide-matching-group";
  --fp-c-video-caption-text-source: "spoken-as-recorded";
  --fp-c-video-non-native-aspect: "blurred-source-backdrop";
  --fp-c-video-entity-line-mau: "Fiper Global MAU — Company registration number: GB23201759";
  --fp-c-video-entity-line-person: "Fiper Global — Company registration number GB23201759";
  --fp-c-email-logo-width: 160px;
  --fp-c-email-logo-height: 56px;
  --fp-c-email-logo-file: "email/email-header-160-paper@2x.png";
  --fp-c-email-logo-ground: #F7F4F1;
  --fp-c-email-scheme: "paper-only";
  --fp-c-email-language-parity: "recipient-language + one equivalence line";
  --fp-c-email-equivalence-line-ar: "هذه الرسالة متاحة بالعربية";
  --fp-c-email-equivalence-line-en: "This e-mail is also available in English";
  --fp-c-social-safe-margin-post-min: 72px;
  --fp-c-social-safe-margin-post-max: 84px;
  --fp-c-social-safe-margin-story: 96px;
  --fp-c-social-risk-line-size: 33px;
  --fp-c-social-risk-line: "الاستثمار ينطوي على مخاطر · Investing involves risk";
  --fp-c-qr-side-ratio: 0.12;
  --fp-c-qr-min-side: 160px;
  --fp-c-qr-quiet-zone: 4;
  --fp-c-qr-position: "bottom-start";
  --fp-c-qr-max-side: 300px;
  --fp-c-media-asset-types: "screen | artwork";
  --fp-c-media-grade: rgba(10,7,8,0.08);
  --fp-c-media-frame-bezel: #1B1516;
  --fp-c-risk-line-text: "الاستثمار ينطوي على مخاطر · Investing involves risk";
  --fp-c-risk-line-text-ar: "الاستثمار ينطوي على مخاطر";
  --fp-c-risk-line-text-en: "Investing involves risk";
  --fp-c-risk-line-placement: "side or bottom corner inside the safe margin; never over the subject or the headline; never hidden";
  --fp-c-risk-line-color: #8E8681;
  --fp-c-risk-line-min-size-1080: 12px;
  --fp-c-risk-line-min-size-2160: 24px;
  --fp-c-risk-line-min-size-social-360: 11px;
  --fp-c-risk-line-document-size: 8pt;
  --fp-c-risk-line-email-size: 11px;
  --fp-c-risk-line-ui-min-size: 13px;
  --fp-c-amount-font: "body-tabular";
  --fp-c-amount-font-family: Inter, sans-serif;
  --fp-c-amount-font-variant-numeric: tabular-nums lining-nums;
  --fp-c-code-font: "mono";
  --fp-c-code-font-family: 'IBM Plex Mono', monospace;
  --fp-c-app-header-logo-scope: "home-and-login-only";
  --fp-c-app-header-tab-title-size: 20px;
  --fp-c-app-header-logo-height: 26px;
  --fp-c-switch-on-fill: #2AB37A;
  --fp-c-switch-on-knob: #171112;
  --fp-c-switch-off-fill: #171112;
  --fp-c-switch-off-border: rgba(237,234,230,0.40);
  --fp-c-switch-off-knob: #8E8681;
  --fp-c-switch-width: 44px;
  --fp-c-switch-height: 26px;
  --fp-c-switch-knob: 20px;
  --fp-c-issuer-mark-tile-fill: #120D0E;
  --fp-c-issuer-mark-tile-border: rgba(237,234,230,0.09);
  --fp-c-issuer-mark-text: #EDEAE6;
  --fp-c-issuer-mark-font: 'Barlow Condensed', sans-serif;
  --fp-c-issuer-mark-font-size-40: 18px;
  --fp-c-issuer-mark-letters: "1-2";
  --fp-c-issuer-mark-size-sm: 24px;
  --fp-c-issuer-mark-size-md: 40px;
  --fp-c-issuer-mark-size-lg: 56px;
  --fp-c-issuer-mark-wordmark-min: 56px;
  --fp-c-issuer-mark-third-party-logos: "official vector unmodified; raster redrawn as vector without modification; otherwise the typographic mark";
  --fp-c-issuer-mark-min-contrast: "3:1";
  --fp-c-illustration-style: "monoline-flat";
  --fp-c-illustration-stroke-width: 2.5;
  --fp-c-illustration-viewbox: 120;
  --fp-c-illustration-size-min: 120px;
  --fp-c-illustration-size-max: 160px;
  --fp-c-illustration-learn-card-size: "56–96 px";
  --fp-c-illustration-max-paths: 40;
  --fp-c-illustration-max-bytes: 12288;
  --fp-c-illustration-line: #EDEAE6;
  --fp-c-illustration-fill-a: #171112;
  --fp-c-illustration-fill-b: #8E8681;
  --fp-c-illustration-fill-large: #8E8681;
  --fp-c-illustration-accent: #DC2626;
  --fp-c-illustration-success: #2AB37A;
  --fp-c-illustration-warning: #D9A441;
  --fp-c-illustration-placement: "with the title pole of the zero state, above the title; never on dense financial screens";
  --fp-c-learn-card-tint-default: #171112;
  --fp-c-learn-card-tint-why-funds: rgba(91,155,213,0.12);
  --fp-c-learn-card-tint-sharia: rgba(42,179,122,0.12);
  --fp-c-learn-card-tint-daily-batch: rgba(220,38,38,0.06);
  --fp-c-learn-card-tint-risk: rgba(217,164,65,0.12);
  --fp-c-learn-card-tint-distributions: rgba(42,179,122,0.12);
  --fp-c-learn-card-scene-ratio: "16 / 10";
  --fp-c-learn-card-title-size: 20px;
  --fp-c-learn-card-line-size: 16px;
  --fp-c-learn-card-width: min(280px, 78vw);
  --fp-c-learn-card-gap: 12px;
  --fp-c-learn-card-read-mark: #2AB37A;
  --fp-c-learn-card-sheet-screens: "3–5";
  --fp-c-scene-viewbox: 240; /* PROPOSED */
  --fp-c-scene-size-min: 200px; /* PROPOSED */
  --fp-c-scene-size-max: 280px; /* PROPOSED */
  --fp-c-scene-learn-ratio: "16 / 10"; /* PROPOSED */
  --fp-c-scene-max-elements: 160; /* PROPOSED */
  --fp-c-scene-max-bytes: 61440; /* PROPOSED */
  --fp-c-scene-line: #EDEAE6;
  --fp-c-scene-layer-1: #1B1516;
  --fp-c-scene-layer-2: #120D0E;
  --fp-c-scene-shadow: #0E0C0D;
  --fp-c-scene-detail: #8E8681;
  --fp-c-scene-accent-red: #DC2626;
  --fp-c-scene-accent-success: #2AB37A;
  --fp-c-scene-accent-warning: #D9A441;
  --fp-c-scene-loading: "lazy-after-first-paint"; /* PROPOSED */
  --fp-c-scene-top: #2A2325;
  --fp-c-scene-contact: #120D0E;
  --fp-c-scene-contact-opacity: 0.7;
  --fp-c-scene-contact-opacity-light: 0.10;
  --fp-c-scene-rim: #8E8681;
  --fp-c-scene-rim-opacity: 0.5;
  --fp-c-scene-stroke-width: 3;
  --fp-c-scene-rim-width: 1.5;
  --fp-c-animation-format: "lottie";
  --fp-c-animation-max-bytes: 81920;
  --fp-c-animation-fps: 60;
  --fp-c-animation-reduced-motion: "last-frame-still";
  --fp-c-animation-play: "once";
  --fp-c-rendered-style: "rendered-object";
  --fp-c-rendered-master-box: 2048;
  --fp-c-rendered-sizes: 240 480 960 1920;
  --fp-c-rendered-emblem-sizes: 40 48 80 96 192;
  --fp-c-rendered-max-bytes-960: 184320;
  --fp-c-rendered-motion-seconds: 1.2;
  --fp-c-rendered-motion-max-bytes: 307200;
  --fp-c-rendered-light-mode: "re-light";
  --fp-c-rendered-size-hero: 320px;
  --fp-c-rendered-size-moment: 320px;
  --fp-c-rendered-learn-ratio: "16 / 10";
  --fp-c-rendered-min-size: 40;
  --fp-c-rendered-scene-min-size: 320;
  /* short aliases used by components.css */
  --fp-bg: var(--fp-ground-bg); --fp-surface: var(--fp-ground-panel); --fp-surface-2: var(--fp-ground-coal);
  --fp-line: var(--fp-line-ash); --fp-fg: var(--fp-text-primary); --fp-fg-muted: var(--fp-text-muted);
  --fp-primary: var(--fp-brand-red); --fp-primary-fg: var(--fp-text-on-brand);
  --fp-red-as-text: var(--fp-brand-red);
  --fp-font-ui: var(--fp-font-family-body); --fp-font-heading: var(--fp-font-family-display);
  color-scheme: dark;
}
:root[dir="rtl"], :root[lang="ar"], [lang="ar"]{ --fp-font-ui: var(--fp-font-family-arabic); --fp-font-heading: var(--fp-font-family-arabic); }
/* APPROVED OPTIONAL light theme — decision item 3 (CEO 30 Oct 2026): dark is the default, this block is the complete light set for apps (and the paper ground of documents) */
:root[data-theme="light"]{
  --fp-ground-bg: #F7F4F1;
  --fp-ground-coal: #EFEBE7;
  --fp-ground-panel: #FFFFFF;
  --fp-ground-frame: #EFEBE7;
  --fp-line-ash: rgba(18,13,14,0.10);
  --fp-line-strong: rgba(18,13,14,0.35);
  --fp-text-primary: #120D0E;
  --fp-text-muted: #6B635E;
  --fp-state-success: #146A45;
  --fp-state-danger: #B91C1C;
  --fp-state-warning: #7A520A;
  --fp-state-info: #275E94;
  --fp-chart-grid: rgba(18,13,14,0.08);
  --fp-action-disabled-fg: rgba(18,13,14,0.38);
  --fp-action-disabled-bg: rgba(18,13,14,0.08);
  --fp-line-input: rgba(18,13,14,0.55);
  --fp-ground-chrome: rgba(247,244,241,0.85);
  --fp-ground-bezel: #1B1516;
  --fp-line-frame: rgba(18,13,14,0.18);
  --fp-line-brand: rgba(220,38,38,0.45);
  --fp-text-label: #6B635E;
  --fp-text-risk: #6B635E;
  --fp-text-disclaimer: #6B635E;
  --fp-action-focus-ring: #DC2626;
  --fp-text-selection: rgba(220,38,38,0.35);
  --fp-state-success-wash: rgba(42,179,122,0.08);
  --fp-state-danger-wash: rgba(220,38,38,0.08);
  --fp-state-warning-wash: rgba(217,164,65,0.08);
  --fp-state-info-wash: rgba(91,155,213,0.08);
  --fp-chart-axis: #6B635E;
  --fp-chart-benchmark: #6B635E;
  --fp-chart-crosshair: rgba(18,13,14,0.35);
  --fp-chart-area-fill: rgba(220,38,38,0.12);
  --fp-line-divider: rgba(18,13,14,0.22);
  --fp-finance-neutral: #6B635E;
  --fp-chart-series-2: #120D0E;
  --fp-chart-series-3: #6B635E;
  --fp-chart-series-4: #7A520A;
  --fp-chart-series-5: #275E94;
  --fp-chart-series-6: #146A45;
  --fp-chart-line: #146A45;
  --fp-chart-line-down: #B91C1C;
  --fp-chart-dot: #146A45;
  --fp-c-illustration-fill-large: #E6E1DC;
  --fp-c-scene-shadow: #DAD4CE;
  --fp-c-scene-line: #120D0E;
  --fp-c-scene-top: #FFFFFF;
  --fp-c-scene-layer-1: #EFEBE7;
  --fp-c-scene-layer-2: #E6E1DC;
  --fp-c-scene-contact: #120D0E;
  --fp-c-scene-rim: #FFFFFF;
  --fp-c-scene-detail: #6B635E;
  --fp-c-button-secondary-fill: #FFFFFF;
  --fp-c-button-secondary-border: rgba(18,13,14,0.35);
  --fp-c-button-secondary-text: #120D0E;
  --fp-c-button-ghost-border: rgba(18,13,14,0.10);
  --fp-c-button-ghost-border-hover: rgba(18,13,14,0.35);
  --fp-c-button-ghost-text: #120D0E;
  --fp-c-button-destructive-fill: #B91C1C;
  --fp-c-button-disabled-fill: rgba(18,13,14,0.08);
  --fp-c-button-disabled-text: rgba(18,13,14,0.38);
  --fp-c-button-focus-ring: #DC2626;
  --fp-c-input-fill: #EFEBE7;
  --fp-c-input-border: rgba(18,13,14,0.55);
  --fp-c-input-border-error: #B91C1C;
  --fp-c-input-text: #120D0E;
  --fp-c-input-placeholder: #6B635E;
  --fp-c-card-fill: #FFFFFF;
  --fp-c-card-border: rgba(18,13,14,0.10);
  --fp-c-card-border-hover: rgba(220,38,38,0.45);
  --fp-c-table-header-fill: #EFEBE7;
  --fp-c-table-header-text: #6B635E;
  --fp-c-table-row-line: rgba(18,13,14,0.10);
  --fp-c-chip-sharia-fill: rgba(42,179,122,0.08);
  --fp-c-chip-sharia-text: #146A45;
  --fp-c-toast-fill: #EFEBE7;
  --fp-c-toast-border: rgba(18,13,14,0.35);
  --fp-c-tabbar-inactive: #6B635E;
  --fp-c-header-border: rgba(18,13,14,0.10);
  --fp-c-sheet-fill: #FFFFFF;
  --fp-c-skeleton-fill: rgba(18,13,14,0.10);
  --fp-c-chart-background: #FFFFFF;
  --fp-c-chart-grid: rgba(18,13,14,0.08);
  --fp-c-chart-axis-text: #6B635E;
  --fp-c-chart-line: #146A45;
  --fp-c-chart-dot: #146A45;
  --fp-c-eyebrow-color: #6B635E;
  --fp-c-video-risk-line-color: rgba(18,13,14,0.22);
  --fp-c-media-frame-bezel: #1B1516;
  --fp-c-risk-line-color: #6B635E;
  --fp-c-switch-on-fill: #146A45;
  --fp-c-switch-on-knob: #FFFFFF;
  --fp-c-switch-off-fill: #FFFFFF;
  --fp-c-switch-off-border: rgba(18,13,14,0.55);
  --fp-c-switch-off-knob: #6B635E;
  --fp-c-issuer-mark-tile-fill: #EFEBE7;
  --fp-c-issuer-mark-tile-border: rgba(18,13,14,0.10);
  --fp-c-issuer-mark-text: #120D0E;
  --fp-c-illustration-line: #120D0E;
  --fp-c-illustration-fill-a: #FFFFFF;
  --fp-c-illustration-fill-b: #6B635E;
  --fp-c-illustration-success: #146A45;
  --fp-c-illustration-warning: #7A520A;
  --fp-c-learn-card-tint-default: #FFFFFF;
  --fp-c-learn-card-tint-why-funds: rgba(91,155,213,0.08);
  --fp-c-learn-card-tint-sharia: rgba(42,179,122,0.08);
  --fp-c-learn-card-tint-risk: rgba(217,164,65,0.08);
  --fp-c-learn-card-tint-distributions: rgba(42,179,122,0.08);
  --fp-c-learn-card-read-mark: #146A45;
  --fp-c-scene-accent-success: #146A45;
  --fp-c-scene-accent-warning: #7A520A;
  --fp-c-scene-contact-opacity: 0.10;
  --fp-red-as-text: #B91C1C;
  --fp-finance-gain: #146A45; --fp-finance-loss: #B91C1C; --fp-finance-pending: #7A520A;
  --fp-chart-candle-up: #146A45; --fp-chart-candle-down: #B91C1C;
  --fp-shadow-overlay: 0 22px 70px rgba(18,13,14,0.18);
  --fp-c-input-fill: #FFFFFF; --fp-c-table-header-fill: var(--fp-ground-frame); --fp-c-toast-fill: #FFFFFF; --fp-c-sheet-fill: #FFFFFF; --fp-c-sheet-scrim: rgba(18,13,14,0.55); --fp-c-chart-background: #FFFFFF; --fp-c-card-fill: #FFFFFF; --fp-c-header-fill: rgba(247,244,241,0.85); --fp-c-button-primary-shadow: none;
  color-scheme: light;
}
/* base */
html{background:var(--fp-bg);color:var(--fp-fg);font-family:var(--fp-font-ui);line-height:var(--fp-font-lineHeight-body);-webkit-font-smoothing:antialiased;font-synthesis:none}
[lang="ar"]{line-height:var(--fp-font-lineHeight-arabic-body);letter-spacing:0}
/* v2.4.0 (owner decision 28 Oct 2026, ICR-A): amounts and percentages are set in the TEXT face with tabular figures (component.amount.font = body-tabular); IBM Plex Mono only on codes (.fp-code, component.code.font = mono); the video kit is exempt */
.fp-num,[data-num],.fp-amount{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate}
.fp-code,code.fp-code{font-family:var(--fp-font-family-mono);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;letter-spacing:0}
::selection{background:var(--fp-brand-selection-bg);color:var(--fp-text-selection)}
:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:1ms!important}}
/* v2.0 — unbreakable numeric units inside Arabic text: amount+currency, sign+number+percent, date parts */
.fp-unit,.unit{display:inline-block;white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums}
.fp-num{white-space:nowrap}

/* components/components.css — fiper-brand package file, bundled at build time (FF-R4C D2); source md5 9c4d543f355bfcbfb78573b011883ad2 */
/* Fiper Brand Identity System v2.0 — components.css (reference implementation)
   v2.0 (approved direction): charcoal apps, number-dominant screens (.fp-figure), cards only where they group related
   information or bound an action (.fp-group), rules instead of boxes elsewhere, plain labels (no slash prefix, no decorative
   numbering), red = logo tile · primary action · active state only; finance semantics separate (word + sign + colour),
   unbreakable numeric units (.fp-unit / .fp-num nowrap), charts generated from data (brand/scripts/charts.mjs) inside .fp-chart.
   v1.1 kept: Arabic always in IBM Plex Sans Arabic (font-ui), monospace for digits/codes only, labels Inter 600 (no mono,
   no .28em caps), no glow on buttons, field boundary ≥ 3:1 (--fp-line-input), Lucide icons with size/stroke rules.
   Requires: fonts/fonts.css + tokens.css loaded first. Every colour is a var(--fp-*) token; no hex literals.
   Dark (charcoal) is the DEFAULT; the light theme under [data-theme="light"] is APPROVED as OPTIONAL (CEO decision 30 Oct 2026, decision item 3) and works through tokens.css: every component renders in both themes (checked by check-components + check-rendered-contrast --theme=light).
   RTL: logical properties only. Directional icons mirror with .fp-icon--dir under [dir="rtl"]. Numbers, charts,
   logos and media controls never mirror. Prefix: .fp-
   v2.4.0 (owner decisions 4 Nov 2026 — Fiper Funds visual review): (1) AMOUNTS and PERCENTAGES in the TEXT face with tabular figures (.fp-amount, .fp-unit, .fp-num, .fp-figure__value, .fp-stat__value, .fp-holding__amt, .fp-delta, .fp-td-num —
   component.amount.font = body-tabular; owner decision 28 Oct 2026); IBM Plex Mono ONLY on codes (.fp-code, .fp-fund__ticker, OTP — component.code.font = mono); the video kit is unchanged. (2) The app type scale 13 / 16 / 20 / 28 | 40
   (CEO decision 4 Nov 2026, item 4 (a): --fp-font-size-app-caption 13 · app-body 16 · app-title 20 · app-display 28 · app-hero 40; nothing below 13 px — gate check-type-scale). (3) The lockup only in the home / portfolio and sign-in headers;
   every other tab carries its title (.fp-header__title--tab, 20 px; component.app-header.logo-scope). (4) The app value curve coloured by trend (--fp-chart-line / -line-down, dot = line), the switch states (component.switch.*),
   the issuer mark (.fp-issuer-mark), the illustration slot of the zero state (.fp-empty__art, brand/illustrations/).  */

/* ───────────────────────── 0. base helpers ───────────────────────── */
[class^="fp-"],[class*=" fp-"],[class^="fp-"] *,[class*=" fp-"] *{box-sizing:border-box;font-synthesis:none}
.fp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp-num{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;letter-spacing:0;white-space:nowrap}/* v2.4.0: a number in the text face, tabular — never mono */
.fp-unit{display:inline-block;white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums}/* amount+currency · sign+number+% · date parts: one unbreakable unit — v2.4.0 in the text face */
/* v2.4.0 — amounts vs codes (owner decision 28 Oct 2026; tokens component.amount / component.code): an AMOUNT or PERCENTAGE (.fp-amount, and every amount class above) is the text face of the surface — IBM Plex Sans Arabic on Arabic surfaces, Inter on English —
   with tabular lining figures; a CODE (.fp-code: fund ticker SPUS, order reference FF-ORD-…, account number, identifier, OTP) is IBM Plex Mono. Gates: verify-identity MONO-ON-AMOUNT (mono on an amount) · CODE-NOT-MONO (a code rule without mono). The video kit's Counter / big numbers keep their own faces. */
.fp-amount{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;letter-spacing:0;white-space:nowrap}
.fp-code{font-family:var(--fp-font-family-mono);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;letter-spacing:0;white-space:nowrap}
.fp-eyebrow{font-family:var(--fp-c-eyebrow-font);font-size:var(--fp-c-eyebrow-size);font-weight:var(--fp-c-eyebrow-weight);letter-spacing:var(--fp-c-eyebrow-letter-spacing);color:var(--fp-c-eyebrow-color);text-transform:uppercase;margin-block-end:12px;display:block}
.fp-eyebrow__slash{display:none}/* v2.0: the “//” prefix is retired — eyebrow is a plain label */
[lang="ar"] .fp-eyebrow,.fp-eyebrow[lang="ar"]{font-family:var(--fp-c-eyebrow-arabic-font);font-weight:var(--fp-c-eyebrow-arabic-weight);letter-spacing:0;text-transform:none}
.fp-label-sm{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);color:var(--fp-text-label);letter-spacing:0}
.fp-h{font-family:var(--fp-font-family-display);text-transform:uppercase;letter-spacing:var(--fp-font-letterSpacing-heading);line-height:var(--fp-font-lineHeight-heading);font-weight:var(--fp-font-weight-display)}
[lang="ar"] .fp-h{font-family:var(--fp-font-family-arabic);text-transform:none;letter-spacing:0;line-height:var(--fp-font-lineHeight-arabic-heading);font-weight:700}
.fp-muted{color:var(--fp-text-muted)}
/* icons — Lucide (brand/icons/lucide, ISC). One line style only. 24 grid, stroke 2; 20 px (md) stroke 2; 16 px (sm) stroke 1.75.
   Alignment: the icon sits in an inline-flex row, align-items:center, 8 px gap; never baseline-aligned. Space around an icon = its own size / 2.
   An icon means a function or a state; never decoration, never inside a coloured tile in app UI. Directional icons (chevrons, arrows) mirror in RTL via .fp-icon--dir. */
.fp-icon{width:var(--fp-size-icon-lg);height:var(--fp-size-icon-lg);flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.fp-icon--md{width:var(--fp-size-icon-md);height:var(--fp-size-icon-md);stroke-width:2}
.fp-icon--sm{width:var(--fp-size-icon-sm);height:var(--fp-size-icon-sm);stroke-width:1.75}
.fp-icon--lg{width:var(--fp-size-icon-lg);height:var(--fp-size-icon-lg)}
.fp-icon--muted{color:var(--fp-text-muted)}
.fp-ico-row{display:inline-flex;align-items:center;gap:var(--fp-space-2)}
[dir="rtl"] .fp-icon--dir{transform:scaleX(-1)}
.fp-stack{display:grid;gap:var(--fp-space-3)}
.fp-row{display:flex;align-items:center;gap:var(--fp-space-2);flex-wrap:wrap}

/* ───────────────────────── 1. buttons ───────────────────────── */
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--fp-space-2);
  min-height:var(--fp-size-touch-min);padding:var(--fp-space-btn-y) var(--fp-space-btn-x);
  border-radius:var(--fp-radius-pill);border:1px solid transparent;
  font:inherit;font-family:var(--fp-font-ui);font-weight:var(--fp-font-weight-bold);font-size:var(--fp-font-size-app-body);line-height:1.2;
  color:var(--fp-text-primary);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--fp-motion-duration-press) var(--fp-motion-easing-press),box-shadow var(--fp-motion-duration-state),background var(--fp-motion-duration-state),border-color var(--fp-motion-duration-hover)}
.fp-btn:active{transform:scale(var(--fp-motion-press-scale))}
.fp-btn:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
.fp-btn--primary{background:linear-gradient(120deg,var(--fp-brand-red),var(--fp-brand-red-gradient-end));color:var(--fp-text-on-brand);box-shadow:var(--fp-c-button-primary-shadow)}
.fp-btn--primary:active{background:var(--fp-action-primary-pressed);box-shadow:none}
.fp-btn--secondary{background:var(--fp-ground-panel);border-color:var(--fp-line-ash)}
.fp-btn--ghost{border-color:var(--fp-line-ash)}
/* v2.3.5 (studio request 14b / ADR-031, design office approved, CEO decision 1 Nov 2026 — binding on every consumer): in the FINAL CONFIRMATION DIALOG of a destructive action (delete / cancel / void / reject — the one place .fp-btn-danger-solid may live)
   the safe way back («تراجع» / Cancel) is a SECONDARY button — border + panel ground (.fp-btn--secondary), never a ghost — so it reads at full weight beside the filled red button; it takes the INITIAL FOCUS (autofocus / data-initial-focus / initialFocus)
   and the destructive button is never the default activation of Enter; the safe button sits at the START side and the destructive at the END side (logical, so it mirrors in RTL). The ghost button stays for NON-destructive confirmations only.
   Tokens component.dialog.destructive.cancel-style = secondary-outline-filled · initial-focus = cancel. Gates: verify-identity DESTRUCTIVE-DIALOG-CANCEL (a dialog with .fp-btn-danger-solid and no secondary sibling, or a ghost sibling) + DESTRUCTIVE-DIALOG-FOCUS (the safe button carries the initial focus). */
.fp-modal__actions .fp-btn-danger-solid,.fp-sheet .fp-btn-danger-solid,dialog .fp-btn-danger-solid,[role="dialog"] .fp-btn-danger-solid,[role="alertdialog"] .fp-btn-danger-solid{order:99}/* the destructive button is always the END-side action, whatever the source order */
.fp-modal__actions .fp-btn--secondary[autofocus],.fp-modal__actions .fp-btn--secondary[data-initial-focus]{outline-offset:2px}/* the initial focus ring of the safe button sits outside its border */
/* v2.3.4 (invoices CR 3 — CEO decision 1 Nov 2026, recommendation B): a DESTRUCTIVE action (delete, cancel, void, reject) is NEVER a filled button — it is an outlined or text button in the danger colour with an icon,
   so it cannot read as a second primary; the filled red button stays the ONE primary action of the screen (brand red) and the danger colour #F05252 / #B91C1C itself does not change (CEO 30 Oct 2026: loss is red).
   .fp-btn-danger = outline (danger border + danger label), .fp-btn-danger.fp-btn--text = text only. .fp-btn--destructive stays as an alias of the outline. The ONE exception: the final confirmation dialog of a destructive
   action may carry .fp-btn-danger-solid (filled danger) when the dialog holds no other primary action — inside <dialog>, [role=dialog|alertdialog], .fp-modal or .fp-sheet only. Gate: verify-identity DANGER-FILLED-OUTSIDE-DIALOG. */
.fp-btn-danger,.fp-btn--destructive{background:transparent;border-color:var(--fp-state-danger);color:var(--fp-state-danger)}
.fp-btn-danger.fp-btn--text{border-color:transparent;padding-inline:var(--fp-space-btn-sm-x)}
.fp-btn-danger:active,.fp-btn--destructive:active{background:var(--fp-state-danger-wash)}
.fp-btn-danger .fp-icon,.fp-btn--destructive .fp-icon{color:currentColor}
.fp-btn-danger-solid{background:var(--fp-state-danger);border-color:var(--fp-state-danger);color:var(--fp-ground-bg)}
.fp-btn-danger-solid:active{filter:brightness(.92)}
@media (hover:hover) and (pointer:fine){
  .fp-btn--primary:hover{background:linear-gradient(120deg,var(--fp-brand-red-gradient-end),var(--fp-brand-red-deep))}
  .fp-btn--secondary:hover,.fp-btn--ghost:hover{border-color:var(--fp-line-strong)}
  .fp-btn-danger:hover,.fp-btn--destructive:hover{background:var(--fp-state-danger-wash)}
  .fp-btn-danger-solid:hover{filter:brightness(.92)}
}
.fp-btn--sm{min-height:36px;padding:var(--fp-space-btn-sm-y) var(--fp-space-btn-sm-x);font-size:var(--fp-font-size-app-caption)}
.fp-btn--block{display:flex;width:100%}
.fp-btn .fp-icon{width:var(--fp-size-icon-md);height:var(--fp-size-icon-md)}
.fp-btn--icon{padding:0;width:var(--fp-size-touch-min);height:var(--fp-size-touch-min)}
.fp-btn[disabled],.fp-btn[aria-disabled="true"]{background:var(--fp-action-disabled-bg);color:var(--fp-action-disabled-fg);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none}
.fp-btn[data-loading="true"]{pointer-events:none;position:relative;color:transparent}
.fp-btn[data-loading="true"]::after{content:"···";position:absolute;inset:0;display:grid;place-items:center;color:var(--fp-text-on-brand);font-family:var(--fp-font-ui);font-size:1.3em;letter-spacing:.1em;animation:fp-dots var(--fp-motion-duration-skeleton) steps(3,end) infinite}
.fp-btn--secondary[data-loading="true"]::after,.fp-btn--ghost[data-loading="true"]::after{color:var(--fp-text-primary)}
@keyframes fp-dots{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}

/* ───────────────────────── 2. inputs & forms ───────────────────────── */
.fp-field{display:grid;gap:6px}
.fp-label{font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);color:var(--fp-text-primary)}
.fp-label .fp-req{color:var(--fp-state-danger);margin-inline-start:2px}
.fp-help{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-error{display:flex;align-items:flex-start;gap:6px;font-size:var(--fp-font-size-app-caption);color:var(--fp-state-danger)}
.fp-error .fp-icon{width:16px;height:16px;stroke-width:1.75;margin-block-start:1px}
.fp-input,.fp-select,.fp-textarea{width:100%;min-height:var(--fp-size-touch-min);padding:12px 14px;
  background:var(--fp-ground-coal);border:1px solid var(--fp-line-input);border-radius:var(--fp-radius-input);
  color:var(--fp-text-primary);font:inherit;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-body);line-height:1.4;
  transition:border-color var(--fp-motion-duration-hover),background var(--fp-motion-duration-hover)}
.fp-input::placeholder,.fp-textarea::placeholder{color:var(--fp-text-muted);opacity:1}
.fp-input:hover,.fp-select:hover,.fp-textarea:hover{border-color:var(--fp-line-strong)}
.fp-input:focus-visible,.fp-select:focus-visible,.fp-textarea:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:1px;border-color:var(--fp-line-strong)}
.fp-field[data-invalid="true"] .fp-input,.fp-field[data-invalid="true"] .fp-select,.fp-field[data-invalid="true"] .fp-textarea{border-color:var(--fp-state-danger)}
.fp-input[disabled],.fp-select[disabled],.fp-textarea[disabled]{background:var(--fp-action-disabled-bg);color:var(--fp-action-disabled-fg);cursor:not-allowed}
.fp-input--num{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;text-align:end}/* v2.4.0: an amount input is the text face */
[dir="rtl"] .fp-input--num{text-align:start}
.fp-textarea{min-height:96px;resize:vertical}
.fp-select{appearance:none;padding-inline-end:44px}
.fp-select-wrap{position:relative}
.fp-select-wrap .fp-icon{position:absolute;inset-inline-end:14px;inset-block-start:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--fp-text-muted);pointer-events:none}/* Lucide chevron-down, not a CSS caret */
.fp-input-wrap{position:relative;display:flex;align-items:center;direction:ltr}
.fp-input-wrap .fp-affix{position:absolute;right:14px;font-family:var(--fp-font-ui);/* the currency code beside an amount is a label (text face), not a code */font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted);pointer-events:none}
.fp-input-wrap .fp-input{padding-right:56px}
/* OTP */
.fp-otp{display:flex;gap:var(--fp-space-2);direction:ltr}
.fp-otp input{width:44px;height:52px;text-align:center;padding:0;font-family:var(--fp-font-family-mono);font-size:22px;font-weight:600;
  background:var(--fp-ground-coal);border:1px solid var(--fp-line-input);border-radius:var(--fp-radius-input);color:var(--fp-text-primary);caret-color:var(--fp-brand-ember)}
.fp-otp input:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:1px}
.fp-otp[data-invalid="true"] input{border-color:var(--fp-state-danger)}
.fp-otp input[data-filled="true"]{border-color:var(--fp-line-strong)}
/* checkbox / radio / switch */
.fp-check{display:flex;align-items:flex-start;gap:10px;min-height:var(--fp-size-touch-min);padding-block:6px;cursor:pointer;font-size:var(--fp-font-size-app-body)}
.fp-check input{appearance:none;flex:none;width:22px;height:22px;margin:0;margin-block-start:1px;border:1.5px solid var(--fp-line-input);border-radius:6px;background:var(--fp-ground-coal);display:grid;place-items:center;transition:background var(--fp-motion-duration-press),border-color var(--fp-motion-duration-press)}
.fp-check input[type="radio"]{border-radius:50%}
.fp-check input:checked{background:var(--fp-brand-red);border-color:var(--fp-brand-red)}
.fp-check input[type="checkbox"]:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid var(--fp-text-on-brand);border-bottom:2.5px solid var(--fp-text-on-brand);transform:translateY(-2px) rotate(-45deg)}
.fp-check input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--fp-text-on-brand)}
.fp-check input:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
.fp-check input[disabled]{opacity:.4;cursor:not-allowed}
.fp-switch{display:inline-flex;align-items:center;gap:10px;min-height:var(--fp-size-touch-min);cursor:pointer;font-size:var(--fp-font-size-app-body)}
/* v2.4.0 (S-45 / ICR-J, owner 4 Nov 2026; tokens component.switch.*): OFF = a panel-coloured track with the input border and a muted knob (it no longer reads as a filled, active control on the paper ground); ON = the success track with a panel-coloured knob. Both themes through the tokens; non-text contrast ≥ 3:1. */
.fp-switch input{appearance:none;margin:0;width:var(--fp-c-switch-width);height:var(--fp-c-switch-height);border-radius:var(--fp-radius-pill);background:var(--fp-c-switch-off-fill);border:1px solid var(--fp-c-switch-off-border);position:relative;flex:none;transition:background var(--fp-motion-duration-state),border-color var(--fp-motion-duration-state)}
.fp-switch input::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:var(--fp-c-switch-knob);height:var(--fp-c-switch-knob);border-radius:50%;background:var(--fp-c-switch-off-knob);transition:transform var(--fp-motion-duration-state) var(--fp-motion-easing-standard),background var(--fp-motion-duration-state)}
.fp-switch input:checked{background:var(--fp-c-switch-on-fill);border-color:var(--fp-c-switch-on-fill)}
.fp-switch input:checked::after{transform:translateX(18px);background:var(--fp-c-switch-on-knob)}
[dir="rtl"] .fp-switch input:checked::after{transform:translateX(-18px)}
.fp-switch input:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}

/* ───────────────────────── 3. cards ───────────────────────── */
.fp-card{position:relative;background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);padding:var(--fp-space-card-y) var(--fp-space-card-x);transition:border-color var(--fp-motion-duration-state)}
.fp-card--compact{padding:var(--fp-space-4)}
.fp-card--interactive{cursor:pointer}
@media (hover:hover){.fp-card--interactive:hover{border-color:var(--fp-line-brand)}}
.fp-card--interactive:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
.fp-card--interactive:active{border-color:var(--fp-line-brand)}
.fp-card__title{font-size:var(--fp-font-size-xl);margin-block-end:8px}
.fp-card__body{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-card__stat{margin-block-start:14px;font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-bold)}
.fp-card__stat b{color:var(--fp-text-primary);font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums}
.fp-card__corner{position:absolute;inset-block-start:18px;inset-inline-end:20px}
/* stat card */
.fp-stat{display:grid;gap:4px}
.fp-stat__label{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted);font-weight:var(--fp-font-weight-semibold)}
.fp-stat__value{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fp-font-size-app-display);font-weight:600;line-height:1.1;direction:ltr;unicode-bidi:isolate;color:var(--fp-text-primary);overflow-wrap:anywhere}
.fp-stat__value small{font-family:var(--fp-font-ui);font-weight:600}
.fp-stat__value--display{font-family:var(--fp-font-family-display);font-weight:var(--fp-font-weight-display);font-size:var(--fp-font-size-2xl);color:var(--fp-text-primary)}/* marketing stat: never red for a number (CEO review 8) */
.fp-stat__delta{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.fp-stat__delta .fp-num,.fp-stat__delta .fp-delta{font-weight:600}
/* fund card */
.fp-fund{display:grid;gap:12px}
.fp-fund__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fp-fund__ticker{font-family:var(--fp-font-family-mono);/* = .fp-code */font-size:var(--fp-font-size-app-caption);letter-spacing:0;color:var(--fp-text-muted);direction:ltr;unicode-bidi:isolate}/* ticker + venue = codes; never Arabic words here */
.fp-fund__name{font-size:var(--fp-font-size-app-title);font-weight:var(--fp-font-weight-semibold);line-height:1.3}
.fp-fund__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-fund__meta b{display:block;color:var(--fp-text-primary);font-family:var(--fp-font-ui);font-weight:600;font-size:var(--fp-font-size-app-body)}
.fp-fund__meta b .fp-num{font-weight:600}


/* v2.0 — hero figure: the one number that carries the screen. v2.4.0: the TEXT face 600 with tabular figures (was Mono), unit label small in font-ui, delta line = icon + word + unit */
.fp-figure{display:grid;gap:6px;min-width:0}
.fp-figure__label{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-medium);color:var(--fp-text-label)}
.fp-figure__value{display:flex;align-items:baseline;gap:8px;direction:ltr;unicode-bidi:isolate;font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;font-weight:600;font-size:var(--fp-font-size-app-display);line-height:1.05;color:var(--fp-text-primary);white-space:nowrap}
[dir="rtl"] .fp-figure__value{justify-content:flex-end}
.fp-figure__unit{font-family:var(--fp-font-family-body);font-size:var(--fp-font-size-app-caption);font-weight:600;color:var(--fp-text-muted)}
.fp-figure--hero .fp-figure__value{font-size:var(--fp-font-size-app-hero)}/* 40 px (v2.4.0 app scale) */
.fp-figure--md .fp-figure__value{font-size:var(--fp-font-size-app-display)}
.fp-figure--sm .fp-figure__value{font-size:var(--fp-font-size-app-title)}
.fp-figure--sm .fp-figure__unit{font-size:var(--fp-font-size-app-caption)}
.fp-figure__delta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold)}
.fp-figure__delta .fp-icon{width:16px;height:16px}
.fp-figure__delta .fp-unit{font-weight:600}
.fp-figure__since{color:var(--fp-text-muted);font-weight:var(--fp-font-weight-medium)}
.fp-figure--ruled{padding-block-start:12px;border-block-start:2px solid var(--fp-text-primary)}/* document / dashboard KPI: heavy top rule instead of a card */
.fp-figure--ruled .fp-figure__value{font-size:var(--fp-font-size-app-display)}
/* v2.0 — grouping card: used only when it groups related information (facts of one order, a chart with its controls) or bounds an action */
.fp-group{background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);padding:14px 16px;display:grid;gap:0;min-width:0}
.fp-group--tight{border-radius:var(--fp-radius-input);padding:10px 14px}
.fp-group__title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);padding-block-end:8px;border-block-end:1px solid var(--fp-line-ash);margin-block-end:4px}
.fp-group__title small{font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-medium);color:var(--fp-text-muted)}
.fp-group .fp-kv:last-child{border-block-end:0}
/* v2.0 — open sections: a titled block separated by rules, no box */
.fp-section{display:grid;gap:0;min-width:0}
.fp-section__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-body);font-weight:var(--fp-font-weight-bold);padding-block:16px 8px;border-block-end:1px solid var(--fp-line-strong)}
.fp-section__h small{font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-medium);color:var(--fp-text-muted)}
/* v2.0 — holding row (portfolio): name + sub on the start, amount+unit and state on the end; rules, not cards */
.fp-holding{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-block-end:1px solid var(--fp-line-ash);align-items:start;min-width:0}
.fp-holding__t{font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body);display:block}
.fp-holding__s{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted);display:block;margin-block-start:2px}
.fp-holding__end{text-align:end;direction:ltr;display:grid;gap:3px;justify-items:end}
[dir="rtl"] .fp-holding__end{justify-items:start;text-align:start}
.fp-holding__amt{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;font-weight:600;font-size:var(--fp-font-size-app-body);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.fp-holding__amt i{font-style:normal;font-family:var(--fp-font-family-body);font-size:var(--fp-font-size-app-caption);font-weight:600;color:var(--fp-text-muted);margin-inline-start:4px}
.fp-holding__st{display:inline-flex;align-items:center;gap:4px;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);direction:inherit}
.fp-holding__st .fp-icon{width:13px;height:13px}
.fp-holding--total{border-block-end:0;border-block-start:1px solid var(--fp-line-strong)}
.fp-holding--total .fp-holding__t{font-weight:var(--fp-font-weight-bold)}

/* ───────────────────────── 4. finance semantics ───────────────────────── */
.fp-gain{color:var(--fp-finance-gain)}
.fp-loss{color:var(--fp-finance-loss)}
.fp-neutral{color:var(--fp-finance-neutral)}
.fp-pending{color:var(--fp-finance-pending)}
.fp-delta{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* ───────────────────────── 5. financial table ───────────────────────── */
.fp-table-wrap{overflow:auto;border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);background:var(--fp-ground-panel);max-height:70vh}
.fp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fp-font-size-app-caption)}
.fp-table th,.fp-table td{padding:8px 14px;min-height:48px;border-block-end:1px solid var(--fp-line-ash);text-align:start;vertical-align:middle;white-space:normal}
.fp-table th.fp-td-num,.fp-table td.fp-td-num,.fp-table .fp-row-main{white-space:nowrap}
.fp-table--compact th,.fp-table--compact td{min-height:40px;padding:4px 12px;font-size:var(--fp-font-size-app-caption)}
.fp-table thead th{position:sticky;inset-block-start:0;background:var(--fp-ground-coal);color:var(--fp-text-label);font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);letter-spacing:0;text-transform:none;z-index:var(--fp-z-raised)}
.fp-table tbody tr:last-child td{border-block-end:0}
.fp-table td.fp-td-num,.fp-table th.fp-td-num{text-align:end;font-variant-numeric:tabular-nums}
.fp-table td.fp-td-num > span:first-child,.fp-table td.fp-td-num > .fp-num,.fp-table td.fp-td-num > .fp-unit{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
.fp-table td.fp-td-num > .fp-word{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold)}
[dir="rtl"] .fp-table td.fp-td-num,[dir="rtl"] .fp-table th.fp-td-num{text-align:start}
.fp-table tbody tr[data-selected="true"] td{background:var(--fp-brand-red-wash)}
@media (hover:hover){.fp-table tbody tr:hover td{background:var(--fp-brand-red-wash)}}
.fp-table .fp-row-main{font-weight:var(--fp-font-weight-semibold);color:var(--fp-text-primary)}
.fp-table .fp-row-sub{display:block;font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}

/* ───────────────────────── 6. tabs & segmented ───────────────────────── */
.fp-tabs{display:flex;gap:4px;border-block-end:1px solid var(--fp-line-ash);overflow-x:auto;scrollbar-width:none}
.fp-tabs::-webkit-scrollbar{display:none}
.fp-tab{flex:none;min-height:var(--fp-size-touch-min);padding:12px 14px;background:none;border:0;border-block-end:2px solid transparent;margin-block-end:-1px;
  color:var(--fp-text-muted);font:inherit;font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body);cursor:pointer;transition:color var(--fp-motion-duration-hover),border-color var(--fp-motion-duration-hover)}
.fp-tab[aria-selected="true"]{color:var(--fp-text-primary);border-block-end-color:var(--fp-brand-red)}
.fp-tab:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:-2px;border-radius:var(--fp-radius-sm)}
.fp-seg{display:inline-flex;padding:3px;background:var(--fp-ground-coal);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-pill);gap:2px}
.fp-seg button{min-height:36px;padding:0 16px;border:0;border-radius:var(--fp-radius-pill);background:transparent;color:var(--fp-text-muted);font:inherit;font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);cursor:pointer;transition:background var(--fp-motion-duration-state),color var(--fp-motion-duration-state)}
.fp-seg button[aria-pressed="true"]{background:var(--fp-ground-panel);color:var(--fp-text-primary);box-shadow:inset 0 0 0 1px var(--fp-line-strong)}
.fp-seg button:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:1px}
.fp-seg--block{display:flex}.fp-seg--block button{flex:1}

/* ───────────────────────── 7. badges & chips ───────────────────────── */
.fp-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--fp-radius-pill);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);line-height:1;border:1px solid transparent;white-space:nowrap}
.fp-badge .fp-icon{width:14px;height:14px;stroke-width:2}
.fp-badge--neutral{background:var(--fp-action-disabled-bg);color:var(--fp-text-primary)}
.fp-badge--brand{background:var(--fp-brand-red);color:var(--fp-text-on-brand);font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-bold);letter-spacing:.04em;text-transform:uppercase;height:20px;padding:0 9px}/* the site's mono .core chip is an observed marketing treatment; not applied */
[lang="ar"] .fp-badge--brand{letter-spacing:0;text-transform:none}
.fp-badge--success{background:var(--fp-state-success-wash);color:var(--fp-state-success);border-color:var(--fp-state-success)}
.fp-badge--warning{background:var(--fp-state-warning-wash);color:var(--fp-state-warning);border-color:var(--fp-state-warning)}
.fp-badge--danger{background:var(--fp-state-danger-wash);color:var(--fp-state-danger);border-color:var(--fp-state-danger)}
.fp-badge--info{background:var(--fp-state-info-wash);color:var(--fp-state-info);border-color:var(--fp-state-info)}
.fp-badge--outline{background:transparent;border-color:var(--fp-line-strong);color:var(--fp-text-muted)}
/* Sharia-compliance badge: success token, never brand red; certifier slot */
.fp-sharia{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px 4px 10px;border-radius:var(--fp-radius-pill);background:var(--fp-state-success-wash);border:1px solid var(--fp-state-success);color:var(--fp-state-success);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);line-height:1.2}
.fp-sharia .fp-icon{width:16px;height:16px;stroke-width:1.75}
.fp-sharia__cert{color:var(--fp-text-primary);font-weight:var(--fp-font-weight-regular);border-inline-start:1px solid var(--fp-line-strong);padding-inline-start:8px}
.fp-sharia--off{background:var(--fp-action-disabled-bg);border-color:var(--fp-line-strong);color:var(--fp-text-muted)}
/* chips (filter / choice) */
.fp-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--fp-radius-pill);border:1px solid var(--fp-line-ash);background:transparent;color:var(--fp-text-primary);font:inherit;font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-medium);cursor:pointer;transition:border-color var(--fp-motion-duration-hover),background var(--fp-motion-duration-hover)}
.fp-chip[aria-pressed="true"],.fp-chip[data-selected="true"]{background:var(--fp-brand-red-wash);border-color:var(--fp-brand-red);color:var(--fp-text-primary)}
.fp-chip:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
@media (hover:hover){.fp-chip:hover{border-color:var(--fp-line-strong)}}

/* ───────────────────────── 8. toasts ───────────────────────── */
.fp-toast-region{position:fixed;inset-inline:0;inset-block-start:calc(env(safe-area-inset-top) + 12px);display:grid;gap:8px;justify-items:center;padding-inline:var(--fp-space-gutter);z-index:var(--fp-z-toast);pointer-events:none}
@media (max-width:639px){.fp-toast-region{inset-block-start:auto;inset-block-end:calc(var(--fp-size-tabbar-h) + env(safe-area-inset-bottom) + 12px)}}
.fp-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:min(100%,420px);padding:12px 14px;border-radius:var(--fp-radius-media);background:var(--fp-ground-coal);border:1px solid var(--fp-line-ash);border-inline-start:3px solid var(--fp-line-strong);color:var(--fp-text-primary);box-shadow:var(--fp-shadow-overlay);font-size:var(--fp-font-size-app-caption);
  animation:fp-toast-in var(--fp-motion-duration-state) var(--fp-motion-easing-standard)}
.fp-toast .fp-icon{width:20px;height:20px;margin-block-start:0}
.fp-toast--success{border-inline-start-color:var(--fp-state-success)}.fp-toast--success .fp-icon{color:var(--fp-state-success)}
.fp-toast--warning{border-inline-start-color:var(--fp-state-warning)}.fp-toast--warning .fp-icon{color:var(--fp-state-warning)}
.fp-toast--danger{border-inline-start-color:var(--fp-state-danger)}.fp-toast--danger .fp-icon{color:var(--fp-state-danger)}
.fp-toast--info{border-inline-start-color:var(--fp-state-info)}.fp-toast--info .fp-icon{color:var(--fp-state-info)}
.fp-toast__title{font-weight:var(--fp-font-weight-semibold)}
.fp-toast__body{color:var(--fp-text-muted);font-size:var(--fp-font-size-app-caption)}
.fp-toast__action{margin-inline-start:auto;position:relative;min-height:36px;background:none;border:0;color:var(--fp-text-primary);font:inherit;font-weight:var(--fp-font-weight-semibold);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:28px}
@keyframes fp-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───────────────────────── 9. empty / skeleton / error ───────────────────────── */
.fp-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:40px 24px;color:var(--fp-text-muted)}
.fp-empty .fp-icon{width:24px;height:24px;stroke-width:2;color:var(--fp-text-muted)}
/* v2.4.0 — the illustration slot of a zero state (brand/illustrations/): one drawing of the family, 120–160 px (component.illustration.size-min / -max), above the title (with the title pole), never on a dense financial screen; the SVG inherits the theme through var(--fp-*) */
.fp-empty__art{width:var(--fp-c-illustration-size-min);height:var(--fp-c-illustration-size-min);max-width:var(--fp-c-illustration-size-max);display:block;margin-block-end:4px}
.fp-empty__art svg,.fp-empty__art img{width:100%;height:100%;display:block}
.fp-learn{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:14px 16px;background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);color:inherit;text-decoration:none}/* learn card: drawing 56–96 px at the start + title + one line */
.fp-learn__art{width:72px;height:72px}.fp-learn__art svg{width:100%;height:100%;display:block}
.fp-learn__t{font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body)}.fp-learn__s{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-empty__title{color:var(--fp-text-primary);font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body)}
.fp-empty__body{font-size:var(--fp-font-size-app-caption);max-width:28ch}
.fp-skel{display:block;background:var(--fp-line-ash);border-radius:var(--fp-radius-sm);animation:fp-pulse var(--fp-motion-duration-skeleton) var(--fp-motion-easing-enter) infinite}
.fp-skel--text{height:12px;width:100%}
.fp-skel--title{height:18px;width:60%}
.fp-skel--num{height:26px;width:40%}
.fp-skel--circle{width:40px;height:40px;border-radius:50%}
.fp-skel--block{height:120px;border-radius:var(--fp-radius-media)}
@keyframes fp-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.fp-skel{animation:none}}
.fp-errstate{display:grid;gap:10px;padding:16px;border:1px solid var(--fp-state-danger);background:var(--fp-state-danger-wash);border-radius:var(--fp-radius-card)}
.fp-errstate__title{display:flex;gap:8px;align-items:center;color:var(--fp-state-danger);font-weight:var(--fp-font-weight-semibold)}
.fp-errstate__body{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
/* inline banners (non-blocking) */
.fp-banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--fp-radius-media);border:1px solid var(--fp-line-ash);background:var(--fp-ground-coal);font-size:var(--fp-font-size-app-caption)}
.fp-banner--warning{border-color:var(--fp-state-warning);background:var(--fp-state-warning-wash)}.fp-banner--warning .fp-icon{color:var(--fp-state-warning)}
.fp-banner--info{border-color:var(--fp-state-info);background:var(--fp-state-info-wash)}.fp-banner--info .fp-icon{color:var(--fp-state-info)}

/* ───────────────────────── 10. navigation ───────────────────────── */
.fp-header{position:sticky;inset-block-start:0;z-index:var(--fp-z-header);display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:calc(var(--fp-size-header-h) + env(safe-area-inset-top));padding-block-start:env(safe-area-inset-top);padding-inline:6px;background:color-mix(in srgb,var(--fp-ground-bg) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block-end:1px solid var(--fp-line-ash)}
.fp-header__title{text-align:center;font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-header__title--brand{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-body);font-weight:var(--fp-font-weight-bold);letter-spacing:0}
.fp-header__title--brand img{height:22px;width:auto;display:block}/* official lockup; no mark-only asset exists */
/* v2.4.0 (ICR-F / S-41, owner 4 Nov 2026; token component.app-header.logo-scope = home-and-login-only): the lockup appears in the header of the HOME / PORTFOLIO screen and of the SIGN-IN screen only — alone (Q15: no descriptor beside it below 640 px);
   every other tab (funds, activity, more, finance…) carries its TAB TITLE in the header instead — .fp-header__title--tab, 20 px (app-title) — so no screen shows a brand header and a screen title stacked. The mark-only asset is still missing (MISSING-ASSETS § 3). */
.fp-header__title--tab{font-family:var(--fp-font-ui);font-size:var(--fp-c-app-header-tab-title-size);font-weight:var(--fp-font-weight-bold);letter-spacing:0}
.fp-header .fp-btn--icon{color:var(--fp-text-primary)}
.fp-tabbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--fp-z-header);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:calc(var(--fp-size-tabbar-h) + env(safe-area-inset-bottom));padding-block-end:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--fp-ground-bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block-start:1px solid var(--fp-line-ash)}
.fp-tabbar a,.fp-tabbar button{display:grid;justify-items:center;align-content:center;gap:3px;min-height:var(--fp-size-tabbar-h);color:var(--fp-text-muted);text-decoration:none;font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);background:none;border:0;cursor:pointer;transition:color var(--fp-motion-duration-hover)}/* 13 px (v2.4.0 app scale; was 11) */
.fp-tabbar .fp-icon{width:24px;height:24px;stroke-width:1.75}
.fp-tabbar [aria-current="page"]{color:var(--fp-text-primary)}
.fp-tabbar [aria-current="page"] .fp-icon{color:var(--fp-brand-red);stroke:var(--fp-brand-red)}
/* a11y: label stays text.primary (AA on the scrim); red carries the active state on the icon + a 2px bar */
.fp-tabbar [aria-current="page"]::before{content:"";position:absolute;inset-block-start:0;inset-inline:25%;height:2px;background:var(--fp-brand-red);border-radius:1px}
.fp-tabbar [aria-current="page"] .fp-icon{stroke-width:2.25}
.fp-tabbar a:focus-visible,.fp-tabbar button:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:-4px;border-radius:var(--fp-radius-sm)}
.fp-tabbar__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--fp-brand-ember);inset-block-start:6px;inset-inline-end:calc(50% - 16px)}
.fp-tabbar a{position:relative}
/* v2.3.2 — app risk-line foot (CEO 31 Oct 2026): the fixed line «الاستثمار ينطوي على مخاطر · Investing involves risk» sits in the FOOT of the sign-in screen and of every screen that shows financial figures (home, portfolio, orders, statements, dashboards):
   a single muted line (--fp-text-muted, never red, never bold), start-aligned above the tab bar (phones) or at the end of the main column (desktop); it never covers content and is never hidden behind a sheet. Not on marketing pages (they carry the social / document rule).
   v2.3.5 (hub proposal, CEO rule «no text below 13 px in interfaces»): the foot is 13 px in sites and apps — token component.risk-line.ui-min-size; the e-mail footer keeps 11 px (a mail client is not a product interface) and the media sizes are unchanged. Gate: check-risk-line (UI threshold 13). */
.fp-risk-foot{display:block;margin:0;padding:8px var(--fp-space-gutter);font-family:var(--fp-font-ui);font-size:13px;line-height:1.6;letter-spacing:0;color:var(--fp-text-muted);text-align:start}
.fp-risk-foot .en{font-family:var(--fp-font-family-body)}
/* list rows */
.fp-list{display:grid;border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);background:var(--fp-ground-panel);overflow:hidden}
.fp-listrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border-block-end:1px solid var(--fp-line-ash);color:inherit;text-decoration:none;background:none;border-inline:0;border-block-start:0;font:inherit;text-align:start;cursor:pointer;width:100%}
.fp-listrow:last-child{border-block-end:0}
.fp-listrow__ico{width:24px;height:24px;display:grid;place-items:center;color:var(--fp-text-muted)}/* plain 20 px icon, no tile (CEO review 4) */
.fp-listrow__ico .fp-icon{width:20px;height:20px}
.fp-listrow__ico--tile{width:36px;height:36px;border-radius:10px;background:var(--fp-brand-red-wash);color:var(--fp-red-as-text)}/* marketing feature grid only (.eco i on fiper.io) — not for app lists */
.fp-listrow__t,.fp-listrow__s{display:block}
.fp-listrow__t{font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body)}
.fp-listrow__s{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-listrow__end{text-align:end;display:grid;gap:2px;justify-items:end}
.fp-listrow__chev{color:var(--fp-text-muted)}
@media (hover:hover){.fp-listrow:hover{background:var(--fp-brand-red-wash)}}
.fp-listrow:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:-2px}

/* ───────────────────────── 11. modal & bottom sheet ───────────────────────── */
.fp-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--fp-ground-bg) 72%,transparent);z-index:var(--fp-z-scrim);animation:fp-fade var(--fp-motion-duration-state)}
.fp-sheet{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--fp-z-sheet);background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-block-end:0;border-start-start-radius:var(--fp-radius-sheet);border-start-end-radius:var(--fp-radius-sheet);box-shadow:var(--fp-shadow-overlay);padding:8px var(--fp-space-4) calc(var(--fp-space-4) + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:fp-up var(--fp-motion-duration-surface) var(--fp-motion-easing-standard)}
.fp-sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--fp-line-strong);margin:4px auto 14px}
.fp-sheet__title{font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-title);margin-block-end:8px}
.fp-modal{position:fixed;inset:0;z-index:var(--fp-z-sheet);display:grid;place-items:center;padding:var(--fp-space-4)}
.fp-modal__box{width:min(100%,440px);background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);box-shadow:var(--fp-shadow-overlay);padding:var(--fp-space-6);display:grid;gap:12px;animation:fp-up var(--fp-motion-duration-state) var(--fp-motion-easing-standard)}
.fp-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-block-start:8px;flex-wrap:wrap}
@keyframes fp-fade{from{opacity:0}}
@keyframes fp-up{from{opacity:0;transform:translateY(var(--fp-motion-reveal-offset))}}
/* static preview variants (no fixed positioning) */
.fp-demo-static .fp-sheet,.fp-demo-static .fp-tabbar,.fp-demo-static .fp-header,.fp-demo-static .fp-toast-region{position:relative;inset:auto;animation:none}
.fp-demo-static .fp-modal{position:relative;inset:auto;padding:0}
.fp-demo-static .fp-scrim{position:absolute;border-radius:var(--fp-radius-card)}

/* ───────────────────────── 12. chart container ───────────────────────── */
.fp-chart{--chart-bg:var(--fp-ground-panel);--chart-grid:var(--fp-chart-grid);--chart-axis:var(--fp-chart-axis);--chart-up:var(--fp-chart-candle-up);--chart-down:var(--fp-chart-candle-down);--chart-line:var(--fp-chart-line);--chart-dot:var(--fp-chart-dot);--chart-area:var(--fp-chart-area-fill);--chart-bench:var(--fp-chart-benchmark);--chart-cross:var(--fp-chart-crosshair);
  background:var(--chart-bg);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);overflow:hidden}
.fp-chart[data-trend="down"]{--chart-line:var(--fp-chart-line-down);--chart-dot:var(--fp-chart-line-down)}/* v2.4.0 (S-38 / S-59): the app value curve is coloured by the trend of the selected range — gain when it rises, loss when it falls — 2 px, no grid, no vertical axis, first / last value as a small label; the end dot = the line colour (never a fixed red dot). charts.mjs lineChart({app:true, trend:'auto'}) */
.fp-chart[data-trend="neutral"]{--chart-line:var(--fp-text-primary);--chart-dot:var(--fp-text-primary)}
.fp-chart__dot{fill:var(--chart-dot)}
.fp-chart__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 0}
.fp-chart__range{display:flex;gap:2px}
.fp-chart__range button{min-height:36px;position:relative;padding:0 10px;border:0;background:none;border-radius:var(--fp-radius-pill);font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);color:var(--fp-text-muted);cursor:pointer}
.fp-chart__range button[aria-pressed="true"]{background:var(--fp-brand-red-wash);color:var(--fp-text-primary)}
.fp-chart__canvas{display:block;width:100%;height:auto;direction:ltr}
.fp-chart__body{padding:8px 12px 4px}
.fp-chart__body svg[data-chart]{display:block;width:100%;height:auto;direction:ltr}/* generated by brand/scripts/charts.mjs — positions, axes and labels computed from one SAMPLE dataset */
.fp-chart__period{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted);font-weight:var(--fp-font-weight-medium)}
.fp-chart__head--stack{flex-direction:column;align-items:stretch;gap:6px}
.fp-chart__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px 10px}
.fp-chart__range--text button{font-family:var(--fp-font-ui)}.fp-chart__range--text button .fp-unit{font-size:inherit}/* Latin range codes are wrapped in .fp-unit; Arabic labels stay in font-ui */
.fp-chart__range button[aria-pressed="true"]{background:none;color:var(--fp-text-primary);box-shadow:inset 0 -2px 0 var(--fp-brand-red);border-radius:0}/* v2.0: active range = red underline (active state), no wash */
.fp-chart__axis{font-family:var(--fp-font-ui);font-variant-numeric:tabular-nums;font-size:var(--fp-font-size-app-caption);fill:var(--chart-axis)}
.fp-chart__grid{stroke:var(--chart-grid);stroke-width:1}
.fp-chart__line{stroke:var(--chart-line);stroke-width:2;fill:none;stroke-linejoin:round}
.fp-chart__area{fill:var(--chart-area)}
.fp-chart__bench{stroke:var(--chart-bench);stroke-width:1.5;fill:none;stroke-dasharray:4 4}
.fp-chart__up{fill:var(--chart-up);stroke:var(--chart-up)}
.fp-chart__down{fill:var(--chart-down);stroke:var(--chart-down)}
.fp-chart__cross{stroke:var(--chart-cross);stroke-width:1;stroke-dasharray:2 3}
.fp-chart__legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 16px 14px;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}
.fp-chart__title{font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:var(--fp-font-weight-semibold);color:var(--fp-text-label)}
.fp-chart__legend i{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-inline-end:6px;background:currentColor}
.fp-chart__legend .l1{color:var(--fp-chart-series-1)}.fp-chart__legend .l2{color:var(--fp-chart-series-2)}.fp-chart__legend .l3{color:var(--fp-chart-series-3)}.fp-chart__legend .l4{color:var(--fp-chart-series-4)}.fp-chart__legend .l5{color:var(--fp-chart-series-5)}.fp-chart__legend .l6{color:var(--fp-chart-series-6)}

/* ───────────────────────── 13. progress & stepper ───────────────────────── */
.fp-progress{height:6px;border-radius:3px;background:var(--fp-line-ash);overflow:hidden}
.fp-progress > span{display:block;height:100%;background:var(--fp-brand-red);border-radius:3px;transition:width var(--fp-motion-duration-surface) var(--fp-motion-easing-standard)}
.fp-progress--success > span{background:var(--fp-state-success)}
.fp-progress--warning > span{background:var(--fp-state-warning)}
.fp-stepper{display:grid;gap:0;counter-reset:step}
.fp-step{display:grid;grid-template-columns:28px 1fr;gap:12px;position:relative;padding-block-end:20px}
.fp-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--fp-font-ui);font-size:var(--fp-font-size-app-caption);font-weight:600;border:1px solid var(--fp-line-strong);color:var(--fp-text-muted);background:var(--fp-ground-coal);direction:ltr}
.fp-step::after{content:"";position:absolute;inset-inline-start:13.5px;inset-block-start:30px;inset-block-end:2px;width:1px;background:var(--fp-line-ash)}
.fp-step:last-child::after{display:none}
.fp-step[data-state="done"]::before{background:var(--fp-state-success);border-color:var(--fp-state-success);color:var(--fp-ground-bg);content:""}
.fp-step__ico{position:absolute;inset-inline-start:6px;inset-block-start:6px;width:16px;height:16px;color:var(--fp-text-on-success);stroke-width:2.5;pointer-events:none}
.fp-step[data-state="active"]::before{background:var(--fp-brand-red);border-color:var(--fp-brand-red);color:var(--fp-text-on-brand)}
.fp-step[data-state="pending"]::before{border-style:dashed}
.fp-step__t{font-weight:var(--fp-font-weight-semibold);font-size:var(--fp-font-size-app-body);line-height:28px}
.fp-step__s{font-size:var(--fp-font-size-app-caption);color:var(--fp-text-muted)}

/* ───────────────────────── 14. tooltip ───────────────────────── */
.fp-tip{position:relative;display:inline-flex}
.fp-tip__box{position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:0;z-index:var(--fp-z-tooltip);background:var(--fp-ground-coal);border:1px solid var(--fp-line-strong);color:var(--fp-text-primary);font-size:var(--fp-font-size-app-caption);padding:6px 10px;border-radius:var(--fp-radius-sm);white-space:nowrap;box-shadow:var(--fp-shadow-overlay);opacity:0;pointer-events:none;transition:opacity var(--fp-motion-duration-hover)}
.fp-tip:hover .fp-tip__box,.fp-tip:focus-within .fp-tip__box,.fp-tip[data-open="true"] .fp-tip__box{opacity:1}

/* ───────────────────────── 15. divider & misc ───────────────────────── */
.fp-divider{height:1px;background:var(--fp-line-ash);border:0;margin:0}
.fp-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-block-end:1px solid var(--fp-line-ash);font-size:var(--fp-font-size-app-caption)}
.fp-kv:last-child{border-block-end:0}
.fp-kv dt{color:var(--fp-text-muted)}
.fp-kv dd{margin:0;font-family:var(--fp-font-ui);font-weight:var(--fp-font-weight-semibold);text-align:end}
.fp-kv dd .fp-num{font-weight:600}
.fp-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--fp-ground-coal);border:1px solid var(--fp-line-ash);font-family:var(--fp-font-ui);font-weight:700;font-size:var(--fp-font-size-app-caption);color:var(--fp-text-primary);letter-spacing:0}
/* v2.4.0 (S-19 / ICR-H, owner 4 Nov 2026; tokens component.issuer-mark.*): the SYMBOLIC MARK of a fund issuer wherever its wordmark would be narrower than 56 px (list rows, tiles, chips): one or two Latin letters of the issuer name in Barlow Condensed 700 on a neutral tile from the tokens —
   never a shrunken, unreadable wordmark. Third-party logos: the issuer's official vector unmodified when it exists (≥ 3:1 against the ground); a raster is redrawn as a vector without modification; otherwise this typographic mark. */
.fp-issuer-mark{display:inline-grid;place-items:center;width:var(--fp-c-issuer-mark-size-md);height:var(--fp-c-issuer-mark-size-md);border-radius:10px;background:var(--fp-c-issuer-mark-tile-fill);border:1px solid var(--fp-c-issuer-mark-tile-border);color:var(--fp-c-issuer-mark-text);font-family:var(--fp-c-issuer-mark-font);font-weight:700;font-size:var(--fp-c-issuer-mark-font-size-40);line-height:1;letter-spacing:0;text-transform:uppercase;direction:ltr;flex:none;user-select:none}
.fp-issuer-mark--sm{width:var(--fp-c-issuer-mark-size-sm);height:var(--fp-c-issuer-mark-size-sm);border-radius:6px;font-size:13px}
.fp-issuer-mark--lg{width:var(--fp-c-issuer-mark-size-lg);height:var(--fp-c-issuer-mark-size-lg);border-radius:14px;font-size:24px}
.fp-issuer-mark img,.fp-issuer-mark svg{width:70%;height:70%;display:block}/* an official issuer vector inside the tile, unmodified */

/* ───────────────────────── 16. light-expression adjustments (PROPOSED, decision item 3) ───────────────────────── */
/* tokens.css does not re-map the disabled pair for light grounds yet; derive it from the light line tokens */
[data-theme="light"] .fp-btn[disabled],[data-theme="light"] .fp-btn[aria-disabled="true"],[data-theme="light"] .fp-input[disabled],[data-theme="light"] .fp-select[disabled],[data-theme="light"] .fp-textarea[disabled]{background:var(--fp-line-ash);color:var(--fp-text-muted)}
[data-theme="light"] .fp-badge--neutral{background:var(--fp-line-ash)}
[data-theme="light"] .fp-header{background:var(--fp-c-header-fill)}
[data-theme="light"] .fp-skeleton{background:var(--fp-line-ash)}

/* ── touch-target hit areas (fix pass 29 Oct 2026): every interactive element gets a ≥ 44×44 CSS px hit box without changing its visual size ── */
.fp-btn,.fp-btn--sm,.fp-seg button,.fp-chip,.fp-chart__range button,.fp-toast__action,.fp-check,.fp-switch,.fp-tabs button,.fp-tabs a{position:relative}
.fp-btn--sm::after,.fp-seg button::after,.fp-chip::after,.fp-chart__range button::after,.fp-toast__action::after,.fp-check::after,.fp-tabs button::after,.fp-tabs a::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
.fp-btn{min-height:var(--fp-size-touch-min)}
.fp-check{min-height:var(--fp-size-touch-min);align-items:center}
.fp-switch{min-height:var(--fp-size-touch-min)}

/* ───────────────────────── 18. learn card (v2.5.0 — the visual layer, owner assignment 5 Nov 2026 § 4.4; tokens component.learn-card.*) ─────────────────────────
   A learn card = a topic tint (a wash of the package's secondary colours, one per topic) + the level-2 SCENE in a 16:10 window + a title (20) + one line.
   Cards sit in .fp-learn-row — a horizontal, scroll-snapping row that starts at the inline-start edge (RTL: the first card on the right, scrolling to the left); one card and the edge of the next are visible.
   data-read="true" shows the «read» tick (motion.css pops it once). The content opens in .fp-learn-sheet: 3–5 screens (.fp-learn-sheet__screen), the last one a recap card (.fp-learn-recap) followed by the risk line (.fp-risk-foot).
   Scene files: brand/visual/scenes/ (level 2); until a scene exists the level-1 drawing may sit in the window at 96 px, never stretched. */
.fp-learn-row{display:flex;gap:var(--fp-c-learn-card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--fp-space-4);padding-inline:var(--fp-space-4);padding-block:4px;margin-inline:calc(var(--fp-space-4) * -1);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fp-learn-row::-webkit-scrollbar{display:none}
.fp-learn-row > *{flex:0 0 var(--fp-c-learn-card-width);scroll-snap-align:start}
.fp-learn-card{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--fp-c-learn-card-tint-default);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);overflow:hidden;color:inherit;text-decoration:none;cursor:pointer;text-align:start}
.fp-learn-card[data-topic="why-funds"]{background:var(--fp-c-learn-card-tint-why-funds)}
.fp-learn-card[data-topic="sharia"],.fp-learn-card[data-topic="purification"]{background:var(--fp-c-learn-card-tint-sharia)}
.fp-learn-card[data-topic="daily-batch"]{background:var(--fp-c-learn-card-tint-daily-batch)}
.fp-learn-card[data-topic="risk"]{background:var(--fp-c-learn-card-tint-risk)}
.fp-learn-card[data-topic="distributions"]{background:var(--fp-c-learn-card-tint-distributions)}
.fp-learn-card__scene{position:relative;aspect-ratio:var(--fp-c-learn-card-scene-ratio);display:grid;place-items:center;overflow:hidden}
.fp-learn-card__scene img,.fp-learn-card__scene svg{width:100%;height:100%;object-fit:contain;display:block}
.fp-learn-card__scene[data-level="1"] img,.fp-learn-card__scene[data-level="1"] svg{width:96px;height:96px}
.fp-learn-card__body{padding:12px 16px 16px;display:grid;gap:4px;align-content:start}
.fp-learn-card__title{font-size:var(--fp-c-learn-card-title-size);font-weight:var(--fp-font-weight-semibold);line-height:1.3;color:var(--fp-text-primary)}
.fp-learn-card__line{font-size:var(--fp-c-learn-card-line-size);color:var(--fp-text-muted);line-height:1.5}
.fp-learn-card__read{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:24px;height:24px;border-radius:50%;background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);display:none;place-items:center;color:var(--fp-c-learn-card-read-mark)}
.fp-learn-card__read svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fp-learn-card[data-read="true"] .fp-learn-card__read{display:grid}
.fp-learn-card:focus-visible{outline:2px solid var(--fp-action-focus-ring);outline-offset:2px}
/* the content sheet: a bottom sheet (§ 11) whose body is a horizontal pager of 3–5 screens; dots show the position; the last screen is the recap card + the risk line */
.fp-learn-sheet__pager{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin-inline:calc(var(--fp-space-4) * -1);scrollbar-width:none}
.fp-learn-sheet__pager::-webkit-scrollbar{display:none}
.fp-learn-sheet__screen{flex:0 0 100%;scroll-snap-align:start;padding-inline:var(--fp-space-4);display:grid;gap:12px;align-content:start}
.fp-learn-sheet__screen .fp-learn-card__scene{border-radius:var(--fp-radius-media);background:var(--fp-ground-coal)}
.fp-learn-sheet__screen h3{margin:0;font-size:var(--fp-c-learn-card-title-size);font-weight:var(--fp-font-weight-semibold)}
.fp-learn-sheet__screen p{margin:0;font-size:var(--fp-c-learn-card-line-size);color:var(--fp-text-primary);line-height:1.6}
.fp-learn-sheet__dots{display:flex;justify-content:center;gap:6px;padding-block:10px}
.fp-learn-sheet__dots span{width:6px;height:6px;border-radius:50%;background:var(--fp-line-strong)}
.fp-learn-sheet__dots span[aria-current="true"]{background:var(--fp-text-primary)}
.fp-learn-recap{background:var(--fp-ground-panel);border:1px solid var(--fp-line-ash);border-radius:var(--fp-radius-card);padding:16px;display:grid;gap:8px}
.fp-learn-recap h4{margin:0;font-size:var(--fp-c-learn-card-title-size);font-weight:var(--fp-font-weight-semibold)}
.fp-learn-recap ul{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:var(--fp-c-learn-card-line-size)}

/* visual/motion/motion.css — fiper-brand package file, bundled at build time (FF-R4C D2); source md5 3d03af02c808cef0cb9e1987e27a0eec */
/* Fiper Brand Identity System v2.5.0 — visual layer, level 3: motion.css (the motion and visual-feedback system — owner assignment 5 Nov 2026 § 5)
   Requires fonts.css + tokens.css + components/components.css first. EVERY duration and easing is a token (--fp-motion-*); a literal ms / cubic-bezier in this file fails scripts/check-motion.mjs.
   Durations: press 100 · small 200 · sheet 280 · large 400 · count 600 · success ≤ 1200 · shake 320 · skeleton 1400. Easings: enter · exit · spring-soft (≤ 4 % overshoot). Offsets: small 8 · push 24 · sheet 100 % · count 1em · shake 6.
   Reduced motion (prefers-reduced-motion: reduce): every motion below becomes an opacity fade (≤ small) or nothing — the block at the end; the success animation shows its last frame; the count shows the final figure; the sheet appears in place.
   Direction: the push and the shared element follow the writing direction (logical start → end) through --fp-dir (1 in LTR, -1 in RTL). Numbers, logos and the curve never mirror.
   JS counterpart: motion.js (count-up, curve draw / morph / scrub, success play-once, error shake, haptics map, shared element). Live preview: preview.html. */

:root{--fp-dir:1}
[dir="rtl"]{--fp-dir:-1}

/* ── 1. press — buttons, rows, cards: scale 0.97 within 100 ms, back on release ── */
.fp-press,.fp-btn,.fp-listrow,.fp-card[data-pressable],.fp-holding[data-pressable],.fp-learn-card{transition:transform var(--fp-motion-duration-press) var(--fp-motion-easing-press)}
.fp-press:active,.fp-listrow:active,.fp-card[data-pressable]:active,.fp-holding[data-pressable]:active,.fp-learn-card:active{transform:scale(var(--fp-motion-press-scale))}

/* ── 2. count-up — the big figure rolls digit by digit (vertical roller, 600 ms, enter easing); motion.js builds the columns from data-count ── */
.fp-count{display:inline-flex;overflow:hidden;line-height:1;vertical-align:bottom;font-variant-numeric:tabular-nums lining-nums}
.fp-count__col{display:inline-block;height:1em;overflow:hidden}
.fp-count__strip{display:grid;transform:translateY(calc(var(--fp-motion-offset-count) * -1 * var(--d,0)));transition:transform var(--fp-motion-duration-count) var(--fp-motion-easing-enter)}
.fp-count__strip > span{height:1em;display:block}
.fp-count__sep{display:inline-block}
.fp-count[data-ready="false"] .fp-count__strip{transition:none}

/* ── 3. the value curve — draws start → end on open (400 ms), morphs between timeframes (400 ms, JS), scrub line + dot (JS) ── */
.fp-curve path.fp-curve__line{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);animation:fp-curve-draw var(--fp-motion-duration-large) var(--fp-motion-easing-enter) forwards}
@keyframes fp-curve-draw{to{stroke-dashoffset:0}}
.fp-curve__scrub{opacity:0;transition:opacity var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}
.fp-curve[data-scrubbing="true"] .fp-curve__scrub{opacity:1}
.fp-curve__scrub line{stroke:var(--fp-line-strong);stroke-width:1}
.fp-curve__scrub circle{fill:var(--fp-chart-dot);r:4}

/* ── 4. bottom sheet — slides up with the scrim on EVERY platform (no fade-only on Android); dialog keeps the short rise ── */
.fp-sheet{animation:fp-sheet-in var(--fp-motion-duration-sheet) var(--fp-motion-easing-enter)}
.fp-scrim{animation:fp-fade var(--fp-motion-duration-sheet) var(--fp-motion-easing-enter)}
.fp-sheet[data-closing="true"]{animation:fp-sheet-out var(--fp-motion-duration-sheet) var(--fp-motion-easing-exit) forwards}
.fp-scrim[data-closing="true"]{animation:fp-fade-out var(--fp-motion-duration-sheet) var(--fp-motion-easing-exit) forwards}
@keyframes fp-sheet-in{from{transform:translateY(var(--fp-motion-offset-sheet))}}
@keyframes fp-sheet-out{to{transform:translateY(var(--fp-motion-offset-sheet))}}
@keyframes fp-fade-out{to{opacity:0}}

/* ── 5. screen transitions — horizontal push that respects the direction (start → end), 400 ms; the shared element (fund row → fund page) moves by FLIP in motion.js ── */
.fp-page-enter{animation:fp-page-in var(--fp-motion-duration-large) var(--fp-motion-easing-enter)}
.fp-page-exit{animation:fp-page-out var(--fp-motion-duration-large) var(--fp-motion-easing-exit) forwards}
.fp-page-back-enter{animation:fp-page-back-in var(--fp-motion-duration-large) var(--fp-motion-easing-enter)}
@keyframes fp-page-in{from{opacity:0;transform:translateX(calc(var(--fp-motion-offset-push) * var(--fp-dir) * -1))}}
@keyframes fp-page-out{to{opacity:0;transform:translateX(calc(var(--fp-motion-offset-push) * var(--fp-dir)))}}
@keyframes fp-page-back-in{from{opacity:0;transform:translateX(calc(var(--fp-motion-offset-push) * var(--fp-dir)))}}
.fp-shared{transition:transform var(--fp-motion-duration-large) var(--fp-motion-easing-enter),width var(--fp-motion-duration-large) var(--fp-motion-easing-enter),height var(--fp-motion-duration-large) var(--fp-motion-easing-enter);transform-origin:0 0}

/* ── 6. loading — a page-shaped skeleton from the first frame with a calm sheen (a translating band, no gradient), never an empty frame ── */
.fp-skel{position:relative;overflow:hidden;animation:none}
.fp-skel::after{content:"";position:absolute;inset:0;width:40%;background:var(--fp-line-strong);opacity:.35;transform:translateX(calc(-250% * var(--fp-dir)));animation:fp-sheen var(--fp-motion-duration-skeleton) linear infinite}
@keyframes fp-sheen{to{transform:translateX(calc(250% * var(--fp-dir)))}}

/* ── 7. success — three moments only (order received, order executed, charity allocated): the scene's short animation ≤ 1.2 s, played ONCE; no confetti, no sound ──
   .fp-success hosts the Lottie player (motion.js) or this CSS fallback: a circle draws, the tick draws, the whole settles with the soft spring. */
.fp-success{display:grid;place-items:center}
.fp-success svg{overflow:visible}
.fp-success .fp-success__ring{stroke:var(--fp-state-success);stroke-width:2.5;fill:none;stroke-dasharray:var(--ring,132);stroke-dashoffset:var(--ring,132)}
.fp-success .fp-success__tick{stroke:var(--fp-state-success);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--tick,30);stroke-dashoffset:var(--tick,30)}
.fp-success[data-play="true"] .fp-success__ring{animation:fp-draw var(--fp-motion-duration-large) var(--fp-motion-easing-enter) forwards}
.fp-success[data-play="true"] .fp-success__tick{animation:fp-draw var(--fp-motion-duration-small) var(--fp-motion-easing-enter) var(--fp-motion-duration-large) forwards}
.fp-success[data-play="true"] svg{animation:fp-settle var(--fp-motion-duration-small) var(--fp-motion-easing-spring-soft) var(--fp-motion-duration-count) both}
.fp-success[data-play="done"] .fp-success__ring,.fp-success[data-play="done"] .fp-success__tick{stroke-dashoffset:0}
@keyframes fp-draw{to{stroke-dashoffset:0}}
@keyframes fp-settle{from{transform:scale(.96)}to{transform:scale(1)}}

/* ── 8. error — a short horizontal shake of the field together with its message; the field is never cleared ── */
.fp-field[data-shake="true"] .fp-input,.fp-shake{animation:fp-shake var(--fp-motion-duration-shake) var(--fp-motion-easing-exit)}
@keyframes fp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(calc(var(--fp-motion-offset-shake) * -1))}50%{transform:translateX(var(--fp-motion-offset-shake))}75%{transform:translateX(calc(var(--fp-motion-offset-shake) * -1))}}
.fp-field__msg[data-enter]{animation:fp-fade var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}

/* ── 9. switch and badges — the knob with the soft spring (200 ms); the bell counter pops in ── */
.fp-switch input::after{transition:transform var(--fp-motion-duration-small) var(--fp-motion-easing-spring-soft),background var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}
.fp-switch input{transition:background var(--fp-motion-duration-small) var(--fp-motion-easing-enter),border-color var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}
.fp-badge-pop,.fp-bell__count[data-enter]{animation:fp-pop var(--fp-motion-duration-small) var(--fp-motion-easing-spring-soft)}
@keyframes fp-pop{from{opacity:0;transform:scale(.6)}}
.fp-toast{animation:fp-toast-in var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}
.fp-chip,.fp-badge{transition:background var(--fp-motion-duration-small) var(--fp-motion-easing-enter),border-color var(--fp-motion-duration-small) var(--fp-motion-easing-enter),color var(--fp-motion-duration-small) var(--fp-motion-easing-enter)}

/* ── 10. learn card read state (the component lives in components.css § 18) ── */
.fp-learn-card[data-read="true"] .fp-learn-card__read{animation:fp-pop var(--fp-motion-duration-small) var(--fp-motion-easing-spring-soft)}

/* ── reduced motion — the one rule: opacity fade (≤ 200 ms) or nothing. Overrides every animation above (same !important weight as tokens.css, higher specificity). ── */
@media (prefers-reduced-motion:reduce){
  .fp-press:active,.fp-listrow:active,.fp-card[data-pressable]:active,.fp-holding[data-pressable]:active,.fp-learn-card:active{transform:none}
  .fp-count__strip{transition:none!important}
  .fp-curve path.fp-curve__line{animation:none!important;stroke-dashoffset:0}
  .fp-curve__scrub{transition:none!important}
  .fp-sheet,.fp-modal__box,.fp-page-enter,.fp-page-back-enter,.fp-toast,.fp-badge-pop,.fp-bell__count[data-enter],.fp-learn-card[data-read="true"] .fp-learn-card__read{animation:fp-fade var(--fp-motion-duration-small) linear!important}
  .fp-sheet[data-closing="true"],.fp-page-exit,.fp-scrim[data-closing="true"]{animation:fp-fade-out var(--fp-motion-duration-small) linear forwards!important}
  .fp-scrim{animation:fp-fade var(--fp-motion-duration-small) linear!important}
  .fp-shared{transition:none!important}
  .fp-skel::after{animation:none!important;opacity:0}
  .fp-success[data-play="true"] .fp-success__ring,.fp-success[data-play="true"] .fp-success__tick{animation:none!important;stroke-dashoffset:0}
  .fp-success[data-play="true"] svg{animation:fp-fade var(--fp-motion-duration-small) linear!important}
  .fp-field[data-shake="true"] .fp-input,.fp-shake{animation:none!important}
  .fp-switch input::after,.fp-switch input{transition:none!important}
}