/* ============================================================
   StreamlineData — Design Tokens
   Single source of truth for colour, type, spacing, radius.
   Import this before any other stylesheet.
   ============================================================ */

:root {

  /* ---------- BRAND COLOUR ---------- */
  /* Greens — primary brand ramp (derived from the Ghana flag green) */
  --sd-green-900: #003D22;  /* deepest — roadmap section bg */
  --sd-green-800: #005C34;
  --sd-green-700: #006B3F;  /* PRIMARY. Buttons, headings accent, logo */
  --sd-green-600: #00A85A;  /* Bright. Eyebrow labels, links, active states */
  --sd-green-500: #34C97A;  /* Light. Logo third bar, decorative */
  --sd-green-200: #C8F0D8;  /* Pale mint. Icon chips, tag backgrounds */
  --sd-green-100: #E1F5EE;  /* Tint. Success pills, subtle fills */
  --sd-green-050: #EEF6F1;  /* Section background mint */
  --sd-green-025: #F7FBF8;  /* Barely-there wash. Nested surfaces */

  /* Accent — Ghana flag gold + red. Use sparingly. */
  --sd-gold-600:  #C8930A;  /* Text on gold backgrounds */
  --sd-gold-500:  #E8A800;  /* PRIMARY GOLD. Badges, "in development" pills */
  --sd-gold-100:  #FAEEDA;  /* Gold tint background */
  --sd-gold-050:  #FFFCF0;  /* Section background warm */

  --sd-red-700:   #791F1F;  /* Text on red backgrounds */
  --sd-red-500:   #C8102E;  /* PRIMARY RED. CTA band, API accent */
  --sd-red-100:   #FCEBEB;  /* Red tint background */
  --sd-red-050:   #FFF8F5;  /* Section background blush */

  /* ---------- NEUTRAL / TEXT ---------- */
  --sd-ink:        #0D2B1A;  /* Headings, primary text. Green-black. */
  --sd-ink-2:      #1A2820;  /* Slightly lifted */
  --sd-text:       #333333;  /* Body copy */
  --sd-muted:      #4A7A5E;  /* Secondary text, descriptions */
  --sd-subtle:     #7AAA8A;  /* Tertiary — captions, meta, timestamps */
  --sd-faint:      #B0D4BE;  /* Disabled, placeholder */

  --sd-white:      #FFFFFF;
  --sd-surface:    #FFFFFF;  /* Card backgrounds */
  --sd-surface-2:  #F4F7F5;  /* Browser chrome, table headers */

  /* ---------- BORDERS ---------- */
  --sd-border:      #C8E0D2;  /* Standard card border */
  --sd-border-soft: #E0F0E8;  /* Subtle dividers */
  --sd-border-2:    #D0E8DA;  /* Browser mockup frames */

  /* ---------- SECTION BACKGROUNDS ---------- */
  /* Sections alternate to create rhythm. Use these, not raw hex. */
  --sd-bg-white:  var(--sd-white);
  --sd-bg-mint:   linear-gradient(180deg, #F0FAF5 0%, #E8F7EF 100%);
  --sd-bg-warm:   linear-gradient(180deg, #FFFBEC 0%, #FFF5CC 100%);
  --sd-bg-blush:  linear-gradient(180deg, #FFF8F5 0%, #FEF0EB 100%);
  --sd-bg-forest: linear-gradient(160deg, #003D22 0%, #005C34 60%, #007A46 100%);
  --sd-bg-cta:    linear-gradient(135deg, #C8102E 0%, #E84040 40%, #C84030 100%);

  /* ---------- TYPOGRAPHY ---------- */
  /* System stack. If licensing a webfont, swap here only. */
  --sd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --sd-text-hero:    36px;   /* Hero H1 */
  --sd-text-h2:      26px;   /* Section headings */
  --sd-text-h3:      17px;   /* Card headings */
  --sd-text-lg:      16px;   /* Lead paragraph */
  --sd-text-base:    15px;   /* Section subheads */
  --sd-text-body:    14px;   /* Body copy */
  --sd-text-sm:      13px;   /* Card body, list items */
  --sd-text-xs:      12px;   /* Small print, captions */
  --sd-text-2xs:     11px;   /* Eyebrow labels, meta */
  --sd-text-3xs:     10px;   /* Mockup UI text */

  /* Weights — the design uses only these three */
  --sd-weight-normal: 400;
  --sd-weight-medium: 600;
  --sd-weight-bold:   800;   /* Hero H1 and stat numbers only */

  /* Line heights */
  --sd-leading-tight:   1.15;  /* Headings */
  --sd-leading-snug:    1.25;
  --sd-leading-normal:  1.55;
  --sd-leading-relaxed: 1.7;   /* Body paragraphs */

  /* Letter spacing */
  --sd-tracking-tight: -0.8px;  /* Hero H1 */
  --sd-tracking-snug:  -0.4px;  /* Section H2 */
  --sd-tracking-wide:   0.08em; /* Eyebrow labels (uppercase) */

  /* ---------- SPACING ---------- */
  --sd-space-1:  4px;
  --sd-space-2:  8px;
  --sd-space-3:  12px;
  --sd-space-4:  16px;
  --sd-space-5:  20px;
  --sd-space-6:  24px;
  --sd-space-8:  32px;
  --sd-space-10: 40px;
  --sd-space-12: 48px;
  --sd-space-16: 64px;
  --sd-space-18: 72px;  /* Standard vertical section padding */

  /* Horizontal page gutter — consistent across every section */
  --sd-gutter: 52px;

  /* Max content width. Design is built for 1200px viewport. */
  --sd-max-width: 1200px;

  /* ---------- RADIUS ---------- */
  --sd-radius-sm:  6px;
  --sd-radius-md:  8px;
  --sd-radius-lg:  12px;
  --sd-radius-xl:  16px;
  --sd-radius-2xl: 18px;
  --sd-radius-pill: 20px;   /* Tags, badges */
  --sd-radius-full: 9999px; /* Circles, avatars */

  /* ---------- SHADOW ---------- */
  /* All shadows are green-tinted, never neutral grey. */
  --sd-shadow-sm:  0 2px 12px rgba(0, 107, 63, 0.05);
  --sd-shadow-md:  0 2px 16px rgba(0, 107, 63, 0.06);
  --sd-shadow-lg:  0 4px 20px rgba(0, 107, 63, 0.08);
  --sd-shadow-xl:  0 8px 32px rgba(0, 107, 63, 0.15);
  --sd-shadow-btn: 0 4px 16px rgba(0, 107, 63, 0.30);  /* Primary button */
}


/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sd-font);
  font-size: var(--sd-text-body);
  line-height: var(--sd-leading-relaxed);
  color: var(--sd-text);
  background: var(--sd-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--sd-green-700); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }


/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */

/* Section eyebrow — small uppercase label above every H2 */
.sd-eyebrow {
  font-size: var(--sd-text-2xs);
  font-weight: var(--sd-weight-medium);
  letter-spacing: var(--sd-tracking-wide);
  text-transform: uppercase;
  color: var(--sd-green-600);
  margin-bottom: var(--sd-space-2);
}
/* On dark backgrounds (roadmap section) */
.sd-eyebrow--light { color: var(--sd-green-500); }

/* Hero headline */
.sd-h1 {
  font-size: var(--sd-text-hero);
  font-weight: var(--sd-weight-bold);
  line-height: var(--sd-leading-tight);
  letter-spacing: var(--sd-tracking-tight);
  color: var(--sd-ink);
}
/* The accent phrase inside H1 — wrap in <em>, styled not italic */
.sd-h1 em { font-style: normal; color: var(--sd-green-700); }

/* Section heading */
.sd-h2 {
  font-size: var(--sd-text-h2);
  font-weight: var(--sd-weight-medium);
  line-height: var(--sd-leading-snug);
  letter-spacing: var(--sd-tracking-snug);
  color: var(--sd-ink);
  margin-bottom: var(--sd-space-2);
}
.sd-h2--light { color: var(--sd-white); }

/* Card heading */
.sd-h3 {
  font-size: var(--sd-text-h3);
  font-weight: var(--sd-weight-medium);
  color: var(--sd-ink);
  margin-bottom: var(--sd-space-2);
}

/* Section subheading / lead paragraph */
.sd-lead {
  font-size: var(--sd-text-base);
  color: var(--sd-muted);
  line-height: var(--sd-leading-relaxed);
  max-width: 560px;
  margin-bottom: var(--sd-space-8);
}
.sd-lead--light { color: rgba(255, 255, 255, 0.8); }


/* ============================================================
   LAYOUT
   ============================================================ */

/* Every section uses this padding. Do not vary. */
.sd-section {
  padding: var(--sd-space-18) var(--sd-gutter);
  border-bottom: 1px solid var(--sd-border-soft);
}

/* Section background variants */
.sd-section--white  { background: var(--sd-bg-white); }
.sd-section--mint   { background: var(--sd-bg-mint);   border-bottom-color: var(--sd-border); }
.sd-section--warm   { background: var(--sd-bg-warm);   border-bottom-color: #E8D080; }
.sd-section--blush  { background: var(--sd-bg-blush);  border-bottom-color: #F0C8B8; }
.sd-section--forest { background: var(--sd-bg-forest); border-bottom-color: #004D2C; }

/* Standard 3-column grid used by cards and mockup rows.
   minmax(0,1fr) is REQUIRED — prevents grid children overflowing. */
.sd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sd-space-4);
  align-items: start;
}

.sd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-space-5);
  align-items: start;
}

/* Split layout — copy left, visual right */
.sd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-16);
  align-items: center;
}


/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Card ---------- */
.sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-6);
  box-shadow: var(--sd-shadow-md);
}

/* Featured variant — used for the Platform card in Deployment */
.sd-card--featured {
  border: 2px solid var(--sd-green-600);
  background: linear-gradient(160deg, #F0FDF6 0%, #E0F8EC 100%);
}

/* ---------- Icon chip ---------- */
/* 44px rounded square holding an emoji or icon, sits above card heading */
.sd-icon-chip {
  width: 44px; height: 44px;
  border-radius: var(--sd-radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--sd-space-4);
}
.sd-icon-chip--green { background: linear-gradient(135deg, #D0F0DC, #A8E4C0); color: var(--sd-green-700); }
.sd-icon-chip--red   { background: linear-gradient(135deg, #FDEEF0, #F8CCD4); color: var(--sd-red-500); }
.sd-icon-chip--gold  { background: linear-gradient(135deg, #FFF3CC, #FFE080); color: #8A6000; }

/* ---------- Buttons ---------- */
.sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2);
  font-size: var(--sd-text-body);
  font-weight: var(--sd-weight-medium);
  padding: 12px 26px;
  border-radius: 9px;
  border: none;
  transition: opacity .15s ease;
}
.sd-btn:hover { opacity: .9; text-decoration: none; }

.sd-btn--primary {
  background: linear-gradient(135deg, var(--sd-green-600), var(--sd-green-700));
  color: var(--sd-white);
  box-shadow: var(--sd-shadow-btn);
}
.sd-btn--secondary {
  background: var(--sd-white);
  color: var(--sd-red-500);
  border: 2px solid var(--sd-red-500);
}
.sd-btn--ghost {
  background: transparent;
  color: var(--sd-muted);
  border: 1px solid var(--sd-border);
}
/* On the red CTA band */
.sd-btn--on-red {
  background: var(--sd-white);
  color: var(--sd-red-500);
}
.sd-btn--outline-white {
  background: transparent;
  color: var(--sd-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* ---------- Pill / badge ---------- */
.sd-pill {
  display: inline-flex; align-items: center; gap: var(--sd-space-1);
  font-size: var(--sd-text-3xs);
  font-weight: var(--sd-weight-medium);
  padding: 3px 10px;
  border-radius: var(--sd-radius-pill);
}
.sd-pill--green { background: var(--sd-green-100); color: #085041; border: 1px solid #9FE1CB; }
.sd-pill--gold  { background: var(--sd-gold-100);  color: #633806; border: 1px solid #E8C800; }
.sd-pill--red   { background: var(--sd-red-100);   color: var(--sd-red-700); border: 1px solid #F7C1C1; }
.sd-pill--blue  { background: #E6F1FB; color: #0C447C; border: 1px solid #B8D9F5; }

/* ---------- Stat block (WhatsApp section) ---------- */
.sd-stat {
  display: flex; align-items: flex-start; gap: var(--sd-space-4);
  padding: 18px 0;
  border-bottom: 1px solid var(--sd-border);
}
.sd-stat:first-child { border-top: 1px solid var(--sd-border); }
.sd-stat__num {
  font-size: 32px;
  font-weight: var(--sd-weight-bold);
  color: var(--sd-green-700);
  letter-spacing: -1.5px;
  line-height: 1;
  min-width: 88px;
}
.sd-stat__label  { font-size: var(--sd-text-sm); color: var(--sd-ink); line-height: 1.5; padding-top: 4px; }
.sd-stat__source { font-size: var(--sd-text-3xs); color: var(--sd-subtle); font-style: italic; margin-top: 3px; }

/* ---------- Browser mockup frame ---------- */
/* Wraps product screenshots to make them read as software */
.sd-browser {
  background: var(--sd-white);
  border: 1px solid var(--sd-border-2);
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
  box-shadow: var(--sd-shadow-lg);
  min-width: 0;              /* REQUIRED inside grid */
}
.sd-browser__chrome {
  background: var(--sd-surface-2);
  border-bottom: 1px solid #DDEEE5;
  padding: 7px 11px;
  display: flex; align-items: center; gap: 7px;
}
.sd-browser__dots { display: flex; gap: 4px; }
.sd-browser__dot  { width: 8px; height: 8px; border-radius: 50%; }
/* macOS traffic lights — exact colours */
.sd-browser__dot--red    { background: #FF5F57; }
.sd-browser__dot--yellow { background: #FEBC2E; }
.sd-browser__dot--green  { background: #28C840; }
.sd-browser__url {
  flex: 1; min-width: 0;
  background: var(--sd-white);
  border: 1px solid #DDEEE5;
  border-radius: 5px;
  padding: 3px 9px;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-3xs);
  color: #8AAA96;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-browser__caption {
  padding: 10px 12px;
  border-top: 1px solid var(--sd-green-050);
  font-size: var(--sd-text-2xs);
  color: var(--sd-muted);
  line-height: 1.5;
}
.sd-browser__caption strong { color: var(--sd-ink); }

/* ---------- Numbered step label (above mockups) ---------- */
.sd-step-label {
  display: flex; align-items: center; gap: var(--sd-space-2);
  font-size: var(--sd-text-3xs);
  font-weight: var(--sd-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-subtle);
  margin-bottom: var(--sd-space-2);
}
.sd-step-label__num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sd-green-700);
  color: var(--sd-white);
  font-size: var(--sd-text-3xs);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- Roadmap timeline ---------- */
.sd-timeline { position: relative; }
.sd-timeline__line {
  position: absolute; left: 16px; top: 16px; bottom: 16px;
  width: 2px; background: rgba(255, 255, 255, 0.2);
}
.sd-timeline__item { display: flex; gap: var(--sd-space-6); padding-bottom: var(--sd-space-6); }
.sd-timeline__dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
  font-size: var(--sd-text-body); font-weight: var(--sd-weight-bold);
}
.sd-timeline__dot--done    { background: var(--sd-white); border: 2px solid var(--sd-white); color: var(--sd-green-700); }
.sd-timeline__dot--active  { background: transparent; border: 2px solid rgba(255,255,255,.7); color: var(--sd-white); }
.sd-timeline__dot--planned { background: transparent; border: 2px solid rgba(255,255,255,.25); color: rgba(255,255,255,.4); }


/* ============================================================
   RESPONSIVE
   The mockup is desktop-first at 1200px.
   These breakpoints are the DEVELOPER'S starting point —
   confirm behaviour with the design team before building.
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root { --sd-gutter: 32px; --sd-text-hero: 30px; --sd-text-h2: 22px; }
  .sd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-split  { grid-template-columns: 1fr; gap: var(--sd-space-8); }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --sd-gutter: 20px; --sd-text-hero: 26px; --sd-text-h2: 20px; --sd-space-18: 48px; }
  .sd-grid-3, .sd-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .sd-stat__num { font-size: 26px; min-width: 70px; }

  /* Three-across browser mockup rows become a horizontal scroller.
     Each frame keeps a fixed width so the UI inside stays legible. */
  .sd-grid-3--mockups {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sd-space-4);
    -webkit-overflow-scrolling: touch;
  }
  .sd-grid-3--mockups > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}