/* fonts:start (self-hosted copies of Google Fonts: Sora and IBM Plex, SIL Open Font License) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, 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(fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/sora-500-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/sora-500-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fonts:end */
html{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Morocco Insurance Guide, in the "Bright blueprint" layout of MortgageMath US, in a teal palette:
   white surfaces, a faint grid, dark teal #2F5A56, turquoise #2CDBB4, mint #92FADB, copper #A47454, brown #60442C, sage #A4C8C4; Sora, IBM Plex Sans, IBM Plex Mono.
   Light theme only. Every colour is a token below. */
:root{
  --c-bg:#ffffff; --c-bg-soft:#f6faf9; --c-bg-tint:#edf6f4; --c-grid:#e4f1ee; --c-surface:#ffffff;
  --c-glass:rgb(255 255 255 / .72); --c-glass-strong:rgb(255 255 255 / .9); --c-glass-border:rgb(47 90 86 / .14);
  --c-line:#dce9e6; --c-line-strong:#bfd6d2;
  --c-ink:#14302d; --c-text:#24403d; --c-muted:#4e6764; --c-subtle:#627a77;
  --c-primary:#2f5a56; --c-primary-hover:#244744; --c-primary-ink:#1e3e3b;
  --c-primary-50:#eef6f4; --c-primary-100:#d9ebe7; --c-primary-200:#bcd8d3; --c-primary-300:#a4c8c4;
  --c-accent:#2cdbb4; --c-accent-ink:#0b7a63; --c-accent-50:#effdf9; --c-accent-100:#c8f8ea; --c-accent-300:#92fadb;
  --c-violet:#60442c; --c-violet-50:#f6efe9; --c-amber:#8a5530; --c-amber-50:#faf3ee; --c-sky:#3f6f6a; --c-sky-50:#eef5f4;
  --c-danger:#b4372f; --c-danger-50:#fcefee; --c-on-primary:#ffffff;
  --g-wash:radial-gradient(60% 80% at 88% 0%, rgb(164 200 196 / .45), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgb(146 250 219 / .32), transparent 70%);
  --g-quick:linear-gradient(135deg, #eef6f4 0%, #effdf9 55%, #f8f1ec 100%);
  --g-primary:linear-gradient(135deg, #3a6e69 0%, #2f5a56 60%, #264a47 100%);
  --grid-size:32px;
  --g-grid:linear-gradient(var(--c-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);
  --f-display:"Sora", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-body:"IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs:.8125rem; --t-sm:.875rem; --t-base:clamp(1rem, .97rem + .14vw, 1.0625rem); --t-lg:clamp(1.125rem, 1.08rem + .22vw, 1.25rem);
  --t-xl:clamp(1.25rem, 1.15rem + .45vw, 1.5rem); --t-2xl:clamp(1.5rem, 1.3rem + .9vw, 2rem); --t-3xl:clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --t-4xl:clamp(2.1rem, 1.5rem + 2.7vw, 3.4rem);
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px; --s-10:80px;
  --container:1140px; --gutter:clamp(16px, 4vw, 32px); --main:760px; --side:280px; --gap:64px;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgb(20 48 45 / .06), 0 1px 1px rgb(20 48 45 / .03);
  --sh-2:0 1px 2px rgb(20 48 45 / .05), 0 6px 16px -6px rgb(47 90 86 / .16), 0 18px 36px -18px rgb(20 48 45 / .13);
  --sh-3:0 2px 4px rgb(20 48 45 / .05), 0 14px 32px -10px rgb(47 90 86 / .22), 0 32px 64px -28px rgb(34 196 160 / .22);
  --sh-glow:0 0 0 4px rgb(47 90 86 / .14), 0 8px 24px -6px rgb(47 90 86 / .3);
  --ring:0 0 0 3px #fff, 0 0 0 5px var(--c-primary);
  --ease:cubic-bezier(.16, 1, .3, 1);
  --topbar-h:116px;
  /* names used by the illustrations and diagrams */
  --paper:var(--c-bg-soft); --surface:var(--c-surface); --sunk:var(--c-bg-tint);
  --ink:var(--c-ink); --ink-2:var(--c-muted); --ink-3:var(--c-subtle); --rule:var(--c-line); --rule-2:#e6f0ee;
  --green:var(--c-accent); --green-ink:var(--c-accent-ink); --green-soft:var(--c-accent-50); --on-green:#0d3b32;
  --stamp:#a4542a; --stamp-soft:#f8eee8; --amber:var(--c-amber); --amber-soft:var(--c-amber-50);
  --blue:var(--c-primary); --blue-soft:var(--c-primary-50); --mark:#c9f7e8; --shadow:rgb(20 48 45 / .18);
  --ill-green:#2cdbb4; --ill-blue:#3f6f6a; --ill-amber:#c8783a; --ill-clay:#a47454; --ill-sand:#f8efe6; --ill-tire:#24403d;
  --font-display:var(--f-display); --font-body:var(--f-body); --font-mono:var(--f-mono);
  color-scheme:light;
}
@media (min-width:1024px){ :root{ --topbar-h:68px } }

/* ------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:not([data-mode="static"]),html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:400 var(--t-base)/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-family:var(--f-display);color:var(--c-ink);letter-spacing:-.02em;text-wrap:balance;line-height:1.22;font-weight:650}
a{color:var(--c-primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--c-primary-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
::selection{background:var(--c-primary-100);color:var(--c-ink)}
mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:3px}
bdi.term{font-style:italic;color:var(--c-muted)}
bdi.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:100;background:var(--c-primary);color:#fff;padding:8px 16px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:8px;color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
[dir="rtl"] .arr,[dir="rtl"] .crumb-sep{transform:scaleX(-1)}
.main:focus{outline:none}

/* ------------------------------------------------ buttons, badges, tones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--g-primary);color:var(--c-on-primary);font:600 var(--t-sm)/1.15 var(--f-display);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgb(255 255 255 / .25) inset, 0 8px 20px -8px rgb(47 90 86 / .55);transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s}
.btn:hover{color:var(--c-on-primary);transform:translateY(-1px);box-shadow:0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 28px -8px rgb(47 90 86 / .6)}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.btn-primary{background:var(--g-primary)}
.btn-ghost{background:var(--c-glass-strong);color:var(--c-primary-ink);border-color:var(--c-line-strong);box-shadow:none}
.btn-ghost:hover{color:var(--c-primary);background:var(--c-primary-50);border-color:var(--c-primary-300);box-shadow:none}
.btn-soft{background:var(--c-primary-50);color:var(--c-primary-ink);border-color:var(--c-primary-100);box-shadow:none}
.btn-soft:hover{color:var(--c-primary);background:var(--c-primary-100);box-shadow:none}
.btn-sm{min-height:38px;padding:8px 16px;font-size:var(--t-xs)}
.btn-lg{min-height:52px;padding:14px 26px;font-size:var(--t-base)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-glass-strong);color:var(--c-ink);cursor:pointer}
.icon-btn:hover{border-color:var(--c-primary-300);color:var(--c-primary)}
.tone-blue{background:var(--c-primary-50);color:var(--c-primary)} .tone-mint{background:var(--c-accent-50);color:var(--c-accent-ink)}
.tone-violet{background:var(--c-violet-50);color:var(--c-violet)} .tone-amber{background:var(--c-amber-50);color:var(--c-amber)}
.tone-sky{background:var(--c-sky-50);color:var(--c-sky)}
.tile-i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-sm)}
.tile-i .icon{width:22px;height:22px}
.badge{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-2);padding:6px 14px 6px 10px;border-radius:var(--r-pill);font:600 var(--t-xs)/1.2 var(--f-body);border:1px solid transparent}
.badge .icon{width:16px;height:16px}
.badge-law{background:var(--c-danger-50);color:var(--c-danger);border-color:#f3cfcc}
.badge-some,.badge-asked{background:var(--c-amber-50);color:var(--c-amber);border-color:#ecd5c4}
.badge-free{background:var(--c-accent-50);color:var(--c-accent-ink);border-color:var(--c-accent-100)}
.badge-auto{background:var(--c-primary-50);color:var(--c-primary);border-color:var(--c-primary-100)}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);font:600 11.5px/1.3 var(--f-body)}
.tag-law{background:var(--c-danger-50);color:var(--c-danger)} .tag-some,.tag-asked{background:var(--c-amber-50);color:var(--c-amber)}
.tag-free{background:var(--c-accent-50);color:var(--c-accent-ink)} .tag-auto{background:var(--c-primary-50);color:var(--c-primary)}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--s-2);padding:6px 14px 6px 10px;border-radius:var(--r-pill);background:var(--c-glass-strong);
  border:1px solid var(--c-glass-border);box-shadow:var(--sh-1);color:var(--c-primary);font:600 var(--t-xs)/1.2 var(--f-display);letter-spacing:.02em}
.eyebrow-pill .icon{width:16px;height:16px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dot-blue{background:var(--c-primary)} .dot-mint{background:var(--c-accent)} .dot-violet{background:#8a4f1a}

/* ------------------------------------------------ header */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50}
.topbar::before{content:"";position:absolute;inset:0;background:var(--c-glass-strong);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);border-bottom:1px solid var(--c-line)}
.topbar-in{position:relative;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);padding-block:10px;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand langs menu" "search search search";align-items:center;gap:10px 10px}
.brand{grid-area:brand;display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--c-ink);text-decoration:none}
.brand:hover{color:var(--c-ink)}
.brand-mark{flex:none;width:36px;height:36px}
.brand-name{font:700 1.05rem/1.15 var(--f-display);letter-spacing:-.03em;min-width:0}
.topnav{display:none}
.tn{display:inline-flex;align-items:center;padding:9px 13px;border-radius:var(--r-pill);color:var(--c-text);font:500 var(--t-sm)/1 var(--f-display);text-decoration:none}
.tn:hover{background:var(--c-primary-50);color:var(--c-primary)}
.menu-btn{grid-area:menu;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;padding:0 10px;border-radius:var(--r-pill);
  border:1px solid var(--c-line);background:var(--c-glass-strong);color:var(--c-ink);font:600 var(--t-sm)/1 var(--f-display)}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{background:var(--c-primary-50);color:var(--c-primary);border-color:var(--c-primary-200)}
.menu-l,.menu-chev{display:none}
.menu-chev{width:16px;height:16px;transition:transform .2s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-chev{transform:rotate(180deg)}
.search{grid-area:search;position:relative;min-width:0;display:flex;align-items:center}
.search-i{position:absolute;inset-inline-start:14px;color:var(--c-subtle);width:18px;height:18px;pointer-events:none}
.search input{width:100%;height:44px;padding-block:0;padding-inline:42px 14px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);
  color:var(--c-ink);font-size:var(--t-sm);transition:border-color .2s, box-shadow .2s}
.search input::placeholder{color:var(--c-subtle)}
.search input:focus{outline:none;border-color:var(--c-primary);box-shadow:var(--sh-glow)}
.search-panel{position:absolute;inset-inline:0;top:calc(100% + 8px);z-index:60;max-height:min(70vh,540px);overflow:auto;padding:6px;border-radius:var(--r-lg);
  background:var(--c-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--c-glass-border);box-shadow:var(--sh-3)}
.sr{display:block;width:100%;padding:10px 12px;border:0;border-radius:var(--r-sm);background:transparent;text-align:start;color:var(--c-text);text-decoration:none;cursor:pointer}
.sr:hover,.sr:focus-visible{background:var(--c-primary-50);color:var(--c-text)}
.sr-p{display:block;font:600 11px/1.3 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary)}
.sr-h{display:block;font:600 var(--t-sm)/1.35 var(--f-display);color:var(--c-ink)}
.sr-s{display:block;font-size:var(--t-xs);color:var(--c-muted);line-height:1.5}
.sr-none{padding:14px;color:var(--c-muted);font-size:var(--t-sm)}
.langs{grid-area:langs;display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--c-bg-tint);border:1px solid var(--c-line)}
.langs button,.langs a{display:block;padding:6px 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-muted);font:600 12.5px/1.2 var(--f-display);text-decoration:none;cursor:pointer}
.langs button[aria-pressed="true"],.langs a[aria-current="true"]{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-1)}
.langs [lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--f-body);font-size:13px}
.top-cta{display:none}
@media (min-width:1024px){
  .topbar-in{height:68px;padding-block:0;grid-template-columns:auto auto minmax(160px,1fr) auto auto;grid-template-areas:"brand menu search langs cta";gap:12px}
  .menu-l,.menu-chev{display:inline}
  .menu-ico{display:none}
  .menu-btn{padding:0 14px}
  .search{max-width:340px;justify-self:end;width:100%}
  .search input{height:40px}
  .top-cta{display:inline-flex;grid-area:cta}
}
@media (min-width:1360px){
  .topbar-in{grid-template-columns:auto auto auto minmax(160px,1fr) auto auto;grid-template-areas:"brand nav menu search langs cta"}
  .topnav{grid-area:nav;display:flex;gap:2px}
}
@media (max-width:1023px){
  .brand-name{font-size:.95rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
@media (max-width:400px){ .brand-mark{width:32px;height:32px} .brand-name{font-size:.88rem} .langs button,.langs a{padding:6px 8px} }

/* ------------------------------------------------ all-guides menu (a panel under the header) */
.side{position:fixed;z-index:45;inset-inline:0;top:calc(env(safe-area-inset-top,0px) + var(--topbar-h));max-height:calc(100vh - var(--topbar-h));overflow:auto;
  padding-inline:var(--gutter);padding-block:12px 24px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease), transform .3s var(--ease), visibility 0s linear .3s}
.nav-open .side{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.side-in{max-width:var(--container);margin-inline:auto;padding:var(--s-3);border-radius:var(--r-xl);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-3)}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.side-title{font:650 var(--t-lg)/1.2 var(--f-display);color:var(--c-ink)}
.side-cols{display:grid;gap:var(--s-2)}
.nav-h{margin-bottom:6px;font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);color:var(--c-text);text-decoration:none;font:500 var(--t-sm)/1.3 var(--f-body)}
.side a:hover{background:var(--c-bg-soft);color:var(--c-primary)}
.side a[aria-current="page"]{background:var(--c-primary-50);color:var(--c-primary);font-weight:600}
.nav-i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px}
.nav-i .icon{width:16px;height:16px}
.scrim{position:fixed;inset:0;z-index:40;background:rgb(20 48 45 / .22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media (min-width:720px){
  .side-cols{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.1fr);grid-template-areas:"a b d" "c b d";gap:var(--s-2) var(--s-4)}
  .nav-g:nth-child(1){grid-area:a} .nav-g:nth-child(2){grid-area:b} .nav-g:nth-child(3){grid-area:c} .nav-g:nth-child(4){grid-area:d}
  .nav-g:nth-child(2) ul{grid-template-columns:1fr 1fr;column-gap:var(--s-2)}
}

/* ------------------------------------------------ page layout */
.shell{display:block}
.main{display:block;min-width:0;padding-bottom:var(--s-8)}
.page{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start side-start] minmax(0,var(--main)) [main-end content-end side-end] minmax(var(--gutter),1fr) [full-end];align-content:start}
.page{scroll-margin-top:calc(env(safe-area-inset-top,0px) + var(--topbar-h))}
.page > *{grid-column:content}
.page-head{grid-column:full;position:relative;isolation:isolate;padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2));padding-block:var(--s-4) var(--s-6);
  background:var(--g-wash), var(--c-bg);border-bottom:1px solid var(--c-line)}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-grid);-webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);mask-image:linear-gradient(180deg,#000,transparent 95%)}
.ph-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);align-items:center}
.ph-text{min-width:0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;margin:0 0 var(--s-2);padding:0;font-size:var(--t-xs)}
.crumbs li{display:inline-flex;align-items:center;gap:4px;color:var(--c-muted)}
.crumbs a{color:var(--c-muted);text-decoration:none;padding:3px 0}
.crumbs a:hover{color:var(--c-primary)}
.crumb-sep{width:14px;height:14px;color:var(--c-line-strong)}
.page-head h1{font-size:var(--t-4xl);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:20ch}
.lead{margin-top:var(--s-2);max-width:60ch;color:var(--c-muted);font-size:var(--t-lg);line-height:1.6}
.ph-art{display:none;position:relative}
.art-card{padding:var(--s-3);border-radius:var(--r-xl);border:1px solid var(--c-glass-border);box-shadow:var(--sh-3);
  background:radial-gradient(120% 90% at 100% 0%, var(--c-primary-50), transparent 60%), radial-gradient(90% 80% at 0% 100%, var(--c-accent-50), transparent 60%), var(--c-glass-strong)}
.page:not(.page-wide) > .page-head{padding-inline:max(var(--gutter), calc((100% - var(--main)) / 2))}
@media (min-width:720px){
  .ph-inner{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-5)}
  .ph-art{display:block}
}
@media (min-width:1100px){
  .page{grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,calc(var(--container) - var(--gap) - var(--side))) [main-end] var(--gap) [side-start] var(--side) [side-end content-end] minmax(var(--gutter),1fr) [full-end]}
  .page:not(.page-wide) > .page-head{padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2))}
  .page:not(.page-wide) > .page-head{grid-row:1}
  .page:not(.page-wide) > .glance{grid-row:2}
  .page:not(.page-wide) > .prose{grid-column:content-start / main-end;grid-row:3}
  .page:not(.page-wide) > .toc{grid-column:side;grid-row:3;align-self:start;position:sticky;top:calc(var(--topbar-h) + 24px)}
  .page:not(.page-wide):not(:has(> .toc)) > .prose{grid-column:content}
  .page:not(.page-wide) > .page-foot{grid-row:4}
  .ph-inner{grid-template-columns:minmax(0,1fr) 340px}
}
.page-wide{grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,var(--container)) [content-end] minmax(var(--gutter),1fr) [full-end]}
.page-wide > .prose{grid-column:content}

/* home hero */
.hero{padding-block:var(--s-5) var(--s-8);background:var(--g-wash), var(--c-bg)}
.hero::before{-webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%)}
.hero h1{font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);max-width:15ch}
.hero .lead{font-size:var(--t-lg)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-3)}
.trust{list-style:none;padding:0;margin:var(--s-3) 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--c-muted);font-size:var(--t-sm)}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust .icon{color:var(--c-accent);width:18px;height:18px}
.hero .ph-art{display:block;max-width:560px}
.hero .art-card{padding:var(--s-2) var(--s-3)}
.glass-chip{display:inline-flex;align-items:center;gap:8px;margin:10px 8px 0 0;padding:9px 13px;border-radius:var(--r-md);background:var(--c-glass-strong);border:1px solid var(--c-glass-border);
  box-shadow:var(--sh-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:var(--t-xs);color:var(--c-muted);white-space:nowrap}
.glass-chip b{font:600 var(--t-xs)/1 var(--f-display);color:var(--c-ink)}
.hero .ph-inner{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .hero .ph-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-6)}
  .hero .ph-art{padding:28px 0}
  .glass-chip{position:absolute;margin:0}
  .gc-a{inset-inline-start:-6%;top:6%} .gc-b{inset-inline-end:-3%;top:37%} .gc-c{inset-inline-start:6%;bottom:2%}
}

/* at a glance */
.glance{position:relative;z-index:2;margin-top:calc(-1 * var(--s-4))}
.glance-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.fact{position:relative;padding:var(--s-2) var(--s-2) 14px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
.fact::before{content:"";position:absolute;inset-inline:var(--s-2);top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}
.fact dt{font:600 11px/1.3 var(--f-display);letter-spacing:.07em;text-transform:uppercase;color:var(--c-subtle)}
.fact dd{margin-top:6px;color:var(--c-ink);font-size:var(--t-sm);font-weight:500;line-height:1.45}

/* table of contents: a scrolling row of chips, a sticky side card on wide screens */
.toc{margin-top:var(--s-4);padding-block:14px;border-block:1px solid var(--c-line)}
.toc-h{margin-bottom:10px;font:600 11px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle)}
.toc ol{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
[dir="rtl"] .toc ol{-webkit-mask-image:linear-gradient(270deg,#000 88%,transparent);mask-image:linear-gradient(270deg,#000 88%,transparent)}
.toc ol::-webkit-scrollbar{display:none}
.toc li{flex:none}
.toc li:last-child{padding-inline-end:40px}
.toc a{display:block;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);text-decoration:none;font-size:var(--t-xs);line-height:1.35;white-space:nowrap}
.toc a:hover{color:var(--c-primary);border-color:var(--c-primary-300)}
@media (min-width:1100px){
  .page-wide .toc ol{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .page-wide .toc li:last-child{padding-inline-end:0}
  .page:not(.page-wide) > .toc{margin-top:var(--s-6);padding:var(--s-2) var(--s-3) var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-glass-strong);box-shadow:var(--sh-1)}
  .page:not(.page-wide) > .toc ol{display:grid;gap:2px;max-height:calc(100vh - 220px);overflow:auto;-webkit-mask-image:none;mask-image:none;padding:0}
  .page:not(.page-wide) > .toc li:last-child{padding-inline-end:0}
  .page:not(.page-wide) > .toc a{white-space:normal;border:0;border-inline-start:2px solid var(--c-line);border-radius:0;background:none;padding:6px 10px;color:var(--c-muted);font-size:var(--t-sm)}
  .page:not(.page-wide) > .toc a:hover{color:var(--c-primary)}
  .page:not(.page-wide) > .toc a.is-active{color:var(--c-primary);border-inline-start-color:var(--c-primary);background:var(--c-primary-50);border-start-end-radius:6px;border-end-end-radius:6px;font-weight:500}
}

/* ------------------------------------------------ prose */
.prose{min-width:0}
.prose > .intro{margin-top:var(--s-5)}
.sec{scroll-margin-top:calc(var(--topbar-h) + 16px);margin-top:var(--s-6)}
.sec > h2{font-size:var(--t-2xl);margin-bottom:var(--s-1)}
.page:not(.page-home) .prose{counter-reset:sec}
.page:not(.page-home) .sec > h2{counter-increment:sec;display:flex;align-items:baseline;gap:12px}
.page:not(.page-home) .sec > h2::before{content:counter(sec, decimal-leading-zero);flex:none;transform:translateY(-3px);padding:4px 8px;border-radius:8px;background:var(--c-primary-50);box-shadow:inset 0 0 0 1px var(--c-primary-100);font:500 .78rem/1 var(--f-mono);color:var(--c-primary);letter-spacing:0}
:where(.prose) h3{margin-top:var(--s-4);font-size:var(--t-lg)}
:where(.prose) :is(p,ul,ol,dl){margin-top:14px}
:where(.prose) ul{padding-inline-start:1.3em}
:where(.prose) ol{padding-inline-start:1.3em}
:where(.prose) li{margin-top:6px;padding-inline-start:4px}
.prose ul > li::marker{color:var(--c-primary)}
.prose strong{font-weight:600;color:var(--c-ink)}
.prose a.ext::after{content:"↗";font-size:.75em;margin-inline-start:2px;vertical-align:2px}
/* numbered steps */
ol.steps{list-style:none;padding:0;margin-top:var(--s-2);counter-reset:step;display:grid;gap:12px}
ol.steps > li{counter-increment:step;position:relative;margin:0;padding:14px var(--s-3) 14px 70px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-1);min-height:68px}
[dir="rtl"] ol.steps > li{padding:14px 70px 14px var(--s-3)}
ol.steps > li::before{content:counter(step);position:absolute;inset-inline-start:14px;top:13px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--g-primary);color:#fff;font:500 var(--t-base)/1 var(--f-mono)}
/* checklists */
ul.checks{list-style:none;padding:0;display:grid;gap:8px}
ul.checks > li{position:relative;margin:0;padding:10px 14px;padding-inline-start:46px;border-radius:var(--r-md);background:var(--c-bg-soft);border:1px solid var(--c-line)}
ul.checks > li::before{content:"";position:absolute;inset-inline-start:14px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--c-accent-50) center/14px no-repeat;
  box-shadow:inset 0 0 0 1.5px var(--c-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* tables */
.table-wrap{margin-top:var(--s-3);overflow:auto;border-radius:var(--r-lg);border:1px solid var(--c-glass-border);background:var(--c-surface);box-shadow:var(--sh-2)}
table{border-collapse:collapse;width:100%;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
th,td{padding:12px 16px;border-bottom:1px solid var(--c-line);text-align:start;vertical-align:top}
.tbl{border-collapse:separate;border-spacing:0}
.tbl thead th{position:relative;padding-block:13px;background:linear-gradient(180deg,var(--c-bg-tint),var(--c-primary-50));color:var(--c-primary-ink);font:650 var(--t-xs)/1.35 var(--f-display);letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--c-primary-100);vertical-align:bottom}
.lang[lang="ar"] .tbl thead th{text-transform:none;letter-spacing:0;font-size:var(--t-sm)}
.tbl tbody tr{transition:background-color .15s}
.tbl tbody tr:hover{background:var(--c-bg-soft)}
.tbl tbody th{font:600 var(--t-sm)/1.45 var(--f-display);color:var(--c-ink);letter-spacing:-.005em}
.lang[lang="ar"] .tbl tbody th{font-family:var(--f-body);font-weight:700}
.tbl tbody tr:last-child > *{border-bottom:0}
.tbl td{color:var(--c-text);line-height:1.55}
.tbl td.tc-num{white-space:nowrap;font-weight:600;color:var(--c-ink)}
.tbl th.tc-num,.tbl td.tc-num{text-align:end}
.tbl td.tc-num .tag{font-size:12px}
.tbl.tbl-kv tbody th{width:62%}
.tbl.tbl-kv td{font-weight:600;color:var(--c-ink)}
/* data bars for percentage columns */
.tbl th.tc-bar{width:46%}
.db{display:flex;align-items:center;gap:12px}
.db-v{flex:none;min-width:3.6em;font-weight:650;color:var(--c-ink);text-align:end}
.db-t{flex:1;display:block;height:10px;border-radius:4px;background:var(--v-track)}
.db-b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--c-primary-300),var(--v-blue))}
[dir="rtl"] .db-b{background:linear-gradient(270deg,var(--c-primary-300),var(--v-blue))}


/* numbered steps and links to guides */
.tc-step{display:flex;align-items:flex-start;gap:10px}
.tc-n{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:7px;background:var(--g-primary);color:#fff;font:500 12px/1 var(--f-mono)}
a.tc-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);background:var(--c-primary-50);border:1px solid var(--c-primary-100);color:var(--c-primary-ink);font:600 var(--t-xs)/1.2 var(--f-display);text-decoration:none;white-space:nowrap}
a.tc-btn::after{content:"→";font-weight:500}
[dir="rtl"] a.tc-btn::after{content:"←"}
a.tc-btn:hover{background:var(--c-primary-100);color:var(--c-primary)}
/* two-column comparisons (empty corner cell) */
.tbl-cmp thead th:nth-child(2){color:var(--c-primary-ink);box-shadow:inset 0 3px 0 var(--v-blue)}
.tbl-cmp thead th:nth-child(3){color:var(--c-accent-ink);background:linear-gradient(180deg,#effdf9,var(--c-accent-50));box-shadow:inset 0 3px 0 var(--v-mint);border-bottom-color:var(--c-accent-100)}
.tbl-cmp tbody td:nth-child(3){background:rgb(239 253 249 / .45)}
.tbl-cmp thead th:first-child{background:var(--c-surface)}
@media (max-width:719px){
  .table-wrap:not(.tw-kv){overflow:visible;border:0;background:none;box-shadow:none;border-radius:0}
  .table-wrap:not(.tw-kv) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap:not(.tw-kv) :is(table,tbody,tr,th,td){display:block;width:100%}
  .table-wrap:not(.tw-kv) tbody tr{margin-bottom:12px;border:1px solid var(--c-glass-border);border-radius:var(--r-lg);background:var(--c-surface)!important;box-shadow:var(--sh-1);overflow:hidden}
  .table-wrap:not(.tw-kv) tbody th{padding:12px 16px;background:linear-gradient(180deg,var(--c-bg-tint),var(--c-primary-50));border-bottom:1px solid var(--c-primary-100)}
  .table-wrap:not(.tw-kv) tbody td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:12px;padding:10px 16px;border-bottom:1px solid var(--c-line);text-align:start;white-space:normal}
  .table-wrap:not(.tw-kv) tbody td::before{content:attr(data-label);color:var(--c-subtle);font-size:var(--t-xs);font-weight:500;line-height:1.5}
  .table-wrap:not(.tw-kv) tbody td:last-child{border-bottom:0}
  .table-wrap:not(.tw-kv) .tbl-cmp tbody td:nth-child(3){background:rgb(239 253 249 / .55)}
  .tw-kv th,.tw-kv td{padding:11px 14px}
  .tbl.tbl-kv tbody th{width:auto}
  .tbl th.tc-bar{width:auto}
  .tw-kv .db-t{min-width:60px}
}
/* callouts */
.call{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s-2);margin-top:var(--s-3);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-2);border-radius:var(--r-lg);border:1px solid var(--c-line);background:var(--c-surface);box-shadow:var(--sh-1)}
[dir="rtl"] .call{padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3)}
.call-i{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-sky-50);color:var(--c-sky)}
.call-i .icon{width:20px;height:20px}
.call-l{font:650 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink);margin:0 0 4px!important}
.call-b > p{margin:0}
.call-b > p + p{margin-top:2px}
.call-tip{border-color:var(--c-accent-100);background:linear-gradient(180deg,var(--c-accent-50),var(--c-surface))} .call-tip .call-i{background:var(--c-accent-100);color:var(--c-accent-ink)}
.call-warn{border-color:#ecd5c4;background:linear-gradient(180deg,var(--c-amber-50),var(--c-surface))} .call-warn .call-i{background:#f3e3d7;color:var(--c-amber)}
.call-law{border-color:var(--c-primary-100);background:linear-gradient(180deg,var(--c-primary-50),var(--c-surface))} .call-law .call-i{background:var(--c-primary-100);color:var(--c-primary)}
.call-new{border-color:#ead9cc;background:linear-gradient(180deg,var(--c-violet-50),var(--c-surface))} .call-new .call-i{background:#efe2d7;color:var(--c-violet)}
.call-ex{position:relative;overflow:hidden;background:var(--c-bg-soft);border:1px dashed var(--c-primary-200);box-shadow:none}
.call-ex::before{content:"";position:absolute;inset:0;background:var(--g-grid);opacity:.7;pointer-events:none}
.call-ex > *{position:relative}
.call-ex .call-i{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-1)}
.call-ex .call-l{color:var(--c-primary);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
/* model letters */
.letter{margin:var(--s-2) 0 0;padding:var(--s-3);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);border-inline-start:4px solid var(--c-primary-300);box-shadow:var(--sh-1);font-size:var(--t-sm)}
.prose .letter p{margin-top:6px}
.prose .letter p:first-child{margin-top:0}
/* key figures */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:var(--s-3)}
.fig{position:relative;padding:var(--s-3) var(--s-2) var(--s-2);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-glass-strong),var(--c-glass));border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
.fig::before{content:"";position:absolute;inset-inline:var(--s-2);top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));opacity:.9}
.fig dt{color:var(--c-text);font-size:var(--t-sm);font-weight:500;line-height:1.4}
.fig dd{margin-top:6px}
.fig-v{display:block;font:650 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.2 var(--f-display);letter-spacing:-.025em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.fig-n{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--c-subtle);line-height:1.45}
/* questions */
details.qa{margin-top:10px;border-radius:var(--r-md);border:1px solid var(--c-line);background:var(--c-surface);box-shadow:var(--sh-1);transition:border-color .2s, box-shadow .2s}
details.qa[open]{border-color:var(--c-primary-200);box-shadow:var(--sh-2)}
details.qa > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:14px var(--s-3);cursor:pointer;list-style:none;font:600 var(--t-base)/1.4 var(--f-display);color:var(--c-ink);letter-spacing:-.01em;border-radius:var(--r-md)}
details.qa > summary::-webkit-details-marker{display:none}
.qa-chev{width:20px;height:20px;color:var(--c-primary);transition:transform .3s var(--ease)}
details.qa[open] .qa-chev{transform:rotate(180deg)}
.qa-a{padding:0 var(--s-3) var(--s-2);max-width:68ch}
.qa-a > :first-child{margin-top:0}
.go{margin-top:var(--s-2)}
.go + .go{margin-top:10px}
.go .btn{white-space:normal;text-align:start}

/* ------------------------------------------------ home */
.page-home .prose{padding-top:var(--s-6)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-3)}
.sec-head h2{font-size:var(--t-3xl);letter-spacing:-.03em;line-height:1.12;max-width:22ch}
.sec-head p{max-width:46ch;color:var(--c-muted);margin:0}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r-xl);background:var(--c-surface);border:1px solid var(--c-glass-border);
  box-shadow:var(--sh-2);color:var(--c-ink);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.tile:hover{color:var(--c-ink);transform:translateY(-4px);box-shadow:var(--sh-3)}
.tile-art{display:block;padding:10px 14px 0;border-bottom:1px solid var(--c-line);
  background:radial-gradient(120% 90% at 100% 0%, var(--c-primary-50), transparent 60%), radial-gradient(90% 80% at 0% 100%, var(--c-accent-50), transparent 60%), #fff}
.tile-art .ill{aspect-ratio:4 / 3;max-height:170px;margin-inline:auto}
.tile-b{display:flex;flex:1;flex-direction:column;gap:6px;padding:14px 16px 14px}
.tile-h{display:flex;align-items:center;gap:10px}
.tile-h .tile-i{width:34px;height:34px;border-radius:10px}
.tile-h .tile-i .icon{width:17px;height:17px}
.tile-t{font:650 var(--t-base)/1.25 var(--f-display);letter-spacing:-.015em}
.tile-d{font-size:var(--t-xs);line-height:1.5;color:var(--c-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tile-m{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.tile-m .arr{margin-inline-start:auto;color:var(--c-primary);transition:transform .2s var(--ease)}
.tile:hover .tile-m .arr{transform:translateX(4px)}
[dir="rtl"] .tile:hover .tile-m .arr{transform:scaleX(-1) translateX(4px)}
@media (max-width:1023px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* key figures under the hero */
.stat-band{position:relative;z-index:2;margin-top:calc(-1 * var(--s-8))}
.stat-band .figs{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat-band .fig{background:var(--c-glass-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:1023px){ .stat-band .figs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.page-home .tiles-s{margin-top:var(--s-8)}
.quick-check{position:relative;overflow:hidden;margin-top:var(--s-8);padding:var(--s-4);border-radius:var(--r-xl);background:var(--g-quick);border:1px solid var(--c-primary-100);box-shadow:var(--sh-2)}
.quick-check::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgb(34 196 160 / .18),transparent 65%);pointer-events:none}
.qc-h{display:flex;align-items:center;gap:12px;font-size:var(--t-2xl)}
.qc-h .icon{width:28px;height:28px;padding:6px;border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-1);box-sizing:content-box}
.quick-check > p{max-width:70ch;color:var(--c-muted);margin-top:10px}
.page-home .sec{margin-top:var(--s-10)}
.page-home .sec > h2{font-size:var(--t-3xl);letter-spacing:-.03em;margin-bottom:var(--s-2)}
.page-home .sec > ul:not(.cards){list-style:none;padding:22px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:34px 16px}
.page-home .sec > ul:not(.cards) > li{position:relative}
.page-home .sec > ul:not(.cards) > li::before{content:"";position:absolute;top:-18px;inset-inline:0;height:2px;background:linear-gradient(90deg,var(--c-primary-200),var(--c-accent-100))}
.page-home .sec > ul:not(.cards) > li::after{content:"";position:absolute;top:-24px;inset-inline-start:22px;width:14px;height:14px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--c-accent-100)}
.page-home .sec > ul:not(.cards) > li{margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-1);font-size:var(--t-sm)}
.page-home .sec > ul:not(.cards) > li strong:first-child{display:table;margin-bottom:8px;padding:4px 11px;border-radius:var(--r-pill);background:var(--c-primary-50);box-shadow:inset 0 0 0 1px var(--c-primary-100);font:650 var(--t-xs)/1.3 var(--f-display);color:var(--c-primary-ink)}
/* the last home section is a call-to-action band */
.page-home .sec:last-child{position:relative;isolation:isolate;overflow:hidden;padding:var(--s-6) var(--s-5);border-radius:var(--r-xl);background:var(--g-primary);color:#e6f3f1;box-shadow:var(--sh-3)}
.page-home .sec:last-child::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:linear-gradient(rgb(255 255 255 / .09) 1px,transparent 1px) 0 0 / 32px 32px,linear-gradient(90deg,rgb(255 255 255 / .09) 1px,transparent 1px) 0 0 / 32px 32px}
.page-home .sec:last-child::after{content:"";position:absolute;z-index:-1;inset-inline-end:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgb(44 219 180 / .45),transparent 65%)}
.page-home .sec:last-child > h2{color:#fff}
.page-home .sec:last-child > p:not(.go){max-width:72ch;color:#d7ebe7}
.page-home .sec:last-child .btn-soft{background:#fff;color:var(--c-primary-ink);border-color:transparent;box-shadow:0 8px 20px -10px rgb(0 0 0 / .35)}
.page-home .sec:last-child .btn-soft:hover{background:var(--c-accent-50);color:var(--c-primary-ink)}
.page-home .sec .go{display:inline-block;margin:var(--s-2) 10px 0 0}
[dir="rtl"] .page-home .sec .go{margin:var(--s-2) 0 0 10px}
/* guide cards */
.cards-g{margin-top:var(--s-4)}
.cards-h{margin-top:0;font:600 12px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle);margin-bottom:12px}
.cards{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.cards li{margin:0!important;padding:0!important}
.card{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:var(--s-3);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-glass-strong),var(--c-glass));
  border:1px solid var(--c-glass-border);box-shadow:var(--sh-2);color:var(--c-text);text-decoration:none;transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.card:hover{color:var(--c-text);transform:translateY(-4px);box-shadow:var(--sh-3)}
.card .tile-i{margin-bottom:6px}
.card-t{font:650 var(--t-lg)/1.3 var(--f-display);letter-spacing:-.02em;color:var(--c-ink)}
.card-d{font-size:var(--t-sm);line-height:1.55;color:var(--c-muted)}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:var(--s-2)}
.card-go{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;color:var(--c-primary);font:600 var(--t-sm)/1 var(--f-display)}
.card:hover .arr{transform:translateX(4px)}
[dir="rtl"] .card:hover .arr{transform:scaleX(-1) translateX(4px)}

/* ------------------------------------------------ phones: denser blocks */
@media (max-width:719px){
  .glance{margin-top:calc(-1 * var(--s-3))}
  .facts{position:relative;gap:0;padding:4px var(--s-2);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
  .facts::before{content:"";position:absolute;inset-inline:var(--s-2);top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}
  .fact{padding:12px 0;border:0;border-radius:0;box-shadow:none;background:none}
  .fact + .fact{border-top:1px solid var(--c-line)}
  .fact::before{display:none}
  .glass-chip{display:none}
  .hero-cta .btn{flex:1 1 auto}
  .quick-check,.calc,.qb{padding:var(--s-3) var(--s-2)}
  .qc-h{font-size:var(--t-xl)}
  .tiles{gap:10px}
  .tile{border-radius:var(--r-lg)}
  .tile-art{padding:6px 8px 0}
  .tile-b{padding:10px 12px 12px}
  .tile-h .tile-i{display:none}
  .tile-t{font-size:var(--t-sm)}
  .tile-d,.tile-m .arr{display:none}
  .tile-m .tag{font-size:10.5px}
  .stat-band{margin-top:calc(-1 * var(--s-6))}
  .stat-band .figs{gap:10px}
  .stat-band .fig{padding:var(--s-2) 12px 12px}
  .page-home .sec:last-child{padding:var(--s-4) var(--s-3)}
  .cards{gap:10px}
  .card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .card .tile-i{grid-row:1 / span 3;margin:0}
  .card-t{font-size:var(--t-base);align-self:center}
  .card-meta{padding-top:6px}
  .call{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px}
  .call-i{width:34px;height:34px}
  ol.steps > li{padding:12px 16px 12px 62px}
  [dir="rtl"] ol.steps > li{padding:12px 62px 12px 16px}
  ol.steps > li::before{inset-inline-start:12px;width:36px;height:36px}
  .page-home .sec{margin-top:var(--s-8)}
}

/* ------------------------------------------------ checkboxes (finder) */
.finder{margin-top:var(--s-3)}
.boxes{border:0;padding:0;margin:0 0 var(--s-3);min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.boxes legend{float:inline-start;grid-column:1 / -1;width:100%;padding:0 0 4px;font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle)}
.boxes legend + *{clear:both}
.box{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--c-line);background:var(--c-surface);cursor:pointer;line-height:1.4;
  font-size:var(--t-sm);color:var(--c-ink);transition:border-color .2s, background-color .2s, box-shadow .2s}
.box:hover{border-color:var(--c-primary-300)}
.box input{position:absolute;opacity:0;width:1px;height:1px}
.box-x{flex:none;position:relative;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid var(--c-line-strong);background:var(--c-surface);transition:background-color .15s, border-color .15s}
.box input:checked + .box-x{background:var(--c-primary);border-color:var(--c-primary)}
.box input:checked + .box-x::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.3px 2.3px 0;transform:rotate(45deg)}
.box:has(input:checked){border-color:var(--c-primary-300);background:var(--c-primary-50);box-shadow:var(--sh-1)}
.box:has(input:focus-visible){box-shadow:var(--ring)}
.finder-out{margin-top:6px}
.finder-empty{padding:var(--s-2) var(--s-3);border-radius:var(--r-md);border:1px dashed var(--c-primary-200);background:var(--c-glass-strong);color:var(--c-muted);font-size:var(--t-sm)}
.finder-count{font:650 var(--t-base)/1.3 var(--f-display);color:var(--c-ink)}
.level-h{display:flex;align-items:center;gap:8px;margin-top:var(--s-3);font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.level-h::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.level-law{color:var(--c-danger)} .level-contract{color:var(--c-amber)} .level-strong{color:var(--c-accent-ink)} .level-consider{color:var(--c-subtle)}
.fr-list{list-style:none;padding:0!important;margin-top:8px!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.fr{margin:0!important;padding:14px 16px!important;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line);border-inline-start:4px solid var(--c-line-strong);box-shadow:var(--sh-1)}
.fr-law{border-inline-start-color:var(--c-danger)} .fr-contract{border-inline-start-color:#c8783a} .fr-strong{border-inline-start-color:var(--c-accent)} .fr-consider{border-inline-start-color:var(--c-primary-200)}
.fr-t{font:650 var(--t-sm)/1.35 var(--f-display);color:var(--c-ink);text-decoration:none}
.fr-t:hover{color:var(--c-primary)}
.fr-w{margin-top:4px!important;font-size:var(--t-xs);color:var(--c-muted);line-height:1.5}
.finder-full{display:grid;gap:var(--s-2) var(--s-5);margin-top:var(--s-4)}
@media (min-width:1100px){ .finder-full{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .finder-res{position:sticky;top:calc(var(--topbar-h) + 18px);max-height:calc(100vh - var(--topbar-h) - 36px);overflow:auto} }
.finder-res{scroll-margin-top:calc(var(--topbar-h) + 14px);padding:var(--s-3);border-radius:var(--r-xl);background:var(--g-quick);border:1px solid var(--c-primary-100);box-shadow:var(--sh-2)}
.finder-h{font-size:var(--t-xl);margin-bottom:4px}
.finder-res .fr-list{grid-template-columns:1fr}
.finder-jump-wrap{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;margin-top:14px;display:flex;justify-content:center;pointer-events:none}
.finder-jump{pointer-events:auto;box-shadow:var(--sh-3)}
@media (min-width:1100px){ .finder-jump-wrap{display:none} }

/* ------------------------------------------------ forms, calculators */
.fld{display:grid;gap:6px;margin-bottom:14px}
.fld label{font:600 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.fld input[type="number"],.fld input[type="search"],.fld input[type="text"],.fld input[type="date"],.fld select{width:100%;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);
  border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-ink);transition:border-color .2s, box-shadow .2s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--c-primary);box-shadow:var(--sh-glow)}
.fld .hint{font-size:var(--t-xs);color:var(--c-subtle);line-height:1.45}
.fld-check .box{border:0;padding:4px 0;background:transparent;box-shadow:none}
.fld-check .box:has(input:checked){background:transparent;box-shadow:none}
.calc{margin-top:var(--s-3);padding:var(--s-4);border-radius:var(--r-xl);background:linear-gradient(170deg,var(--c-glass-strong),var(--c-surface) 40%,var(--c-primary-50));border:1px solid var(--c-glass-border);box-shadow:var(--sh-3)}
.calc-h{font-size:var(--t-xl);margin-top:0}
.calc-d{margin-top:6px;color:var(--c-muted);max-width:60ch}
.calc-grid{display:grid;gap:var(--s-3);margin-top:var(--s-3)}
@media (min-width:720px){ .calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }
.calc-out{padding:var(--s-3);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-2);font-variant-numeric:tabular-nums}
.out-l{color:var(--c-muted);font-size:var(--t-sm)}
.out-v{margin:4px 0 10px;font:500 clamp(2rem,1.6rem + 1.6vw,2.8rem)/1.05 var(--f-mono);letter-spacing:-.05em;color:var(--c-ink)}
.out-rows{list-style:none;padding:0!important;margin:0!important;display:grid;gap:6px}
.out-rows li{margin:0!important;padding:10px 12px!important;display:flex;justify-content:space-between;gap:16px;border-radius:var(--r-sm);background:var(--c-bg-soft);font-size:var(--t-sm)}
.out-rows b{font:500 var(--t-sm)/1.3 var(--f-mono);color:var(--c-ink);white-space:nowrap}
.out-n{margin-top:12px!important;font-size:var(--t-xs);color:var(--c-muted);line-height:1.55}
.calc-note{margin-top:var(--s-2)!important;font-size:var(--t-xs);color:var(--c-subtle);line-height:1.55}

/* ------------------------------------------------ quote request builder */
.qb{margin-top:var(--s-3);padding:var(--s-4);border-radius:var(--r-xl);background:linear-gradient(170deg,var(--c-glass-strong),var(--c-surface) 40%,var(--c-accent-50));border:1px solid var(--c-glass-border);box-shadow:var(--sh-3)}
.qb-kinds{border:0;padding:0;margin:0 0 var(--s-3);min-width:0}
.qb-kinds legend,.qb-common legend{padding:0;font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle)}
.qk-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;padding:4px;border-radius:var(--r-lg);background:var(--c-bg-tint);border:1px solid var(--c-line)}
.qk{position:relative;cursor:pointer}
.qk input{position:absolute;opacity:0;width:1px;height:1px}
.qk span{display:inline-block;padding:9px 16px;border-radius:var(--r-pill);font:600 var(--t-sm)/1 var(--f-display);color:var(--c-muted);transition:background-color .2s, color .2s}
.qk input:checked + span{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-1)}
.qk input:focus-visible + span{box-shadow:var(--ring)}
.qb-grid{display:grid;gap:var(--s-3)}
@media (min-width:920px){ .qb-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start} .qb-out{position:sticky;top:calc(var(--topbar-h) + 16px)} }
.qb-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:0 14px;align-items:end}
.qb-out select{width:100%;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-ink)}
.qb-wide{grid-column:1/-1}
.qb-checks{border:0;padding:0;margin:0 0 14px;min-width:0}
.qb-checks legend{font:600 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink);padding:0 0 8px}
.qb-boxes{display:flex;flex-wrap:wrap;gap:8px}
.qb-boxes .box{padding:8px 12px;border-radius:var(--r-pill)}
.qb-common{border:0;border-top:1px solid var(--c-line);padding:var(--s-2) 0 0;margin:8px 0 0;min-width:0}
.qb-common legend{float:inline-start;width:100%;padding-bottom:10px}
.qb-common legend + *{clear:both}
.qb-hint{font-size:var(--t-xs);color:var(--c-subtle);line-height:1.55}
.qb-out{padding:var(--s-3);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-2);min-width:0}
.qb-out-l{display:block;margin-top:6px;font:600 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.qb-text{display:block;width:100%;min-height:24rem;margin-top:8px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--c-line);background:var(--c-bg-soft);color:var(--c-ink);font:400 var(--t-sm)/1.65 var(--f-body);resize:vertical}
.qb-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.prose .qb-status{margin-top:10px;font-size:var(--t-sm);color:var(--c-accent-ink);min-height:1.4em}
.dir-q{font-weight:600}

/* ------------------------------------------------ directory and glossary */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.chip{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font:500 var(--t-sm)/1.2 var(--f-body);cursor:pointer;transition:border-color .2s, color .2s}
.chip:hover{border-color:var(--c-primary-300);color:var(--c-primary)}
.chip[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.dir-list{list-style:none;padding:0!important;margin-top:var(--s-3)!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.dir-card{margin:0!important;padding:var(--s-3)!important;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:6px}
.dir-card p{margin:0!important}
.dir-type{font:600 11px/1.3 var(--f-display);letter-spacing:.07em;text-transform:uppercase;color:var(--c-primary)}
.dir-n{font-size:var(--t-lg);margin:0}
.dir-g{font-size:var(--t-xs);color:var(--c-subtle)}
.dir-d{font-size:var(--t-sm);color:var(--c-muted);line-height:1.55}
.prose .dir-card .dir-c{margin-top:auto!important;padding-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--t-sm)}
.tel{font-family:var(--f-mono);font-size:var(--t-xs)}
.dir-none,.gl-none{margin-top:var(--s-2);color:var(--c-muted)}
.gl-filter{max-width:28rem;margin-top:var(--s-3)}
.gl-filter input{border-radius:var(--r-pill)!important;padding-inline:16px!important}
.gl-list{margin-top:var(--s-2)!important;padding:var(--s-1) var(--s-3);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-1)}
.gl-item{padding:14px 0;border-top:1px solid var(--c-line)}
.gl-item:first-child{border-top:0}
.gl-item dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.gl-main{font:650 var(--t-base)/1.3 var(--f-display);color:var(--c-ink)}
.gl-alts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-sm);color:var(--c-muted)}
.gl-alt abbr{font:500 10.5px/1.4 var(--f-mono);color:var(--c-primary);background:var(--c-primary-50);border-radius:5px;padding:1px 5px;text-decoration:none}
.gl-item dd{margin-top:4px!important;color:var(--c-muted);font-size:var(--t-sm);line-height:1.55}
.gl-main[lang="ar"],.gl-alt[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--f-body)}

/* ------------------------------------------------ related guides */
.page-foot{margin-top:var(--s-8);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.foot-h{font-size:var(--t-xl);margin-bottom:var(--s-2)}
.rel-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.rel-card{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-1);
  color:var(--c-ink);text-decoration:none;font:600 var(--t-sm)/1.3 var(--f-display);transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.rel-card:hover{color:var(--c-ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.rel-card .tile-i{width:38px;height:38px}
.rel-card .tile-i .icon{width:19px;height:19px}
.rel-t{flex:1;min-width:0}
.rel-card .arr{color:var(--c-primary)}

/* ------------------------------------------------ footer */
.site-foot{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--s-6);background:var(--c-bg-soft);border-top:1px solid var(--c-line);font-size:var(--t-sm)}
.site-foot::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-grid);-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.site-foot-in{max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);padding-block:var(--s-8) 0}
.sf-top{display:grid;gap:var(--s-5);padding-bottom:var(--s-5)}
.sf-brand p{margin-top:var(--s-2);color:var(--c-muted);max-width:46ch}
.sf-brand .sf-note{font-size:var(--t-xs)}
.sf-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:var(--s-4)}
.sf-h{margin-bottom:12px;font:650 var(--t-sm)/1 var(--f-display);color:var(--c-ink)}
.sf-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sf-cols a{color:var(--c-muted);text-decoration:none}
.sf-cols a:hover{color:var(--c-primary)}
.sf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);padding-block:var(--s-3);border-top:1px solid var(--c-line);color:var(--c-subtle);font-size:var(--t-xs)}
.sf-bottom p{margin:0}
.sf-bottom a{color:var(--c-muted)}
@media (min-width:1024px){ .sf-top{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:var(--s-8)} .sf-cols{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ------------------------------------------------ language chooser (root of the hosted site) and 404 */
.chooser-body{min-height:100vh;background:var(--g-wash), var(--c-bg)}
.chooser{max-width:62rem;margin-inline:auto;padding-inline:var(--gutter);padding-block:var(--s-5) var(--s-8);display:grid;gap:var(--s-3);justify-items:center;text-align:center}
.chooser-logo .brand-mark{width:56px;height:56px}
.chooser-art{width:min(100%,480px)}
.chooser-h{font-size:clamp(1.3rem,1rem + 1.5vw,2rem);display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:center}
.picks{display:grid;gap:14px;width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.pick{display:grid;gap:6px;align-content:start;padding:var(--s-3);border-radius:var(--r-lg);text-align:start;background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2);color:var(--c-text);text-decoration:none;transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.pick:hover{transform:translateY(-3px);box-shadow:var(--sh-3);color:var(--c-text)}
.pick-l{font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary)}
.pick[lang="ar"] .pick-l{letter-spacing:0;font-size:13px}
.pick-t{font:650 var(--t-lg)/1.3 var(--f-display);color:var(--c-ink)}
.pick-d{font-size:var(--t-sm);color:var(--c-muted);line-height:1.5}
.chooser-f{font-size:var(--t-xs);color:var(--c-subtle)}
.chooser-f a,.foot-ai a{color:var(--c-muted)}
.foot-ai{color:var(--c-subtle)}

/* ------------------------------------------------ Arabic */
html[lang="ar"],.lang[lang="ar"]{--f-display:"IBM Plex Sans Arabic","Sora",ui-sans-serif,system-ui,sans-serif;--f-body:"IBM Plex Sans Arabic","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif}
.lang[lang="ar"]{font-size:1.04rem;line-height:1.95}
.lang[lang="ar"] :is(h1,h2,h3){letter-spacing:0;line-height:1.5;font-weight:700}
.lang[lang="ar"] .page-head h1{line-height:1.35}
.lang[lang="ar"] em{font-style:normal;font-weight:600}
.lang[lang="ar"] :is(.fact dt,.toc-h,.nav-h,.cards-h,.boxes legend,.level-h,.dir-type,.sr-p,.qb-kinds legend,.qb-common legend,.call-ex .call-l){letter-spacing:0;text-transform:none;font-size:12.5px}
.lang[lang="ar"] .fig-v,.lang[lang="ar"] .out-v{line-height:1.4}
html[lang="ar"] .brand-name{letter-spacing:0;line-height:1.4}

@media (prefers-reduced-motion: reduce){
  html,html.smooth{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
  .btn:hover,.card:hover,.tile:hover,.rel-card:hover,.pick:hover{transform:none}
}

/* ------------------------------------------------ blueprint illustrations (symbols in a sprite, drawn with <use>) */
@property --draw { syntax: "<number>"; inherits: true; initial-value: 0; }
.ill{display:block;width:100%;height:auto;overflow:visible;--draw:0;transition:--draw 1.9s var(--ease)}
.ill.ill-pre{--draw:1;transition:none}
[dir="rtl"] .ill-flip{transform:scaleX(-1)}
.m-grid path{fill:none;stroke:var(--c-primary-100);stroke-width:1;opacity:.75}
.m-s{fill:none;stroke:var(--c-primary);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.m-s[pathLength]{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0, (1 - var(--draw)) * 1.7 - var(--o, 0) * .7, 1))}
.m-f{fill:var(--c-primary-50)}
.m-w{fill:#fff}
.m-m{fill:var(--c-accent-50)}
.m-g{fill:#f8ede4;stroke:#a47454}
.m-b{fill:var(--c-accent);stroke:var(--c-accent)}
.m-wl{stroke:var(--c-primary-ink);stroke-width:3.4}
.m-a{stroke:#22c4a0}
.m-d{stroke:var(--c-primary-300);stroke-width:1.6}
.m-t{stroke:var(--c-primary-200);stroke-width:2.4}
.m-k{stroke-width:5}
.m-glass{fill:#fff;fill-opacity:.72}
.m-dash{stroke:var(--c-primary-300);stroke-width:1.8;stroke-dasharray:6 8}
.m-fill-m{fill:var(--c-accent);fill-opacity:.12}
.m-dot{fill:var(--c-accent);stroke:#fff;stroke-width:3}
.m-txt{fill:var(--c-primary);font-weight:700;font-size:58px}
.m-tl{font-family:var(--f-display)} .m-ta{font-family:"IBM Plex Sans Arabic",var(--f-body)}
.m-f,.m-w,.m-m,.m-g,.m-b,.m-fill-m,.m-dot,.m-txt,.m-dash{fill-opacity:clamp(0, (1 - var(--draw)) * 2 - .6, 1)}
.m-glass{fill-opacity:calc(clamp(0, (1 - var(--draw)) * 2 - .6, 1) * .72)}
.m-fill-m{fill-opacity:calc(clamp(0, (1 - var(--draw)) * 2 - .6, 1) * .12)}
.m-dash,.m-dot{opacity:clamp(0, (1 - var(--draw)) * 2 - .8, 1)}
.m-float{animation:m-bob 6s var(--ease) infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes m-bob{to{transform:translateY(-7px) rotate(-4deg)}}
@media (prefers-reduced-motion: reduce){ .ill{transition:none} .m-float{animation:none} }

/* ------------------------------------------------ figures: one frame, one chart vocabulary */
:root{
  --v-blue:#008a7c; --v-mint:#22c4a0; --v-amber:#c8783a; --v-violet:#8a4f1a; --v-slate:#a4c8c4; --v-lamber:#e9c4a3; --v-red:#d64545;
  --v-track:#edf5f3; --v-grid:#e3efec; --v-ink-on-light:#14302d;
}
.dg{container-type:inline-size;margin:var(--s-4) 0 0;padding:20px 22px 16px;border-radius:var(--r-xl);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
:where(.dg) :is(p,ul,ol,li){margin:0}
:where(.dg) :is(ul,ol){padding:0;list-style:none}
.dg-hd{display:flex;align-items:flex-start;gap:12px}
.dg-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--c-primary-50);color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary-100)}
.dg-ic .icon{width:19px;height:19px}
.dg-ht{flex:1;min-width:0;padding-top:1px}
.dg-t{font:650 1.06rem/1.35 var(--f-display);color:var(--c-ink);letter-spacing:-.015em;text-wrap:balance}
.lang[lang="ar"] .dg-t{letter-spacing:0;line-height:1.6}
.dg-sub{margin-top:3px!important;font-size:var(--t-sm);color:var(--c-muted)}
.dg-scale{flex:none;display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 10px 4px 8px;border-radius:var(--r-pill);background:var(--c-bg-tint);border:1px solid var(--c-line);font:600 11.5px/1 var(--f-display);color:var(--c-muted);white-space:nowrap}
.dg-scale .icon{width:14px;height:14px;color:var(--c-primary)}
.dg-b{margin-top:18px}
.dg-cap{display:flex;gap:8px;align-items:flex-start;margin-top:18px;padding-top:12px;border-top:1px solid var(--c-line);font-size:var(--t-xs);line-height:1.55;color:var(--c-muted)}
.dg-cap-i{flex:none;width:15px;height:15px;margin-top:1px;color:var(--c-subtle)}
.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dg-note{color:var(--c-subtle);font-size:.95em}
.dg-note2{margin-top:10px!important;font-size:var(--t-sm);color:var(--c-muted);line-height:1.5}
.dg-sub2{display:flex;align-items:center;gap:8px;margin:20px 0 4px!important;font:600 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.dg-sub2 .icon{width:17px;height:17px;color:var(--c-primary)}

/* colours: one validated order (blue, mint, amber, violet) plus neutral and status; text never wears them */
.c-blue{--c:var(--v-blue);--on:#fff} .c-mint{--c:var(--v-mint);--on:var(--v-ink-on-light)} .c-amber{--c:var(--v-amber);--on:var(--v-ink-on-light)}
.c-violet{--c:var(--v-violet);--on:#fff} .c-slate{--c:var(--v-slate);--on:var(--v-ink-on-light)} .c-lamber{--c:var(--v-lamber);--on:var(--v-ink-on-light)}
.c-red{--c:var(--v-red);--on:#fff}
.dg-leg{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px!important;font-size:var(--t-xs);color:var(--c-text);line-height:1.45}
.dg-leg li{display:flex;align-items:flex-start;gap:8px}
.dg-leg-col{display:grid;gap:7px}
.sw{flex:none;display:inline-block;width:12px;height:12px;margin-top:2px;border-radius:4px;background:var(--c, var(--c-line-strong))}
.dg-rn .sw{margin:0 5px -1px 0;vertical-align:baseline}
[dir="rtl"] .dg-rn .sw{margin:0 0 -1px 5px}
.sw.c-zone0{background:#eef3f2;box-shadow:inset 0 0 0 1px #cfdedb} .sw.c-zone1{background:#f8ede4;box-shadow:inset 0 0 0 1px #e2c3a6}
.sw.c-line{height:3px;width:16px;margin-top:7px;border-radius:2px;background:var(--v-mint)}
.sw.c-mint-o{background:rgb(34 196 160 / .18);box-shadow:inset 0 0 0 1.5px var(--v-mint)}
.sw.sw-in{width:16px;height:16px;border-radius:50%;background:var(--v-mint) center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");margin-top:0}
.sw.sw-add{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--v-mint);margin-top:0;position:relative}
.sw.sw-add::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:700 12px/1 var(--f-body);color:var(--c-accent-ink)}

/* segmented bar */
.sb{position:relative;display:flex;gap:2px;height:20px;min-width:0}
.sb-tall{height:28px}
.sb-p{position:relative;display:flex;align-items:center;min-width:3px;flex-basis:0;border-radius:4px;background:var(--c);color:var(--on);outline:none;transition:filter .15s}
.sb-p:hover,.sb-p:focus-visible{filter:brightness(1.06) saturate(1.1);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.sb-rest{flex-basis:0;border-radius:4px;background:var(--v-track)}
.sb-l{padding-inline:8px;font:600 11.5px/1 var(--f-body);white-space:nowrap;font-variant-numeric:tabular-nums}
.sb-ic{display:grid;place-items:center;padding-inline:7px}
.sb-ic .icon{width:15px;height:15px}
.sb-p.w-s .sb-l{display:none}
@container (max-width:520px){ .sb-p.w-m .sb-l{display:none} }
.sb-mark{position:absolute;top:-6px;bottom:-6px;width:0;border-inline-start:2px solid var(--c-ink);margin-inline-start:-1px;pointer-events:none}
.dg-mk-sw{display:inline-block;width:2px;height:13px;margin-inline-end:7px;vertical-align:-2px;background:var(--c-ink);border-radius:1px}
/* brackets over and under a bar */
.bks{position:relative;height:30px}
.bks-down{height:30px}
.bk{position:absolute;bottom:4px;height:10px;border:1.5px solid var(--c-primary-300);border-bottom:0;border-radius:6px 6px 0 0}
.bk > span{position:absolute;bottom:12px;inset-inline-start:0;font:600 var(--t-xs)/1.2 var(--f-display);color:var(--c-ink);white-space:nowrap}
.bks .bk:last-child > span{inset-inline-start:auto;inset-inline-end:0}
.bks-down .bk{top:4px;bottom:auto;border:1.5px solid var(--c-primary-300);border-top:0;border-radius:0 0 6px 6px}
.bks-down .bk > span{top:12px;bottom:auto;inset-inline-start:0;inset-inline-end:auto}
/* rows of bars on a common axis */
.dg-rows{display:grid;gap:16px}
.dg-row{display:grid;gap:7px;min-width:0}
.dg-rh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;font-size:var(--t-sm)}
.dg-rl{font:600 var(--t-sm)/1.35 var(--f-display);color:var(--c-ink)}
.dg-rv{color:var(--c-text);font-variant-numeric:tabular-nums}
.dg-rv b,.dg-rn b{color:var(--c-ink);font-weight:600}
.dg-rn{font-size:var(--t-xs);color:var(--c-muted);line-height:1.45}
.dg-ok{display:flex;gap:9px;align-items:flex-start;margin-top:14px!important;padding:10px 14px;border-radius:var(--r-md);background:var(--c-accent-50);border:1px solid var(--c-accent-100);font-size:var(--t-sm);color:var(--c-ink);line-height:1.45}
.dg-ok .icon{flex:none;width:18px;height:18px;color:var(--c-accent-ink);margin-top:1px}
.dg-marks{display:grid;gap:4px;margin-top:10px!important;font-size:var(--t-xs);color:var(--c-muted)}
.dg-marks li{display:flex;gap:8px;align-items:baseline}
.dg-marks li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-primary-300);transform:translateY(-1px)}

/* horizontal bars with the value at the tip */
.hb{--lab:minmax(0,36%)}
.hb-rows{display:grid;gap:12px}
.hb-r{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;gap:6px 16px}
.hb-l{font-size:var(--t-sm);color:var(--c-text);line-height:1.35}
.hb-t{position:relative;height:20px;background-image:linear-gradient(to right,var(--v-grid) 1px,transparent 1px);background-size:20% 100%}
.hb-rows-2 .hb-t{background:none;height:24px}
.hb-b{position:absolute;inset-block:0;inset-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px;background:var(--c);outline:none}
.hb-b:hover,.hb-b:focus-visible{filter:brightness(1.06) saturate(1.1);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.hb-v{position:absolute;top:50%;transform:translateY(-50%);margin-inline-start:8px;font:600 var(--t-xs)/1 var(--f-display);color:var(--c-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.hb-v-in{inset-inline-start:auto!important;inset-inline-end:10px;margin:0;color:var(--v-ink-on-light)}
.hb-refl{position:absolute;top:-6px;bottom:-6px;width:0;border-inline-start:1.5px dashed var(--c-ink);opacity:.55;pointer-events:none}
.hb-ax{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);gap:16px;margin-top:8px}
.hb-ticks{position:relative;height:16px;font:500 11px/1 var(--f-mono);color:var(--c-subtle)}
.hb-ticks > span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
[dir="rtl"] .hb-ticks > span{transform:translateX(50%)}
@container (max-width:520px){
  .hb-r{grid-template-columns:minmax(0,1fr)}
  .hb-ax{grid-template-columns:minmax(0,1fr)}
  .hb-sp{display:none}
  .hb-ticks > span:nth-child(even){display:none}
}

/* line and step charts */
.ch{margin-top:2px}
.ch-yt,.ch-xt{font-size:var(--t-xs);color:var(--c-muted);line-height:1.3}
.ch-yt{margin-bottom:10px!important}
.ch-xt{margin-top:6px!important;text-align:center}
.ch-box{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 22px;column-gap:10px}
.ch-y{position:relative;width:92px;font:500 11px/1 var(--f-mono);color:var(--c-subtle);text-align:end}
.ch-pension .ch-y{width:40px}
.ch-y span{position:absolute;inset-inline-end:0;transform:translateY(50%);white-space:nowrap}
.ch-plot{position:relative;height:230px;outline:none;touch-action:pan-y}
.ch-plot:focus-visible{box-shadow:var(--ring);border-radius:6px}
.ch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-grid{fill:none;stroke:var(--v-grid);stroke-width:1}
.ch-base{stroke:var(--c-line-strong)}
.ch-area{fill:var(--v-mint);fill-opacity:.1}
.ch-line{fill:none;stroke:var(--v-mint);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ch-mk{fill:none;stroke:var(--c-ink);stroke-width:1.5;stroke-dasharray:4 4;opacity:.55}
.ch-z0{fill:#eef3f2;opacity:.8}
.ch-z1{fill:#f8ede4;opacity:.85}
.ch-x{grid-column:2;position:relative;font:500 11px/1 var(--f-mono);color:var(--c-subtle)}
.ch-x span{position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap}
.ch-dot,.ch-hdot{position:absolute;width:12px;height:12px;margin:0 0 -6px -6px;border-radius:50%;background:var(--v-mint);box-shadow:0 0 0 2.5px #fff,0 1px 4px rgb(20 48 45 / .25);pointer-events:none}
.ch-dot{background:var(--c-ink)}
.ch-note{position:absolute;transform:translate(14px, -12px);display:grid;gap:1px;padding:8px 11px;border-radius:var(--r-sm);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-2);font-size:var(--t-xs);line-height:1.4;color:var(--c-text);white-space:nowrap;pointer-events:none}
.ch-note b{color:var(--c-ink);font-family:var(--f-display);font-weight:650}
.ch-note-sm{transform:translate(12px, calc(100% + 12px))}
.ch-zl{position:absolute;top:10px;display:grid;justify-items:center;color:var(--c-subtle);pointer-events:none}
.ch-zl .icon{width:18px;height:18px}
.ch-zl1{color:#a47454}
.ch-guide{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--c-ink);opacity:.35;pointer-events:none}
.ch-tip{position:absolute;z-index:3;bottom:100%;padding:7px 10px;border-radius:var(--r-sm);background:var(--c-ink);color:#fff;font:500 12px/1.4 var(--f-body);white-space:nowrap;pointer-events:none;box-shadow:var(--sh-2)}
.ch-plot.is-hover .ch-note{opacity:.25}
@container (max-width:520px){
  .ch-plot{height:190px}
  .ch-y{width:74px}
  .ch-loan .ch-y span{font-size:10px}
  .ch-x span:nth-child(3){display:none}
  .ch-note{transform:translate(12px, calc(100% + 10px))}
  .ch-note-sm{transform:translate(calc(-100% - 12px), calc(100% + 12px))}
}
@container (max-width:420px){
  .ch-note:not(.ch-note-sm){transform:translate(-50%, calc(100% + 10px));white-space:normal;width:132px}
}
.ln-two{margin-top:6px}

/* flow diagrams: cards and arrows */
.dg-node{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line-strong);box-shadow:var(--sh-1);line-height:1.35;min-width:0}
.dg-ni{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c-bg-tint);color:var(--c-primary)}
.dg-ni .icon{width:16px;height:16px}
.dg-nt{min-width:0}
.dg-nt b{display:block;font:600 var(--t-sm)/1.35 var(--f-display);color:var(--c-ink)}
.lang[lang="ar"] .dg-nt b{font-family:var(--f-body);font-weight:700}
.dg-ns{display:block;margin-top:1px;font-size:var(--t-xs);color:var(--c-muted)}
.n-you{background:var(--c-primary-50);border-color:var(--c-primary-200)} .n-you .dg-ni{background:#fff}
.n-ins,.n-fund{background:var(--c-accent-50);border-color:var(--c-accent-100)} .n-ins .dg-ni,.n-fund .dg-ni{background:#fff;color:var(--c-accent-ink)}
.n-paid{background:linear-gradient(90deg,var(--c-accent-50),#fff);border-color:var(--c-accent-100)} .n-paid .dg-ni{background:var(--v-mint);color:#fff}
.n-ev{background:var(--c-bg-tint)}
.n-order{background:var(--c-amber-50);border-color:#ecd5c4} .n-order .dg-ni{background:#fff;color:var(--c-amber)}
.n-op{border-style:dashed;box-shadow:none}
.cn-end,.as-end{font-weight:600}
.ar{position:relative;display:flex;align-items:center;min-height:36px;padding-inline-start:26px;font-size:var(--t-xs);line-height:1.3;color:var(--c-muted)}
.ar::before{content:"";position:absolute;inset-inline-start:11px;top:4px;bottom:9px;border-inline-start:2px solid var(--c-primary-300)}
.ar::after{content:"";position:absolute;inset-inline-start:6px;bottom:3px;width:12px;height:8px;background:var(--c-primary-300);clip-path:polygon(0 0,100% 0,50% 100%)}
.ar-l{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-bg-tint);border:1px solid var(--c-line);color:var(--c-text);white-space:normal}
.dg-band{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r-md);font-size:var(--t-sm);line-height:1.45;color:var(--c-text)}
.dg-band .icon{flex:none;width:18px;height:18px;margin-top:1px}
.dg-band strong{color:var(--c-ink)}
.dg-band-reg{margin-bottom:14px!important;background:var(--c-primary-50);border:1px dashed var(--c-primary-300)} .dg-band-reg .icon{color:var(--c-primary)}
.dg-band-med{margin-top:14px!important;background:var(--c-amber-50);border:1px dashed #dcb18f} .dg-band-med .icon{color:var(--c-amber)}
.dg-flow{display:flex;flex-direction:column}
.dg-link{display:flex;flex-wrap:wrap;gap:0 22px;padding-inline-start:4px}
.ar-back::before{top:9px;bottom:4px}
.ar-back::after{top:3px;bottom:auto;clip-path:polygon(50% 0,100% 100%,0 100%)}
/* horizontal arrows: under a label, pointing to the end (fwd) or the start (back) */
.dg-link .ar,.cid-h .ar,.tk-op .ar{display:block;min-height:0;text-align:center;padding:0 2px 14px}
.dg-link .ar::before,.cid-h .ar::before,.tk-op .ar::before{top:auto;bottom:6px;inset-inline:2px 6px;border-inline-start:0;border-top:2px solid var(--c-primary-300)}
.dg-link .ar::after,.cid-h .ar::after,.tk-op .ar::after{top:auto;bottom:2px;inset-inline-start:auto;inset-inline-end:0;width:8px;height:10px;clip-path:polygon(0 0,100% 50%,0 100%)}
[dir="rtl"] :is(.dg-link,.cid-h,.tk-op) .ar::after{clip-path:polygon(100% 0,0 50%,100% 100%)}
.dg-link .ar-back,.cid-h .ar-back{padding:14px 2px 0}
.dg-link .ar-back::before,.cid-h .ar-back::before{top:6px;bottom:auto;inset-inline:6px 2px}
.dg-link .ar-back::after,.cid-h .ar-back::after{top:2px;bottom:auto;inset-inline-start:0;inset-inline-end:auto;clip-path:polygon(100% 0,0 50%,100% 100%)}
[dir="rtl"] :is(.dg-link,.cid-h) .ar-back::after{clip-path:polygon(0 0,100% 50%,0 100%)}
.cid-h .ar-both::after{display:none}
.cid-h .ar-both::before{inset-inline:0}
.dg-link .ar-l,.cid-h .ar-l,.tk-op .ar-l{border:0;background:none;padding:0}
@container (max-width:559px){
  .dg-link .ar,.dg-link .ar-back{display:flex;min-height:36px;padding:0;padding-inline-start:26px;text-align:start}
  .dg-link .ar::before,.dg-link .ar-back::before{inset-inline:auto;inset-inline-start:11px;top:4px;bottom:9px;border-top:0;border-inline-start:2px solid var(--c-primary-300)}
  .dg-link .ar::after{inset-inline-start:6px;inset-inline-end:auto;bottom:3px;top:auto;width:12px;height:8px;clip-path:polygon(0 0,100% 0,50% 100%)!important}
  .dg-link .ar-back::before{top:9px;bottom:4px}
  .dg-link .ar-back::after{top:3px;bottom:auto;clip-path:polygon(50% 0,100% 100%,0 100%)!important}
  .dg-link .ar-l{border:1px solid var(--c-line);background:var(--c-bg-tint);padding:2px 8px}
}
@container (min-width:560px){
  .dg-flow{flex-direction:row;align-items:stretch}
  .dg-flow > .dg-node{flex:1 1 0;flex-direction:column;justify-content:center}
  .dg-link{flex:0 0 118px;flex-direction:column;justify-content:center;gap:12px;padding:0 6px}
}
/* collision: you, the other driver and both insurers */
.cid{display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,.8fr) minmax(0,1fr);align-items:center}
.cid > .dg-node{align-self:stretch;align-items:center}
.cid-h{padding-inline:8px}
.cid-v .ar{min-height:44px}
.cid-paid{grid-column:1 / -1;align-items:center}
@container (max-width:479px){ .cid{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)} .cid .dg-ni{display:none} .cid-h .ar-l{font-size:10.5px} }
/* complaint ladder */
.stairs{display:grid;gap:8px}
.st{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;padding:12px 14px;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--sh-1)}
.st-n{grid-row:1 / span 3;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--g-primary);color:#fff;font:500 var(--t-sm)/1 var(--f-mono)}
.st-h{font:650 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.st-d{font-size:var(--t-xs);color:var(--c-muted);line-height:1.45}
.st-c{justify-self:start;margin-top:5px;padding:3px 9px;border-radius:var(--r-pill);font:600 11px/1.3 var(--f-body)}
.st-free{color:var(--c-accent-ink);background:var(--c-accent-50);box-shadow:inset 0 0 0 1px var(--c-accent-100)}
.st-fee{color:var(--c-amber);background:var(--c-amber-50);box-shadow:inset 0 0 0 1px #ecd5c4}
@container (min-width:680px){
  .stairs{grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:8px}
  .st{grid-template-columns:minmax(0,1fr);align-content:start;min-height:calc(118px + var(--i) * 26px);padding:12px}
  .st-n{grid-row:auto;margin-bottom:8px}
}
/* unpaid premium timeline */
.tl{position:relative;padding-bottom:4px}
.tl-ticks{position:relative;height:30px}
.tl-tick{position:absolute;top:0;width:0;height:30px}
.tl-tick::before{content:"";position:absolute;top:-34px;bottom:auto;height:40px;inset-inline-start:-1px;border-inline-start:2px solid var(--c-ink)}
.tl-tick > span{position:absolute;top:12px;inset-inline-start:6px;font:600 var(--t-xs)/1 var(--f-display);color:var(--c-ink);white-space:nowrap}
.tl-tick:first-child::before{inset-inline-start:0}
.tl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin-top:14px!important}
.tl-c{display:grid;gap:4px;padding:10px 12px;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line);border-top:3px solid var(--c);font-size:var(--t-xs);line-height:1.45;color:var(--c-text)}
.tl-ok{--c:var(--v-mint)} .tl-warn{--c:var(--v-amber)} .tl-bad{--c:var(--v-red)}
.tl-d{font:650 var(--t-sm)/1.2 var(--f-display);color:var(--c-ink)}
@container (max-width:480px){ .tl-tick > span{font-size:11px} .tl-tick:nth-child(2) > span{display:none} }
/* liability scene */
.sc-wrap{border-radius:var(--r-lg);background:linear-gradient(180deg,var(--c-bg-soft),#fff);border:1px solid var(--c-line);padding:8px 6px 2px;overflow:hidden}
.sc{display:block;width:100%;height:auto}
.sc-n circle{stroke:#fff;stroke-width:3}
.sc-n text{font:700 15px var(--f-display);fill:#fff}
.sc-ok circle{fill:var(--v-mint)} .sc-ok text{fill:var(--v-ink-on-light)}
.sc-no circle{fill:var(--v-red)}
.sc-leg{display:grid;gap:12px;margin-top:14px}
@container (min-width:560px){ .sc-leg{grid-template-columns:1.2fr 1fr} }
.sc-col{padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--c-line)}
.sc-col-ok{background:var(--c-accent-50);border-color:var(--c-accent-100)} .sc-col-no{background:#fdf3f2;border-color:#f1d3d0}
.sc-h{display:flex;align-items:center;gap:7px;margin-bottom:8px!important;font:650 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.sc-h .icon{width:18px;height:18px} .sc-col-ok .sc-h .icon{color:var(--c-accent-ink)} .sc-col-no .sc-h .icon{color:var(--v-red)}
.sc-l{display:grid;gap:6px;font-size:var(--t-sm);line-height:1.4}
.sc-l li{display:flex;gap:9px;align-items:flex-start}
.sc-k{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12px/1 var(--f-display)}
.sc-k.sc-ok{background:var(--v-mint);color:var(--v-ink-on-light)} .sc-k.sc-no{background:var(--v-red);color:#fff}
/* car formulas matrix */
.fm-wrap{overflow-x:auto;margin-inline:-4px;padding:0 4px}
.fm{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.fm th,.fm td{padding:8px 10px;border-bottom:1px solid var(--c-line);text-align:center;vertical-align:middle}
.fm thead th{padding-top:4px;font:600 var(--t-xs)/1.3 var(--f-display);color:var(--c-ink);border-bottom:1.5px solid var(--c-line-strong);vertical-align:bottom;width:22%}
.fm-car{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 6px;border-radius:9px;background:var(--c-primary-50);color:var(--c-primary)}
.fm-car .icon{width:17px;height:17px}
.fm tbody th{text-align:start;font-weight:500;color:var(--c-text)}
.fm tbody tr:hover > *{background:var(--c-bg-soft)}
.fm tbody tr.fm-g-law > *{background:var(--c-primary-50);border-bottom-color:var(--c-primary-100)}
.fm tbody tr.fm-g-law th{font-weight:650;color:var(--c-ink)}
.fm tbody tr:last-child > *{border-bottom:0}
.fm-m{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%}
.fm-m .icon{width:14px;height:14px;stroke-width:3}
.fm-in{background:var(--v-mint);color:#fff}
.fm-add{background:#fff;box-shadow:inset 0 0 0 1.5px var(--v-mint);color:var(--c-accent-ink)}
.fm-no{width:8px;height:2px;border-radius:1px;background:var(--c-line-strong)}
.dg-leg-fm li{align-items:center}
/* catastrophic events */
.cn > .ar{margin-inline-start:4px}
.cn-split{display:grid;gap:12px;margin-top:12px}
@container (min-width:560px){ .cn-split{grid-template-columns:1fr 1fr} }
.cn-lane,.as-lane{display:grid;align-content:start;padding:12px 14px 14px;border-radius:var(--r-lg);border:1px solid var(--c-line)}
.cn-a,.as-ok{background:var(--c-accent-50);border-color:var(--c-accent-100)} .cn-b,.as-no{background:#faf4ef;border-color:#ecd5c4}
.cn-h{display:flex;align-items:center;gap:8px;font:650 var(--t-sm)/1.35 var(--f-display);color:var(--c-ink)}
.cn-h .icon{width:18px;height:18px} .cn-a .cn-h .icon{color:var(--c-accent-ink)} .cn-b .cn-h .icon{color:var(--c-amber)}
.cn-lane .ar,.as-lane .ar{margin-inline-start:4px}
.cn-bars{margin-top:22px;padding-top:16px;border-top:1px dashed var(--c-line)}
/* Takaful */
.tk{display:grid;gap:14px}
@container (min-width:780px){ .tk{grid-template-columns:1fr 1.2fr;align-items:start} }
.tk-p{container-type:inline-size;display:grid;padding:14px;border-radius:var(--r-lg);background:var(--c-bg-soft);border:1px solid var(--c-line)}
.tk-t{background:linear-gradient(180deg,var(--c-accent-50),#fff 70%);border-color:var(--c-accent-100)}
.tk-p > .ar{margin-inline-start:4px}
.tk-h{display:flex;align-items:center;gap:8px;margin-bottom:12px!important;font:650 var(--t-base)/1.3 var(--f-display);color:var(--c-ink)}
.tk-h .icon{width:18px;height:18px;color:var(--c-primary)}
.tk-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(70px,.7fr) minmax(0,1fr);align-items:center}
.tk-row > .dg-node{align-self:stretch}
.tk-op{padding-inline:6px}
.tk-chips{display:grid;gap:6px;margin-top:14px!important}
.tk-chips li{display:flex;align-items:flex-start;gap:8px;padding:7px 11px;border-radius:var(--r-sm);font-size:var(--t-xs);line-height:1.4}
.tk-chips .icon{flex:none;width:15px;height:15px;margin-top:1px}
.chip-no{background:#fff;border:1px solid var(--c-line-strong);color:var(--c-text)} .chip-no .icon{color:var(--c-subtle)}
.chip-ok{background:#fff;border:1px solid var(--c-accent-100);color:var(--c-ink)} .chip-ok .icon{color:var(--c-accent-ink)}
@container (max-width:459px){
  .tk-row{grid-template-columns:minmax(0,1fr)}
  .tk-op{padding:0}
  .tk-op .ar{display:flex;min-height:36px;padding:0;padding-inline-start:26px;text-align:start;margin-inline-start:4px}
  .tk-op .ar::before{inset-inline:auto;inset-inline-start:11px;top:4px;bottom:9px;border-top:0;border-inline-start:2px dashed var(--c-primary-300)}
  .tk-op .ar::after{inset-inline-start:6px;inset-inline-end:auto;bottom:3px;top:auto;width:12px;height:8px;clip-path:polygon(0 0,100% 0,50% 100%)!important}
  .tk-op .ar-l{border:1px solid var(--c-line);background:var(--c-bg-tint);padding:2px 8px}
}
/* life: protection and savings */
.lf{display:grid;gap:12px}
@container (min-width:540px){ .lf{grid-template-columns:1fr 1fr} }
.lf-p{padding:14px;border-radius:var(--r-lg);background:var(--c-bg-soft);border:1px solid var(--c-line)}
.lf-pic{padding:6px 0 2px}
.lf-svg{display:block;width:100%;height:auto}
.lf-g{stroke:var(--v-grid);stroke-width:1}
.lf-base{stroke:var(--c-line-strong);stroke-width:1.5}
.lf-prem{fill:var(--v-amber)}
.lf-cap{fill:rgb(34 196 160 / .18);stroke:var(--v-mint);stroke-width:1.5;stroke-dasharray:4 3}
.lf-dot{fill:var(--v-mint);stroke:#fff;stroke-width:2}
.lf-contr{fill:var(--v-blue)} .lf-ret{fill:var(--v-mint)}
/* travel assistance */
.as-split{display:grid;gap:12px;margin-top:12px}
@container (min-width:520px){ .as-split{grid-template-columns:1fr 1fr} }
.as-ok .as-end .dg-ni{background:var(--v-mint);color:#fff} .as-no .as-end .dg-ni{background:var(--v-red);color:#fff}

/* tooltip for bars (one element, placed by app.js) */
.vtip{position:fixed;z-index:90;max-width:min(320px,calc(100vw - 24px));padding:7px 10px;border-radius:var(--r-sm);background:var(--c-ink);color:#fff;font:500 12px/1.45 var(--f-body);box-shadow:var(--sh-2);pointer-events:none;transform:translate(-50%,calc(-100% - 10px))}
.vtip[hidden]{display:none}

/* ------------------------------------------------ photos (made with Kling): home hero, cover tiles, guide headers */
.art-card.art-photo{position:relative;padding:0;overflow:hidden;aspect-ratio:2368 / 1760;background:var(--c-primary-50)}
.art-photo img{display:block;width:100%;height:100%;object-fit:cover}
.art-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .4);pointer-events:none}
.tile-art.tile-photo{padding:0;aspect-ratio:16 / 10;overflow:hidden;background:var(--c-primary-50)}
.tile-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .tile-photo img{transform:scale(1.045)}
@media (max-width:719px){
  .ph-art.ph-photo{display:block}
  .page-head:not(.hero) .art-photo{aspect-ratio:16 / 9;border-radius:var(--r-lg)}
}
@media (prefers-reduced-motion: reduce){ .tile-photo img{transition:none} .tile:hover .tile-photo img{transform:none} }

/* liability figure: street scene seen from above */
.lc-wrap{padding:10px 8px 8px}
.lc-zones{display:grid;grid-template-columns:1fr 1fr;margin:0 0 8px;position:relative}
.lc-zones::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1px;background:var(--c-line-strong)}
.lc-z{display:flex;justify-content:center}
.lc-zt{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);box-shadow:var(--sh-1);font:600 12.5px/1.3 var(--f-display);color:var(--c-primary-ink);letter-spacing:.01em}
.lc-svg{border-radius:12px}
.lc-pin text{font-size:16px}
@media (max-width:560px){
  .lc-pin circle{r:24px}
  .lc-pin text{font-size:23px}
  .lc-zt{font-size:11.5px;padding:3px 10px}
}

/* soft background pattern (replaces the square grid): small line icons of what people insure */
:root{--g-grid:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%232f5a56' stroke-opacity='.085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(36 34) rotate(-8 12 12)'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></g><g transform='translate(196 22) rotate(7 12 12)'><path d='M22 12a10 10 0 0 0-20 0Z'/><path d='M12 12v7a2 2 0 0 0 4 0'/><path d='M12 2v1'/></g><g transform='translate(116 116) rotate(0 12 12)'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V20h14V9.5'/><path d='M10 20v-6h4v6'/></g><g transform='translate(262 128) rotate(-6 12 12)'><path d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z'/><path d='M12 9v6M9 12h6'/></g><g transform='translate(28 200) rotate(5 12 12)'><path d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/><circle cx='7' cy='17' r='2'/><path d='M9 17h6'/><circle cx='17' cy='17' r='2'/></g><g transform='translate(192 214) rotate(-10 12 12)'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></g><g transform='translate(108 268) rotate(12 12 12)'><circle cx='7.5' cy='15.5' r='4.5'/><path d='m21 2-9.6 9.6'/><path d='m15.5 7.5 3 3L22 7l-3-3'/></g><g transform='translate(270 270) rotate(-4 12 12)'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></g></g></svg>") 0 0 / 320px 320px}
.m-grid{display:none}
.page-home .sec:last-child::before{opacity:1;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(36 34) rotate(-8 12 12)'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></g><g transform='translate(196 22) rotate(7 12 12)'><path d='M22 12a10 10 0 0 0-20 0Z'/><path d='M12 12v7a2 2 0 0 0 4 0'/><path d='M12 2v1'/></g><g transform='translate(116 116) rotate(0 12 12)'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V20h14V9.5'/><path d='M10 20v-6h4v6'/></g><g transform='translate(262 128) rotate(-6 12 12)'><path d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z'/><path d='M12 9v6M9 12h6'/></g><g transform='translate(28 200) rotate(5 12 12)'><path d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/><circle cx='7' cy='17' r='2'/><path d='M9 17h6'/><circle cx='17' cy='17' r='2'/></g><g transform='translate(192 214) rotate(-10 12 12)'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></g><g transform='translate(108 268) rotate(12 12 12)'><circle cx='7.5' cy='15.5' r='4.5'/><path d='m21 2-9.6 9.6'/><path d='m15.5 7.5 3 3L22 7l-3-3'/></g><g transform='translate(270 270) rotate(-4 12 12)'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></g></g></svg>") 40px 20px / 320px 320px}

/* ------------------------------------------------ life moments on the home page */
.moments{margin-top:var(--s-8)}
.mo-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mo-list > li{min-width:0}
.mo{display:flex;flex-direction:column;height:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2);color:var(--c-ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mo:hover{color:var(--c-ink);transform:translateY(-4px);box-shadow:var(--sh-3)}
.mo-img{display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--c-primary-50)}
.mo-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mo:hover .mo-img img{transform:scale(1.045)}
.mo-b{display:flex;flex:1;flex-direction:column;gap:6px;padding:16px 18px 18px}
.mo-t{font:650 var(--t-lg)/1.25 var(--f-display);letter-spacing:-.015em}
[dir="rtl"] .mo-t{letter-spacing:0}
.mo-d{font-size:var(--t-sm);line-height:1.55;color:var(--c-muted)}
.mo-l{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;color:var(--c-primary);font:600 var(--t-sm)/1.25 var(--f-display)}
.mo-l .arr{width:16px;height:16px;transition:transform .2s var(--ease)}
.mo:hover .mo-l .arr{transform:translateX(3px)}
[dir="rtl"] .mo:hover .mo-l .arr{transform:scaleX(-1) translateX(3px)}
@media (max-width:1023px){ .mo-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:719px){
  .moments{margin-top:var(--s-6)}
  .mo-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
  .mo-list::-webkit-scrollbar{display:none}
  .mo-list > li{flex:0 0 80%;scroll-snap-align:start}
  .mo-b{padding:14px 16px 16px}
  .mo-t{font-size:var(--t-base)}
}

/* ------------------------------------------------ a captioned photo inside the guides */
.pf{margin:var(--s-6) 0 0;border-radius:var(--r-xl);overflow:hidden;background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
.pf img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:var(--c-primary-50)}
.pf figcaption{position:relative;padding:12px 18px 14px 34px;font-size:var(--t-sm);line-height:1.55;color:var(--c-muted);border-top:1px solid var(--c-line)}
.pf figcaption::before{content:"";position:absolute;inset-inline-start:16px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--c-accent)}
[dir="rtl"] .pf figcaption{padding:12px 34px 14px 18px}

/* ------------------------------------------------ gentle motion: things fade up as they come into view (app.js adds .rv) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.rv.rv-in{opacity:1;transform:none}
.rv .photo{transform:scale(1.06);transition:transform 1.6s var(--ease)}
.rv.rv-in .photo{transform:none}
.hero .art-photo img{animation:hero-drift 24s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){
  .rv,.rv .photo{opacity:1;transform:none;transition:none}
  .hero .art-photo img{animation:none}
}

/* ------------------------------------------------ "On this page": numbered steps, sections already read, reading time (app.js adds .is-done, .toc-meta, .toc-top) */
.toc ol{counter-reset:toc;position:relative}
.toc li{counter-increment:toc}
.toc-meta{display:block;margin:-4px 0 10px;font-size:var(--t-xs);line-height:1.4;color:var(--c-subtle)}
.toc-top{display:none}
/* phones and tablets: numbered chips, the section being read filled in */
.toc a{display:inline-flex;align-items:center;gap:7px}
.toc a::before{content:counter(toc);font:600 11px/1 var(--f-mono);color:var(--c-subtle)}
.toc a.is-done::before{color:var(--c-accent-ink)}
.toc a.is-active{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.toc a.is-active::before{color:var(--c-accent-300)}
@media (min-width:1100px){
  .page:not(.page-wide) > .toc{padding:20px 20px 14px;background:var(--c-surface);border-color:var(--c-glass-border);box-shadow:var(--sh-2)}
  .page:not(.page-wide) > .toc .toc-h{margin-bottom:8px;color:var(--c-primary)}
  .page:not(.page-wide) > .toc ol{gap:2px;padding:4px 2px 4px 5px;margin-inline-start:-5px}
  [dir="rtl"] .page:not(.page-wide) > .toc ol{padding:4px 5px 4px 2px}
  .page:not(.page-wide) > .toc li{position:relative}
  /* the line that joins the steps, and its filled part for the sections already read */
  .page:not(.page-wide) > .toc li:not(:last-child)::before,
  .page:not(.page-wide) > .toc li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:12px;top:36px;bottom:-5px;width:2px;border-radius:2px;background:var(--c-line)}
  .page:not(.page-wide) > .toc li:not(:last-child)::after{background:linear-gradient(var(--c-accent),var(--c-primary-300));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
  .page:not(.page-wide) > .toc li:has(> a.is-done)::after{transform:none}
  .page:not(.page-wide) > .toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:9px 8px 9px 0;border:0;border-radius:var(--r-xs);background:none;color:var(--c-muted);font-size:var(--t-sm);line-height:1.45;transition:color .2s var(--ease)}
  [dir="rtl"] .page:not(.page-wide) > .toc a{padding:9px 0 9px 8px}
  .page:not(.page-wide) > .toc a::before{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin-top:-2.5px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--c-line-strong);background:var(--c-surface);
    content:counter(toc,decimal-leading-zero);font:600 10.5px/1 var(--f-mono);color:var(--c-subtle);transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
  .page:not(.page-wide) > .toc a:hover{color:var(--c-primary)}
  .page:not(.page-wide) > .toc a:hover::before{border-color:var(--c-primary)}
  .page:not(.page-wide) > .toc a.is-done{color:var(--c-text)}
  .page:not(.page-wide) > .toc a.is-done::before{content:"";border-color:var(--c-accent);background:var(--c-accent-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat}
  .page:not(.page-wide) > .toc a.is-active{background:none;color:var(--c-ink);font-weight:600}
  .page:not(.page-wide) > .toc a.is-active::before{border-color:var(--c-primary);background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 0 0 4px rgb(44 219 180 / .22)}
  .page:not(.page-wide) > .toc .toc-top{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:12px 0 2px;border:0;border-top:1px solid var(--c-line);background:none;color:var(--c-primary);font:600 var(--t-xs)/1.2 var(--f-display);cursor:pointer;text-align:start}
  .toc-top .icon{width:15px;height:15px;transform:rotate(-90deg);transition:transform .2s var(--ease)}
  .toc-top:hover .icon{transform:rotate(-90deg) translateX(2px)}
  .toc-top:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
}
@media (prefers-reduced-motion: reduce){
  .page:not(.page-wide) > .toc li::after,.page:not(.page-wide) > .toc a::before{transition:none}
}

/* ------------------------------------------------ quick check on the home pages: picture cards to tick, a running count, results with counts per level */
.finder-quick .boxes{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.finder-quick .box{position:relative;flex-direction:column;align-items:flex-start;gap:12px;min-height:100%;padding:14px 14px 16px;border-radius:var(--r-lg);border:1.5px solid var(--c-glass-border);
  background:var(--c-surface);box-shadow:var(--sh-1);font:500 var(--t-sm)/1.4 var(--f-body);color:var(--c-ink);
  transition:transform .25s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),background-color .2s var(--ease)}
.finder-quick .box:hover{transform:translateY(-3px);border-color:var(--c-primary-300);box-shadow:var(--sh-2)}
.finder-quick .box-ic{display:block;width:64px;height:64px;border-radius:var(--r-md);overflow:hidden;background:#b9c8bd;box-shadow:inset 0 0 0 1px rgb(20 48 45 / .06);transition:transform .35s var(--ease)}
.finder-quick .box-ic img{display:block;width:100%;height:100%;object-fit:cover}
.finder-quick .box:hover .box-ic{transform:scale(1.05) rotate(-2deg)}
.finder-quick .box-t{padding-inline-end:22px}
/* the tick: a round badge in the corner */
.finder-quick .box-x{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;margin:0;border-radius:50%;border:1.5px solid var(--c-line-strong);background:var(--c-surface);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease)}
.finder-quick .box input:checked + .box-x{background:var(--c-primary);border-color:var(--c-primary);transform:scale(1.08)}
.finder-quick .box input:checked + .box-x::after{left:6.5px;top:3px;width:5px;height:9px;border-width:0 2.2px 2.2px 0}
.finder-quick .box:has(input:checked){border-color:var(--c-primary);background:linear-gradient(180deg,var(--c-surface),var(--c-primary-50));box-shadow:0 0 0 3px rgb(44 219 180 / .18),var(--sh-2)}
.finder-quick .box:has(input:checked) .box-ic{box-shadow:inset 0 0 0 1px rgb(20 48 45 / .06),0 0 0 2px var(--c-surface),0 0 0 4px var(--c-accent)}
.finder-quick .box:has(input:focus-visible){box-shadow:var(--ring)}
/* count of ticked boxes and a way to clear them (app.js adds it) */
.qc-sel{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:-8px 0 var(--s-2);font-size:var(--t-xs);color:var(--c-muted)}
.qc-sel[hidden]{display:none}
.qc-n{font-weight:600;color:var(--c-primary)}
.qc-clear{border:0;background:none;padding:4px 2px;color:var(--c-muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qc-clear:hover{color:var(--c-primary)}
/* results */
.finder-quick .finder-empty{display:flex;align-items:center;gap:12px;padding:16px 18px;border-style:dashed;border-radius:var(--r-lg)}
.finder-quick .finder-empty::before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--c-primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 16px no-repeat}
.finder-quick .finder-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:var(--s-1);font-size:var(--t-lg)}
.qc-sum{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qc-sum span{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);background:var(--c-surface);border:1px solid var(--c-line);font:500 var(--t-xs)/1.2 var(--f-body);color:var(--c-text)}
.qc-sum span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.qc-sum b{font-weight:700;color:var(--c-ink)}
.finder-quick .level-h{margin-top:var(--s-3)}
.level-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--r-pill);background:currentColor;font:700 11px/1 var(--f-mono);letter-spacing:0}
.level-n > i{font-style:normal;color:var(--c-on-primary)}
.finder-quick .fr{position:relative;border-radius:var(--r-md);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.finder-quick .fr:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.finder-quick .fr-t::after{content:"";position:absolute;inset:0;border-radius:inherit}
.finder-quick .fr-t{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.finder-quick .fr-t::before{content:"";order:2;flex:none;width:16px;height:16px;margin-top:1px;opacity:.45;transition:opacity .2s,transform .2s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat}
[dir="rtl"] .finder-quick .fr-t::before{transform:scaleX(-1)}
.finder-quick .fr:hover .fr-t::before{opacity:1;transform:translateX(3px)}
[dir="rtl"] .finder-quick .fr:hover .fr-t::before{transform:scaleX(-1) translateX(3px)}
@media (max-width:899px){
  .finder-quick .boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder-quick .box{flex-direction:row;align-items:center;gap:14px;padding:12px 40px 12px 12px}
  [dir="rtl"] .finder-quick .box{padding:12px 12px 12px 40px}
  .finder-quick .box-t{padding:0}
  .finder-quick .box-x{top:50%;margin-top:-11px}
  .finder-quick .box input:checked + .box-x{transform:scale(1.08)}
  .finder-quick .box-ic{flex:none;width:52px;height:52px;border-radius:14px}
}
@media (max-width:559px){
  .finder-quick .boxes{gap:10px}
  .finder-quick .box{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 12px 14px;font-size:var(--t-xs)}
  [dir="rtl"] .finder-quick .box{padding:12px 12px 14px}
  .finder-quick .box-x{top:10px;inset-inline-end:10px;margin-top:0;width:20px;height:20px}
  .finder-quick .box input:checked + .box-x::after{left:5.5px;top:2.5px}
  .finder-quick .box-t{padding-inline-end:4px}
  .finder-quick .box-ic{width:56px;height:56px}
}
@media (prefers-reduced-motion: reduce){
  .finder-quick .box,.finder-quick .box-ic,.finder-quick .fr{transition:none}
  .finder-quick .box:hover,.finder-quick .fr:hover{transform:none}
  .finder-quick .box:hover .box-ic{transform:none}
}

/* ------------------------------------------------ home hero: a silent 5-second loop over the photo (app.js starts it; off for reduced motion and data saver) */
.hero .art-photo{position:relative}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none;background:transparent}
.hero-vid.is-on{opacity:1}
.hero .art-photo.has-vid img{animation:none}
@media (prefers-reduced-motion: reduce){ .hero-vid{display:none} }
/* the new photo has the family in the middle: the right-hand chip sits in the sky, over the palm */
.hero .gc-b{top:9%}

/* ------------------------------------------------ top bar: never break the site name or the buttons; French needs more room */
@media (min-width:1024px){
  .brand-name,.menu-btn,.tn,.top-cta{white-space:nowrap}
}
/* the French bar is about 170 px longer than the English one: drop the five quick links until the screen is wide enough... */
@media (min-width:1360px) and (max-width:1499px){
  html[lang="fr"] .topnav{display:none}
  html[lang="fr"] .topbar-in{grid-template-columns:auto auto minmax(160px,1fr) auto auto;grid-template-areas:"brand menu search langs cta"}
}
/* ...then give the bar a little more width so everything fits on one line */
@media (min-width:1500px){
  html[lang="fr"] .topbar-in{max-width:calc(1376px + 2 * var(--gutter))}
}
/* phones: the French name is long, so let it use three short lines instead of being cut off */
@media (max-width:1023px){
  html[lang="fr"] .brand-name{-webkit-line-clamp:3;font-size:.84rem;line-height:1.12;text-wrap:balance}
}

/* ------------------------------------------------ quotes page (app.js builds these from the page's own tables and form) */
.q-hide{display:none!important}
.q-cta .hero-cta{margin-top:var(--s-3)}
.q-cta .hero-cta .btn{flex:0 1 auto}
.q-cta-note{display:flex;align-items:center;gap:8px;margin-top:12px!important;font-size:var(--t-xs);color:var(--c-subtle)}
.q-cta-note .icon{width:15px;height:15px;color:var(--c-accent-ink)}
/* the form in three steps */
.qb.qs-on{padding-top:var(--s-3)}
.qs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qs-step{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--c-muted);text-align:start;cursor:pointer;font:inherit;transition:background-color .2s,border-color .2s}
.qs-step:hover{background:var(--c-primary-50)}
.qs-step:focus-visible{outline:none;box-shadow:var(--ring)}
.qs-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c-line-strong);background:var(--c-surface);font:600 12px/1 var(--f-mono);color:var(--c-subtle);transition:all .25s var(--ease)}
.qs-l{display:grid;min-width:0}
.qs-t{font:600 var(--t-sm)/1.25 var(--f-display);color:inherit}
.qs-s{font-size:12px;line-height:1.3;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-step.is-on{background:var(--c-surface);border-color:var(--c-primary-200);box-shadow:var(--sh-1);color:var(--c-ink)}
.qs-step.is-on .qs-n{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary);box-shadow:0 0 0 4px rgb(44 219 180 / .2)}
.qs-step.is-done .qs-n{border-color:var(--c-accent);background:var(--c-accent-50);color:var(--c-accent-ink)}
.qs-bar{height:4px;margin:10px 0 var(--s-3);border-radius:4px;background:var(--c-line);overflow:hidden}
.qs-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--c-accent),var(--c-primary));transition:width .5s var(--ease)}
[dir="rtl"] .qs-bar span{background:linear-gradient(270deg,var(--c-accent),var(--c-primary))}
.qs-panel:focus{outline:none}
.qs-panel[data-panel="1"] .qb-kinds{margin:0}
.qb.qs-on .qk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;background:none;border:0}
.qb.qs-on .qk span.qk-i,.qb.qs-on .qk span.qk-t,.qb.qs-on .qk span.qk-d{display:block;padding:0;border-radius:0;background:none;box-shadow:none}
.qb.qs-on .qk > span{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;height:100%;padding:12px;border-radius:var(--r-lg);border:1.5px solid var(--c-glass-border);background:var(--c-surface);box-shadow:var(--sh-1);color:var(--c-ink);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease)}
.qb.qs-on .qk:hover > span{border-color:var(--c-primary-300);transform:translateY(-2px)}
.qb.qs-on .qk span.qk-i{grid-row:1 / 3;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-primary-50);color:var(--c-primary)}
.qk-i .icon{width:20px;height:20px}
.qb.qs-on .qk span.qk-t{font:650 var(--t-sm)/1.25 var(--f-display);color:var(--c-ink)}
.qb.qs-on .qk span.qk-d{font:400 12px/1.35 var(--f-body);color:var(--c-subtle)}
.qb.qs-on .qk input:checked + span{border-color:var(--c-primary);background:linear-gradient(180deg,var(--c-surface),var(--c-primary-50));box-shadow:0 0 0 3px rgb(44 219 180 / .18),var(--sh-2)}
.qb.qs-on .qk input:checked + span .qk-i{background:var(--c-primary);color:var(--c-on-primary)}
.qb.qs-on .qk input:focus-visible + span{box-shadow:var(--ring)}
.qs-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--c-line)}
.qs-of{font-size:12px;color:var(--c-subtle);white-space:nowrap}
.qs-nav .btn{min-height:42px;padding:9px 16px}
.qs-back .icon{width:16px;height:16px}
[dir="rtl"] .qs-back .icon{transform:scaleX(-1)}
.qs-ready{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px!important;padding:10px 12px;border-radius:var(--r-md);background:var(--c-accent-50);border:1px solid var(--c-accent-100);font-size:var(--t-sm);line-height:1.45;color:var(--c-accent-ink)}
.qs-ready .icon{flex:none;width:18px;height:18px;margin-top:1px}
@keyframes qs-flash{0%{box-shadow:0 0 0 0 rgb(44 219 180 / .55),var(--sh-2)}100%{box-shadow:0 0 0 14px rgb(44 219 180 / 0),var(--sh-2)}}
.qb-out.qs-flash{animation:qs-flash .9s var(--ease)}
.qb-mail .icon,.qb-actions .btn .icon{width:16px;height:16px}
.qs-then{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--c-line)}
.qs-then-h{margin:0 0 8px!important;font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-subtle)}
.lang[lang="ar"] .qs-then-h{letter-spacing:0;text-transform:none;font-size:12.5px}
.qs-then ol{list-style:none;margin:0;padding:0;counter-reset:qt;display:grid;gap:8px}
.qs-then li{counter-increment:qt;position:relative;padding-inline-start:32px;font-size:var(--t-sm);line-height:1.5;color:var(--c-text)}
.qs-then li::before{content:counter(qt);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-primary-50);color:var(--c-primary);font:600 11px/1 var(--f-mono)}
@media (max-width:919px){
  .qb.qs-on:not([data-step="3"]) .qb-out{display:none}
  .qs-steps{gap:4px}
  .qs-step{flex-direction:column;align-items:center;gap:6px;padding:6px 4px;text-align:center}
  .qs-s{display:none}
  .qs-t{font-size:12px}
}
@media (max-width:420px){ .qb.qs-on .qk-row{grid-template-columns:1fr 1fr}.qb.qs-on .qk > span{grid-template-columns:1fr;row-gap:6px}.qb.qs-on .qk span.qk-i{grid-row:auto} }
/* online quotes: filter buttons and insurer cards */
.qo{margin-top:var(--s-2)}
.qo-chips{display:flex;flex-wrap:wrap;gap:8px}
.qo-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-text);font:600 var(--t-xs)/1.2 var(--f-display);cursor:pointer;transition:all .2s}
.qo-chip b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--r-pill);background:var(--c-bg-tint);font:600 11px/1 var(--f-mono);color:var(--c-muted)}
.qo-chip:hover{border-color:var(--c-primary-300);color:var(--c-primary)}
.qo-chip.is-on{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.qo-chip.is-on b{background:rgb(255 255 255 / .18);color:var(--c-on-primary)}
.qo-chip:focus-visible{outline:none;box-shadow:var(--ring)}
.qo-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px!important;padding:10px 14px;border-radius:var(--r-md);background:var(--c-amber-50);border:1px solid #ecd5c4;font-size:var(--t-sm);color:var(--c-text)}
.qo-note .icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--c-amber)}
.prose .qo-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.qo-list > li{margin:0}
.qo-list > li[hidden]{display:none}
.qo-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:center;height:100%;padding:14px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-1)}
.qo-badge{grid-row:1;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font:700 12px/1 var(--f-display);letter-spacing:.02em;color:#fff}
.qo-badge.t1{background:#2f5a56}.qo-badge.t2{background:#a47454}.qo-badge.t3{background:#3f6f6a}.qo-badge.t4{background:#60442c}
.qo-b{display:grid;min-width:0}
.qo-co{font:650 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.qo-cat{font-size:12px;color:var(--c-subtle)}
.qo-one .qo-cat{display:none}
.qo-go{grid-column:1 / -1;justify-content:space-between;margin-top:8px;white-space:normal;text-align:start}
.qo-go .icon{flex:none;width:15px;height:15px}
/* where to get a quote: channel cards */
.prose .qc-list{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.qc-card{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px 18px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-glass-border);box-shadow:var(--sh-1)}
.qc-many{border-color:var(--c-primary-200);background:linear-gradient(180deg,var(--c-surface),var(--c-primary-50))}
.qc-top{display:flex;align-items:center;gap:12px}
.qc-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-primary-50);color:var(--c-primary)}
.qc-many .qc-i{background:var(--c-primary);color:var(--c-on-primary)}
.qc-i .icon{width:20px;height:20px}
.qc-t{font:650 var(--t-base)/1.25 var(--f-display);color:var(--c-ink)}
.prose .qc-how{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--c-text)}
.prose .qc-facts{display:grid;gap:6px;margin:0;padding:10px 0 0;border-top:1px solid var(--c-line)}
.qc-facts > div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:10px;align-items:baseline}
.qc-facts dt{display:flex;align-items:center;gap:6px;font:600 12px/1.35 var(--f-display);color:var(--c-subtle)}
.qc-facts dt .icon{flex:none;width:14px;height:14px;color:var(--c-accent-ink)}
.prose .qc-facts dd{margin:0;font-size:var(--t-xs);line-height:1.45;color:var(--c-ink)}
.qc-dots{display:inline-flex;gap:3px;margin-inline-end:7px;vertical-align:1px}
.qc-dots i{width:7px;height:7px;border-radius:50%;background:var(--c-line-strong)}
.qc-dots i.on{background:var(--c-accent)}
.prose .qc-mind{display:flex;gap:8px;align-items:flex-start;margin:auto 0 0;padding:9px 11px;border-radius:var(--r-sm);background:var(--c-bg-soft);font-size:var(--t-xs);line-height:1.5;color:var(--c-muted)}
.qc-mind .icon{flex:none;width:15px;height:15px;margin-top:2px;color:var(--c-primary)}
.qc-mind b{color:var(--c-ink);font-weight:600}
/* compare the quotes received */
.qx{margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-xl);background:linear-gradient(170deg,var(--c-surface),var(--c-primary-50));border:1px solid var(--c-glass-border);box-shadow:var(--sh-2)}
.prose .qx-h{display:flex;align-items:center;gap:10px;margin:0 0 var(--s-2);font-size:var(--t-lg)}
.qx-h .icon{width:22px;height:22px;color:var(--c-primary)}
.qx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qx-three .qx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.qx-q{margin:0;min-width:0;padding:14px;border-radius:var(--r-lg);border:1.5px solid var(--c-line);background:var(--c-surface);transition:border-color .2s,box-shadow .25s}
.qx-q.is-best{border-color:var(--c-accent);box-shadow:0 0 0 3px rgb(44 219 180 / .15)}
.qx-q legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;padding:0 0 10px;float:inline-start}
.qx-q legend + *{clear:both}
.qx-tag{font:650 var(--t-sm)/1.2 var(--f-display);color:var(--c-ink)}
.qx-flags{display:contents}
.qx-flag{padding:3px 8px;border-radius:var(--r-pill);font:600 11px/1.2 var(--f-display)}
.qx-flag.f1{background:var(--c-accent-50);color:var(--c-accent-ink);box-shadow:inset 0 0 0 1px var(--c-accent-100)}
.qx-flag.f2{background:var(--c-primary-50);color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary-100)}
.qx-rm{margin-inline-start:auto;border:0;background:none;padding:2px 0;color:var(--c-subtle);font:500 12px/1.2 var(--f-body);text-decoration:underline;cursor:pointer}
.qx .fld{margin-bottom:10px}
.qx .fld label{font-size:var(--t-xs)}
.qx-in{position:relative}
.qx-in input{padding-inline-end:52px!important}
.qx-in span{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--c-subtle);pointer-events:none}
.qx-bars{display:grid;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid var(--c-line)}
.qx-bars > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center}
.qx-bl{font-size:11.5px;color:var(--c-subtle)}
.qx-bt{grid-column:1 / -1;grid-row:2;height:8px;border-radius:5px;background:var(--c-bg-tint);overflow:hidden}
.qx-bt i{display:block;height:100%;width:0;border-radius:5px;background:var(--c-primary-300);transition:width .45s var(--ease)}
.qx-bars > div + div .qx-bt i{background:var(--c-primary)}
.qx-bv{font:600 12px/1.2 var(--f-mono);color:var(--c-ink);text-align:end}
.qx-add{margin-top:12px}
.qx-add .icon{width:15px;height:15px}
.qx-res{display:grid;gap:8px;margin-top:var(--s-2)}
.prose .qx-res p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--c-text)}
.qx-res .icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--c-accent-ink)}
.prose .qx-res .qx-sum{padding:10px 12px;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-accent-100);color:var(--c-ink)}
.prose .qx-res .qx-warn{padding:10px 12px;border-radius:var(--r-md);background:var(--c-amber-50);border:1px solid #ecd5c4}
.qx-warn .icon{color:var(--c-amber)}
.prose .qx-res .qx-wait{color:var(--c-subtle)}
.prose .qx-note{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:12px;color:var(--c-subtle)}
.qx-note .icon{width:14px;height:14px}
@media (max-width:719px){ .qx-grid,.qx-three .qx-grid{grid-template-columns:1fr} .qx{padding:var(--s-2)} }
/* "your request" card under the contents (wide screens only) */
.q-side{display:none}
@media (min-width:1100px){
  .page:not(.page-wide) > .toc .q-side{display:block;margin-top:12px;padding:14px;border-radius:var(--r-md);background:linear-gradient(170deg,var(--c-primary-50),var(--c-accent-50));border:1px solid var(--c-primary-100)}
  .q-side-h{margin:0 0 8px!important;font:600 11px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary)}
  .lang[lang="ar"] .q-side-h{letter-spacing:0;text-transform:none;font-size:12.5px}
  .q-side-k{display:flex;align-items:center;gap:10px;margin:0 0 10px!important;font:650 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
  .q-side-i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--c-primary);color:var(--c-on-primary)}
  .q-side-i .icon{width:17px;height:17px}
  .q-side-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;margin-bottom:8px;font-size:12px;color:var(--c-muted)}
  .q-side-r b{font:600 12px/1.2 var(--f-mono);color:var(--c-ink)}
  .q-side-b{grid-column:1 / -1;height:6px;border-radius:4px;background:rgb(255 255 255 / .8);overflow:hidden}
  .q-side-b i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--c-accent),var(--c-primary));transition:width .4s var(--ease)}
  .q-side-st{display:flex;align-items:center;gap:6px;margin:10px 0!important;font-size:12px;color:var(--c-muted)}
  .q-side-st .icon{width:15px;height:15px}
  .q-side-st.is-ready{color:var(--c-accent-ink);font-weight:600}
  .q-side-go{width:100%;justify-content:space-between}
  .q-side-go .icon{width:15px;height:15px}
}
@media (prefers-reduced-motion: reduce){ .qs-bar span,.qx-bt i,.q-side-b i,.qb.qs-on .qk > span{transition:none} .qb-out.qs-flash{animation:none} }
.qs-panel[hidden],.qs-ready[hidden],.qo-note[hidden],.qx-q[hidden],.qx-add[hidden],.q-cta [hidden]{display:none!important}
.qb.qs-on .qb-fields{grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.qs-on .qb-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qs-on .qb-actions [data-qbcopy]{grid-column:1 / -1}
.qs-on .qb-actions .btn{padding-inline:12px}
.qc-list > .qc-card:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:720px){ .qc-list > .qc-card:last-child:nth-child(odd) .qc-facts{grid-template-columns:repeat(3,minmax(0,1fr))} .qc-list > .qc-card:last-child:nth-child(odd) .qc-facts > div{grid-template-columns:1fr;gap:2px} }

/* legal pages:start ------------------------------------------- legal pages, byline, placeholders, footer links, official sources */
.page-legal .ph-inner{grid-template-columns:minmax(0,1fr)}
.page-legal .page-head h1{max-width:22ch}
.page-legal .tbl.tbl-kv tbody th{width:30%}
.page-legal .tbl.tbl-kv td{font-weight:500}
.page-legal .prose code{font-family:var(--f-mono);font-size:.88em;padding:1px 6px;border-radius:6px;background:var(--c-bg-tint);color:var(--c-ink);white-space:nowrap}
.byline{margin-top:var(--s-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--c-subtle);font-size:var(--t-sm);line-height:1.4}
.byline > span{display:inline-flex;align-items:center;gap:6px}
.byline .icon{width:16px;height:16px;flex:none;color:var(--c-accent-ink)}
.byline .dot{color:var(--c-line-strong)}
.byline a{color:inherit;text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:3px}
.byline a:hover{color:var(--c-primary);text-decoration-color:currentColor}
.tbc{display:inline-block;padding:0 8px;border:1px dashed var(--c-line-strong);border-radius:var(--r-xs);background:var(--c-bg-soft);color:var(--c-subtle);font-weight:500;font-style:italic;font-size:.92em;line-height:1.6}
.sf-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.sf-legal a{color:var(--c-muted);text-decoration:none}
.sf-legal a:hover,.sf-legal a[aria-current]{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.srcs{margin-top:var(--s-6);padding:var(--s-3);border-radius:var(--r-lg);border:1px solid var(--c-line);background:var(--c-bg-soft)}
.prose .srcs-h{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;font-size:var(--t-lg);line-height:1.3}
.prose .srcs-h::before,.prose .srcs-h::after{content:none}
.srcs-h .icon{width:20px;height:20px;flex:none;color:var(--c-primary)}
.prose .srcs-p{margin:6px 0 0;color:var(--c-muted);font-size:var(--t-sm)}
.srcs-l{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:560px){
  .srcs-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .srcs-l:has(> li:nth-child(4)),.srcs-l:not(:has(> li:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.prose .srcs-l li{margin:0;padding:0}
.prose .srcs-l li::before{content:none}
.prose .srcs-l a{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.prose .srcs-l a:hover{border-color:var(--c-primary-300);box-shadow:var(--sh-1)}
.prose .srcs-l a.ext::after{content:none}
.srcs-n{font:600 var(--t-sm)/1.3 var(--f-display);color:var(--c-ink)}
.srcs-d{font-size:var(--t-xs);color:var(--c-muted);line-height:1.45}
.srcs-u{margin-top:auto;padding-top:4px;font-size:var(--t-xs);color:var(--c-accent-ink)}
.srcs-u::after{content:" \2197"}
/* legal pages:end */
/* insurers:start ------------------------------------------------ insurer pages and links from the directory */
.page-ins .ph-inner{grid-template-columns:minmax(0,1fr)}
.page-ins .page-head h1{max-width:24ch}
.ins-indep{color:var(--c-muted);font-size:var(--t-sm)}
.ins-cats{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prose .ins-cats li{margin:0;padding:0}
.prose .ins-cats li::before{content:none}
.ins-cats a{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font-size:var(--t-sm);font-weight:500;text-decoration:none}
.ins-cats a:hover{border-color:var(--c-primary-300);color:var(--c-primary)}
.ins-cats .icon{width:16px;height:16px;color:var(--c-primary)}
.page-ins .tbl.tbl-kv tbody th{width:38%}
.page-ins .tbl.tbl-kv td{font-weight:500}
.ins-note{margin-top:10px;color:var(--c-subtle);font-size:var(--t-xs)}
.dir-more{margin-top:10px}
.dir-more a{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:600;color:var(--c-primary);text-decoration:none}
.dir-more a:hover{text-decoration:underline;text-underline-offset:3px}
.dir-more .icon{width:15px;height:15px}
[dir="rtl"] .dir-more .icon,[dir="rtl"] .page-ins .go .icon{transform:scaleX(-1)}
/* insurers:end */

/* cards and sharing:start ------------------------------------------ guarantee tables as cards, WhatsApp sharing */
.gview{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--s-2) 0 12px;font-size:var(--t-xs);color:var(--c-subtle)}
.gview-l{margin-inline-end:4px}
.gview-b{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-muted);font:inherit;font-weight:600;cursor:pointer}
.gview-b .icon{width:14px;height:14px}
.gview-b[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.gview-b:focus-visible{outline:none;box-shadow:var(--ring)}
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:640px){ .gcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.prose .gcards > li{margin:0;padding:16px}
.prose .gcards > li::before{content:none}
.gcard{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--c-glass-border);background:var(--c-surface);box-shadow:var(--sh-1)}
.gcard-top{display:flex;align-items:flex-start;gap:12px}
.gcard-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c-primary-50);color:var(--c-primary)}
.gcard-ic .icon{width:20px;height:20px}
.gcard-h{min-width:0}
.prose .gcard-t{margin:0;font:600 var(--t-base)/1.3 var(--f-display);color:var(--c-ink)}
.prose .gcard-k{margin:3px 0 0;font-size:var(--t-xs);color:var(--c-subtle)}
.prose .gcard-l{margin:0;display:flex;align-items:center;gap:6px;font:600 11px/1.3 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--c-subtle)}
.prose .gcard-v{margin:4px 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--c-text)}
.gcard-check{margin-top:auto;padding:10px 12px;border-radius:var(--r-sm);background:var(--c-amber-50)}
.prose .gcard-check .gcard-l{color:var(--c-amber)}
.gcard-check .icon{width:13px;height:13px}
.lang[lang="ar"] .gcard-l{letter-spacing:0;text-transform:none;font-size:12.5px}
.wa-s{display:inline-flex;align-items:center;gap:6px;margin-inline-start:4px;color:#127a43;font-weight:600;text-decoration:none}
.wa-s:hover{text-decoration:underline;text-underline-offset:3px}
.wa-i{width:16px;height:16px}
.wa-end{margin-top:var(--s-6);padding:var(--s-3);border-radius:var(--r-lg);border:1px dashed var(--c-line-strong);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.prose .wa-end-t{margin:0;font-weight:600;color:var(--c-ink)}
.prose .wa-end-a{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.btn.wa-b{background:#127a43;border-color:#127a43;color:#fff}
.btn.wa-b:hover{background:#0e6537;border-color:#0e6537}
.wa-b .wa-i,.wa-copy .icon{width:18px;height:18px}
.calc-wa{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--t-sm);font-weight:600;color:#127a43;text-decoration:none}
.calc-wa:hover{text-decoration:underline;text-underline-offset:3px}
/* cards and sharing:end */
/* steps:start --------------------------------------------------- step-by-step pages, form drawings, links from the guides */
.page-step .ph-inner{grid-template-columns:minmax(0,1fr)}
.page-step .page-head h1{max-width:26ch}
.cf{margin:var(--s-3) 0;border:1px solid var(--c-glass-border);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-1);overflow:hidden}
.prose .cf-h{margin:0;padding:12px 16px;display:flex;align-items:center;gap:10px;font:600 var(--t-sm)/1.4 var(--f-display);color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.cf-h .icon{flex:none;width:18px;height:18px;color:var(--c-primary)}
.cf-scroll{overflow-x:auto;padding:12px;-webkit-overflow-scrolling:touch}
.cf-d{display:block;width:100%;max-width:600px;height:auto;margin:0 auto;font-family:inherit}
@media (max-width:560px){ .cf-d{min-width:520px} }
.cf figcaption{padding:10px 16px 12px;font-size:var(--t-xs);line-height:1.55;color:var(--c-muted);border-top:1px solid var(--c-line)}
.cf-paper{fill:var(--c-bg-soft);stroke:var(--c-line)}
.cf-box{fill:var(--c-surface);stroke:var(--c-line-strong)}
.cf-a{fill:var(--c-primary-50);stroke:var(--c-primary-300)}
.cf-b{fill:var(--c-amber-50);stroke:var(--c-amber);stroke-opacity:.45}
.cf-t{font-size:13.5px;font-weight:500;fill:var(--c-text)}
.cf-hd{font-size:14px;font-weight:700;fill:var(--c-primary)}
.cf-hd-b{fill:var(--c-amber)}
.cf-nb{fill:var(--c-primary)}
.cf-nt{font-size:11px;font-weight:700;fill:#fff}
.cf-cnt{font-size:14px;font-weight:700;fill:var(--c-ink)}
.cf-sq{fill:var(--c-surface);stroke:var(--c-line-strong)}
.cf-ln{stroke:var(--c-line);stroke-dasharray:3 4}
.cf-ck{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cf-ck-a{stroke:var(--c-primary)} .cf-ck-b{stroke:var(--c-amber)}
.cf-car-a{fill:var(--c-primary)} .cf-car-b{fill:var(--c-amber)}
.cf-arw{fill:none;stroke:var(--c-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cf-road{fill:var(--c-bg-soft)}
.cf-edge{fill:none;stroke:var(--c-line-strong)}
.cf-dash{fill:none;stroke:var(--c-line-strong);stroke-dasharray:6 5}
.cf-sig{fill:none;stroke:var(--c-ink);stroke-width:1.4;stroke-linecap:round}
.cf-doc{fill:var(--c-primary-50);stroke:var(--c-primary);stroke-width:1.4;stroke-linejoin:round}
.cf-docl{fill:none;stroke:var(--c-primary);stroke-width:1.3;stroke-linecap:round}
.cf-stamp{fill:none;stroke:var(--c-amber);stroke-width:1.8}
.cf-plus{fill:none;stroke:var(--c-amber);stroke-width:2.2;stroke-linecap:round}
.cf-lab{fill:var(--c-surface);stroke:var(--c-amber);stroke-width:1.3}
.cf-tb{font-size:14px;font-weight:700;fill:var(--c-ink)}
.cf-ts{font-size:12.5px;fill:var(--c-muted)}
.cf-con{fill:none;stroke:var(--c-primary-300);stroke-width:1.6}
.cf-conh{fill:none;stroke:var(--c-primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cf-fund{fill:var(--c-primary)}
.cf-fund-t{font-size:15px;font-weight:700;fill:#fff}
.cf-fund-s{font-size:12.5px;fill:#fff;fill-opacity:.85}
.prose .stepl{margin:var(--s-3) 0 0}
.stepl a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--c-primary-100);background:linear-gradient(180deg,var(--c-surface),var(--c-primary-50));color:var(--c-text);text-decoration:none;box-shadow:var(--sh-1)}
.stepl a:hover{border-color:var(--c-primary-300)}
.stepl a:focus-visible{outline:none;box-shadow:var(--ring)}
.stepl-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c-primary);color:var(--c-on-primary)}
.stepl-i .icon{width:20px;height:20px}
.stepl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stepl-k{font:600 11px/1.3 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary)}
.lang[lang="ar"] .stepl-k{letter-spacing:0;text-transform:none;font-size:12.5px}
.stepl-t{font-weight:600;line-height:1.35;color:var(--c-ink)}
.stepl-a{flex:none;width:18px;height:18px;color:var(--c-primary)}
[dir="rtl"] .stepl-a{transform:scaleX(-1)}
/* steps:end */