/* Kaido design system v1 (4 Nov 2026). Loaded last on every page, after page CSS and mobile-polish.
   Owns: typefaces, heading scale H1 to H6, colour roles, removal of generic chrome, motion policy, Arabic typography.
   Rules: copper is the colour of one thing only, the primary action. Ink carries structure. Labels are sentence case. */

/* 1. Typefaces (self-hosted, SIL OFL) */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-var.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-21FF}
@font-face{font-family:'Readex';font-style:normal;font-weight:160 700;font-display:swap;src:url('/assets/fonts/readex-arabic.woff2') format('woff2-variations');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex';font-style:normal;font-weight:160 700;font-display:swap;src:url('/assets/fonts/readex-latin.woff2') format('woff2-variations');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}

:root{
  --kd-display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kd-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kd-ink:#111110; --kd-ink-2:#4A443E; --kd-soft:#6F6A60; --kd-line:#E4DED4; --kd-paper:#FBFAF8; --kd-sand:#F4F0EA;
  --kd-action:#C94208; --kd-action-hover:#E8500A; --kd-connect:#1F8A5B;
  /* Type scale, major third on 17px body, clamped for phones */
  --kd-h1:clamp(36px,4.6vw,60px); --kd-h1-home:clamp(42px,5.4vw,70px); --kd-h2:clamp(30px,4vw,52px); --kd-h3:clamp(22px,2.4vw,28px); --kd-h4:20px; --kd-h5:17px; --kd-h6:15px;
}

/* 2. Heading scale, one family, weight and tracking tuned per level */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:var(--kd-display) !important;color:var(--kd-ink);font-optical-sizing:auto;font-feature-settings:"cv11","ss01","ss03"}
html:not([lang="ar"]) body,html:not([lang="ar"]) button,html:not([lang="ar"]) input,html:not([lang="ar"]) select,html:not([lang="ar"]) textarea{font-family:var(--kd-body)}
body{font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body.home h1,html[lang="ar"] body.home h1{font-size:var(--kd-h1-home) !important}
h1,.h1{font-size:var(--kd-h1) !important;font-weight:420 !important;line-height:1.04 !important;letter-spacing:-.01em !important}
h2,.h2{font-size:var(--kd-h2) !important;font-weight:440 !important;line-height:1.08 !important;letter-spacing:-.008em !important}
h3,.h3{font-size:var(--kd-h3) !important;font-weight:520 !important;line-height:1.22 !important;letter-spacing:0 !important}
h4{font-size:var(--kd-h4) !important;font-weight:560 !important;line-height:1.3 !important;letter-spacing:0}
h5{font-size:var(--kd-h5) !important;font-weight:600 !important;line-height:1.35 !important;letter-spacing:0}
h6{font-size:var(--kd-h6) !important;font-weight:600 !important;line-height:1.4 !important;letter-spacing:0;color:var(--kd-soft)}
.sh h2,.sec h2,.blk h2{margin-top:0}
h2+p,h3+p{margin-top:.5em}

/* 3. Generic chrome removed: eyebrows become sentence-case labels in the display face; no tracking, no caps, no mono */
.eyebrow,.ey,.ex,.secx,.mcat,.authlab,.lbl,.pcrumb,.ttl,.kick,.eb,.tag,.cat,.pill-label,.trustline,.wmeta,.sub-label,.sl,.lab,.note,.fmeta,.byline,.k-sub,.who,.form-note,.k-form-note,.dsub,.dhead{
  font-family:var(--kd-display) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important;color:var(--kd-soft) !important}
.eyebrow,.ey,.ex,.secx,.kick,.eb,.lab,.mq-sec .lab{font-size:14px !important;margin-bottom:10px}
.mcat,.authlab,.lbl,.ttl,.wmeta,.dsub,.dhead,.who,.fmeta,.byline{font-size:12.5px !important}
body *{text-transform:none !important}
/* Middle dot separators read as commas in meta strings */
.pill i,.pill span{font-family:var(--kd-body) !important}

/* 4. Colour roles. Copper = the primary action only. Accent text, numbers and tags move to ink. */
.acc,.accent,.num,.stat b,.stat .n,.kn,.k b,.bestfor b,.hl,.copper,.orange,.highlight,.pill .dot,h1 span,h2 span.acc,h2 em,h1 em{color:var(--kd-ink) !important}
h1 span,h1 em,h2 em{font-style:normal}
.dtile b.acc,.dtable td.n.acc,.dhead b{color:var(--kd-ink) !important}
.chip,.tag,.pill{border-color:var(--kd-line) !important;color:var(--kd-ink-2) !important;background:#fff !important}
a:not(.btn):not(.wa):not(.js-cal):not(.cta):not(.kc-a){color:var(--kd-ink);text-decoration-color:var(--kd-action);text-underline-offset:3px}
.prose a,.sec p a,.k-form-note a,.faq p a{text-decoration:underline}
/* The connected state (live, done, green dots) keeps its own hue */
.live,.ok,.done,.wt i.on,.wlegend .live{color:var(--kd-connect)}

/* 5. Buttons: one primary, one secondary. No arrows appended by CSS; arrows in markup are removed by the build. */
.btn,.btn-p,.cta.js-cal,.msticky a.js-cal,#kaido-consent button.kc-a,form.js-nf button[type=submit]{font-family:var(--kd-display) !important;font-weight:650 !important;letter-spacing:0 !important;border-radius:12px !important}
.btn:not(.btn-g):not(.btn-ghost),.btn-p,a.cta.js-cal,.msticky a.js-cal,#kaido-consent button.kc-a,form.js-nf button[type=submit]{background:var(--kd-action) !important;border-color:var(--kd-action) !important;color:#fff !important;box-shadow:none !important}
.btn:not(.btn-g):not(.btn-ghost):hover,.btn-p:hover,a.cta.js-cal:hover,.msticky a.js-cal:hover,form.js-nf button[type=submit]:hover{background:var(--kd-action-hover) !important;border-color:var(--kd-action-hover) !important;transform:none !important}
.btn-g,.btn-ghost{background:#fff !important;color:var(--kd-ink) !important;border:1.5px solid var(--kd-ink) !important}
.btn-g:hover,.btn-ghost:hover{background:var(--kd-ink) !important;color:#fff !important}
.msticky a.wa{border-color:var(--kd-line) !important}
:focus-visible{outline:3px solid var(--kd-action);outline-offset:3px;border-radius:6px}

/* 6. Motion policy: content is visible by default; one orchestrated moment lives in the hero only. Cards do not lift. */
.rv,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
.ccx:hover,.kcard:hover,.stlink:hover,.card:hover,.rcard:hover,.pc:hover,.pcard:hover,.gcard:hover,.wt:hover,.cap:hover,.cs:hover{transform:none !important}
.ccx,.kcard,.stlink,.card,.rcard,.pc,.pcard,.gcard,.cap,.cs{transition:border-color .15s,box-shadow .15s !important}
.wafab:hover{transform:none !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* 7. Arabic typography: Readex for both display and body, generous leading, no negative tracking, Western digits */
html[lang="ar"] body,html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] a,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea,html[lang="ar"] .btn{font-family:'Readex','Geist',system-ui,sans-serif !important;letter-spacing:0 !important}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6,html[lang="ar"] .h1,html[lang="ar"] .h2,html[lang="ar"] .h3{font-family:'Readex','Geist',system-ui,sans-serif !important;letter-spacing:0 !important;font-weight:700 !important}
html[lang="ar"] h1,html[lang="ar"] .h1{font-size:clamp(34px,5.2vw,64px) !important;line-height:1.18 !important}
html[lang="ar"] h2,html[lang="ar"] .h2{font-size:clamp(27px,3.8vw,42px) !important;line-height:1.22 !important}
html[lang="ar"] h3,html[lang="ar"] .h3{line-height:1.35 !important}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] p,html[lang="ar"] li{line-height:1.85 !important}
html[lang="ar"] .eyebrow,html[lang="ar"] .ey,html[lang="ar"] .lbl,html[lang="ar"] .mcat,html[lang="ar"] .who,html[lang="ar"] .fmeta{font-family:'Readex',sans-serif !important}
html[lang="ar"] *{font-variant-numeric:lining-nums}

/* 8. Line length and body comfort */
.prose p,.sec p,.intro p,.standfirst,.sub{max-width:68ch}

/* footer links inherit the footer text colour (dark footers were rendering ink-on-ink) */
footer a:not(.btn):not(.wa):not(.js-cal):not(.cta):not(.kc-a),.footer-bottom a:not(.btn){color:inherit;text-decoration-color:currentColor}
footer a:not(.btn):hover{color:#fff}
.secx p+p{margin-top:12px}

/* A3: WhatsApp-first sticky on phones */
.msticky a.wa.primary{background:#128C7E!important;color:#fff!important;flex:1.4}
.msticky a.js-cal{background:var(--kd-action)!important}
/* A4: exit-intent offer */
.kx-offer{position:fixed;right:18px;bottom:18px;z-index:1200;width:min(380px,calc(100vw - 36px));background:#fff;border:1px solid #E4DED4;border-radius:18px;box-shadow:0 18px 50px rgba(14,14,14,.18);padding:22px 22px 20px;transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.kx-offer.on{transform:none;opacity:1;pointer-events:auto}
html[dir="rtl"] .kx-offer{right:auto;left:18px}
.kx-offer .kxx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:#6F6B65;cursor:pointer;padding:4px 8px}
html[dir="rtl"] .kx-offer .kxx{right:auto;left:12px}
.kx-offer .kxk{font-size:12.5px;color:#A33606;font-weight:600;margin-bottom:6px;display:block}
.kx-offer h3{font-size:20px;line-height:1.25;margin:0 0 8px}
.kx-offer p{font-size:14.5px;color:#55524C;line-height:1.5;margin:0 0 12px}
.kx-offer form{display:flex;gap:8px}
.kx-offer input[type=email]{flex:1;min-width:0;padding:12px 12px;border:1px solid #E4DED4;border-radius:10px;font:inherit;font-size:15px}
.kx-offer button{padding:12px 16px;border-radius:10px;border:0;font-weight:700;font-size:14px;cursor:pointer;background:var(--kd-action);color:#fff}
.kx-offer .kxok{display:none;font-weight:600;color:#0E0E0E}
.kx-offer.done form{display:none}.kx-offer.done .kxok{display:block}
@media(max-width:600px){.kx-offer{right:12px;left:12px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto}html[dir="rtl"] .kx-offer{left:12px}}
@media(prefers-reduced-motion:reduce){.kx-offer{transition:none}}

/* headings demoted for document order keep their visual size */
h2.as-h3,.as-h3{font-size:var(--kd-h3)!important;font-weight:520!important}
h3.as-h4,.as-h4{font-size:var(--kd-h4)!important}
.fcol h4{font-size:12.5px!important;font-weight:500!important;letter-spacing:.08em;line-height:1.4!important}
.meta div b{font-size:12px!important}.links a small{font-size:12.5px}.sys-live{font-size:12px!important}.wlegend b{font-size:12px!important}.logochip i{font-size:12px!important}.bestfor b{font-size:12px!important}
.ty .acts a.wa{background:#128C7E!important;color:#fff!important}

/* A3: WhatsApp-first sticky on phones */
.msticky a.wa.primary{background:#128C7E!important;color:#fff!important;flex:1.4}
.msticky a.js-cal{background:var(--kd-action)!important}
/* A4: exit-intent offer */
.kx-offer{position:fixed;right:18px;bottom:18px;z-index:1200;width:min(380px,calc(100vw - 36px));background:#fff;border:1px solid #E4DED4;border-radius:18px;box-shadow:0 18px 50px rgba(14,14,14,.18);padding:22px 22px 20px;transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.kx-offer.on{transform:none;opacity:1;pointer-events:auto}
html[dir="rtl"] .kx-offer{right:auto;left:18px}
.kx-offer .kxx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:#6F6B65;cursor:pointer;padding:4px 8px}
html[dir="rtl"] .kx-offer .kxx{right:auto;left:12px}
.kx-offer .kxk{font-size:12.5px;color:#A33606;font-weight:600;margin-bottom:6px;display:block}
.kx-offer h3{font-size:20px;line-height:1.25;margin:0 0 8px}
.kx-offer p{font-size:14.5px;color:#55524C;line-height:1.5;margin:0 0 12px}
.kx-offer form{display:flex;gap:8px}
.kx-offer input[type=email]{flex:1;min-width:0;padding:12px 12px;border:1px solid #E4DED4;border-radius:10px;font:inherit;font-size:15px}
.kx-offer button{padding:12px 16px;border-radius:10px;border:0;font-weight:700;font-size:14px;cursor:pointer;background:var(--kd-action);color:#fff}
.kx-offer .kxok{display:none;font-weight:600;color:#0E0E0E}
.kx-offer.done form{display:none}.kx-offer.done .kxok{display:block}
@media(max-width:600px){.kx-offer{right:12px;left:12px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto}html[dir="rtl"] .kx-offer{left:12px}}
@media(prefers-reduced-motion:reduce){.kx-offer{transition:none}}

/* A3: WhatsApp-first sticky on phones */
.msticky a.wa.primary{background:#128C7E!important;color:#fff!important;flex:1.4}
.msticky a.js-cal{background:var(--kd-action)!important}
/* A4: exit-intent offer */
.kx-offer{position:fixed;right:18px;bottom:18px;z-index:1200;width:min(380px,calc(100vw - 36px));background:#fff;border:1px solid #E4DED4;border-radius:18px;box-shadow:0 18px 50px rgba(14,14,14,.18);padding:22px 22px 20px;transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.kx-offer.on{transform:none;opacity:1;pointer-events:auto}
html[dir="rtl"] .kx-offer{right:auto;left:18px}
.kx-offer .kxx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:#6F6B65;cursor:pointer;padding:4px 8px}
html[dir="rtl"] .kx-offer .kxx{right:auto;left:12px}
.kx-offer .kxk{font-size:12.5px;color:#A33606;font-weight:600;margin-bottom:6px;display:block}
.kx-offer h3{font-size:20px;line-height:1.25;margin:0 0 8px}
.kx-offer p{font-size:14.5px;color:#55524C;line-height:1.5;margin:0 0 12px}
.kx-offer form{display:flex;gap:8px}
.kx-offer input[type=email]{flex:1;min-width:0;padding:12px 12px;border:1px solid #E4DED4;border-radius:10px;font:inherit;font-size:15px}
.kx-offer button{padding:12px 16px;border-radius:10px;border:0;font-weight:700;font-size:14px;cursor:pointer;background:var(--kd-action);color:#fff}
.kx-offer .kxok{display:none;font-weight:600;color:#0E0E0E}
.kx-offer.done form{display:none}.kx-offer.done .kxok{display:block}
@media(max-width:600px){.kx-offer{right:12px;left:12px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto}html[dir="rtl"] .kx-offer{left:12px}}
@media(prefers-reduced-motion:reduce){.kx-offer{transition:none}}

/* Eyebrows above a heading read as a smaller heading out of order: the heading stands alone (Khalid, 4 Nov) */
.ey:has(+ h1),.ey:has(+ h2),.eyebrow:has(+ h1),.eyebrow:has(+ h2),.kick:has(+ h2),.eb:has(+ h2),.ex:has(+ h2),.secx:has(+ h2),.lab:has(+ h2){display:none !important}

/* coinbase-like text: regular weight, normal tracking */
body{letter-spacing:0}
.hero4 .sub,.sub2,.sf,.standfirst,.lead{font-weight:400;letter-spacing:0}
.hero4 h1{max-width:11.5em}