/* ============================================================
   Dastak — landing tokens. v3 "Wise-style, Rabta green" · 2026-09-14
   Sage canvas · white 24px cards · Inter 900 display · flat pills
   ============================================================ */
:root{
  --brand:#247E4B;        /* Rabta logo green — the one CTA colour */
  --brand-dark:#1B6139;
  --lime:#9FE870;         /* highlight on ink (Wise-style dark cards) */
  --lime-pale:#E2F6D5;    /* soft green feature tint */
  --ink:#0E0F0C;          /* near-black with olive warmth */
  --body-c:#454745;
  --mute:#868685;
  --canvas:#FFFFFF;       /* cards */
  --sage:#EEF1EC;         /* page canvas (Wise canvas-soft, a touch greener) */
  --sage-2:#E3E8DF;
  --line:#DDE2D8;
  --wa:#25D366;
  --amber:#F2B23C;        /* "hot" only */
  --r:24px; --r-md:16px; --r-sm:12px;
  --font-head:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  /* aliases used by landing styles */
  --paper:var(--sage); --card:var(--canvas); --teal:var(--ink); --teal-deep:var(--ink); --mint:#C5EDAB; --mint-2:var(--lime); --shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sage);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;font-feature-settings:"calt"}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em;font-weight:900}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em}
h3{font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--brand)}
img{max-width:100%}
.mono{font-family:var(--font-mono)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-family:var(--font-head);font-weight:600;font-size:16px;line-height:24px;text-decoration:none;border:1px solid transparent;transition:background .15s,transform .1s;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:var(--canvas);color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--sage)}
.btn.wa{background:var(--lime);color:var(--ink)}
.btn.wa:hover{background:#CDFFAD}
.btn.sm{padding:8px 16px;font-size:14px;line-height:20px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--canvas);font-size:14px;font-weight:600;color:#054D28}
.pill.dark{background:rgba(255,255,255,.1);color:var(--lime)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:500;margin-bottom:12px}
.section{padding:80px 0}
.section.dark{background:var(--ink);color:#fff}
.section.dark h2{color:var(--lime)}
.section.dark .eyebrow{color:var(--lime)}
.section.card-bg{background:var(--canvas)}
.lead{font-size:20px;line-height:1.5;color:var(--body-c);max-width:640px}
.section.dark .lead{color:rgba(255,255,255,.75)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--canvas);border:0;border-radius:var(--r);padding:24px}
.section.card-bg .card{background:var(--sage)}
.section.dark .card{background:rgba(255,255,255,.06);color:#fff}
.card h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.card p{color:var(--body-c);font-size:15px;line-height:1.55;margin:0}
.section.dark .card p{color:rgba(255,255,255,.72)}
.ico{width:44px;height:44px;border-radius:999px;background:var(--lime-pale);display:grid;place-items:center;margin-bottom:14px;color:#054D28}
.section.dark .ico{background:rgba(159,232,112,.15);color:var(--lime)}
.ico svg{width:22px;height:22px}
.tag-hot{color:#7A4E00;background:#FFF1D6}
.tag-warm{color:#054D28;background:var(--lime-pale)}
.tag-cool{color:var(--mute);background:var(--sage)}
.tag-hot,.tag-warm,.tag-cool{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--font-mono)}
.wa-bub{background:#DCF8C6;color:#1b2a22;border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:15px;line-height:1.5;position:relative}
.wa-bub .t{display:block;text-align:right;font-size:11px;color:#6b7a70;margin-top:4px;font-family:var(--font-mono)}
.fine{font-size:13px;color:var(--mute)}
.section.dark .fine{color:rgba(255,255,255,.55)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}