/* ═══════════════════════════════════════════════════════════
   VulaPhumelela — implements DESIGN.md
   Tokens first. Nothing below the token block invents a value.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* neutral ramp */
  --void:#08090a; --carbon:#0f1011; --obsidian:#161718;
  --graphite:#23252a; --smoke:#383b3f; --ash:#62666d;
  --fog:#8a8f98; --mist:#d0d6e0; --bone:#e5e5e6; --paper:#fff;

  /* accent — one, and only one */
  --gold:#FFB000; --gold-dim:#C88A00; --gold-ghost:rgba(255,176,0,.10);

  /* type */
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* space — 4px base, compact density */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --s24:96px; --s32:128px; --s40:160px;

  /* shape */
  --r-badge:4px; --r-ctl:6px; --r-card:12px; --r-pill:9999px;
  --ring:inset 0 0 0 1px var(--graphite);
  --shadow-xl:rgba(8,9,10,.6) 0 4px 32px 0;

  /* motion */
  --micro:120ms cubic-bezier(.4,0,.2,1);
  --enter:520ms cubic-bezier(.16,1,.3,1);

  /* layout */
  --max:1140px; --gutter:20px; --rhythm:88px;
}
@media (min-width:860px){ :root{ --gutter:32px; --rhythm:140px; } }

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
svg{display:block; max-width:100%}
button,input,textarea,select{font:inherit; color:inherit}
ul,ol{list-style:none; padding:0}
a{color:inherit; text-decoration:none}

body{
  background:var(--void); color:var(--mist);
  font-family:var(--sans); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:100;
  background:var(--gold); color:var(--void);
  padding:var(--s3) var(--s4); border-radius:var(--r-ctl);
  font-size:14px; font-weight:500; transition:top var(--micro);
}
.skip:focus{top:var(--s4)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ── typography ──────────────────────────────────────────── */
h1,h2,h3,h4{
  font-weight:500; color:var(--paper);
  letter-spacing:-.018em; line-height:1.14; text-wrap:balance;
}
h1{font-size:clamp(32px,5.4vw,52px); line-height:1.06; letter-spacing:-.021em}
h2{font-size:clamp(25px,3.6vw,38px); letter-spacing:-.018em}
h3{font-size:19px; letter-spacing:-.012em; line-height:1.3}
h4{font-size:16px; letter-spacing:-.008em}
p{text-wrap:pretty}
strong{font-weight:500; color:var(--paper)}

/* --ash is permitted only at 24px+, where the AA floor drops to 3:1 */
.muted{color:var(--ash)}

.metric{
  font-family:var(--mono); font-size:13px; font-weight:400;
  letter-spacing:-.01em; color:var(--fog); font-variant-numeric:tabular-nums;
}

.eyebrow{
  display:flex; align-items:center; gap:var(--s2);
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fog);
  margin-bottom:var(--s5);
}
.dot{width:6px; height:6px; background:var(--gold); flex:none}

.lede{font-size:clamp(17px,1.9vw,19px); line-height:1.55; color:var(--mist); max-width:62ch; letter-spacing:-.003em}
.sub{color:var(--fog); max-width:64ch; margin-top:var(--s4)}
.body-copy{color:var(--fog); max-width:66ch}
.body-copy + .body-copy{margin-top:var(--s4)}
.aside{color:var(--fog); font-size:15px; max-width:66ch; margin-top:var(--s8)}

/* ── layout ──────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}
.section{padding-block:var(--rhythm)}
.section--alt{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.014) 12%,rgba(255,255,255,.014) 88%,transparent);
  border-block:1px solid var(--graphite);
}
.shead{margin-bottom:var(--s12)}
.shead--center{text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead--center .sub{margin-inline:auto}

.grid{display:grid; gap:var(--s4)}
@media (min-width:720px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
.row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s8)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:11px 18px; border-radius:var(--r-ctl); min-height:44px;
  font-size:15px; font-weight:500; letter-spacing:-.006em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--micro), border-color var(--micro), color var(--micro), transform var(--micro);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:8px 14px; font-size:14px}
.btn--primary{background:var(--gold); color:var(--void)}
.btn--primary:hover{background:var(--gold-dim)}
.btn--ghost{background:transparent; border-color:var(--graphite); color:var(--mist)}
.btn--ghost:hover{border-color:var(--smoke); background:rgba(255,255,255,.03)}

/* ── announcement bar ────────────────────────────────────── */
.annc{
  background:var(--carbon); border-bottom:1px solid var(--graphite);
  padding:8px var(--gutter); text-align:center;
}
.annc p{font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--fog); letter-spacing:-.01em}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,9,10,.74); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--micro), background var(--micro);
}
.nav.is-stuck{border-bottom-color:var(--graphite); background:rgba(8,9,10,.92)}
.nav__inner{
  max-width:var(--max); margin-inline:auto; padding:var(--s3) var(--gutter);
  display:flex; align-items:center; gap:var(--s5);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--paper); margin-right:auto}
.brand__mark{width:26px; height:26px; flex:none}
.brand__word{font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap}

.nav__links{display:none; gap:var(--s5)}
.nav__links a{font-size:14px; color:var(--fog); white-space:nowrap; transition:color var(--micro)}
.nav__links a:hover{color:var(--paper)}

.nav__tel{display:none; color:var(--fog); white-space:nowrap; transition:color var(--micro)}
.nav__tel:hover{color:var(--paper)}

.nav__cta{display:inline-flex}

.nav__toggle{
  width:44px; height:44px; background:none; border:1px solid var(--graphite);
  border-radius:var(--r-ctl); display:grid; place-content:center; gap:5px; cursor:pointer;
}
.nav__toggle span{display:block; width:15px; height:1.5px; background:var(--mist); transition:transform var(--micro)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.nav__mobile{display:grid; border-top:1px solid var(--graphite); padding:var(--s2) var(--gutter) var(--s5)}
.nav__mobile[hidden]{display:none}
.nav__mobile a{padding:var(--s3) 0; font-size:16px; color:var(--mist); border-bottom:1px solid var(--graphite)}
.nav__mobile a:last-child{border:0}

/* Declared after the blocks above so the later rule wins at desktop width. */
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__tel{display:inline-block}
  .nav__toggle{display:none}
  .nav__mobile{display:none}
}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding-block:clamp(40px,7vw,80px) 0}
.hero__h{max-width:19ch}
.hero .lede{margin-top:var(--s5)}
.hero__support{color:var(--fog); max-width:64ch; margin-top:var(--s4); font-size:16px}
.hero__note{
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--graphite);
  max-width:62ch;
}
.hero__note p + p{margin-top:var(--s2)}
.hero__rule{height:var(--rhythm)}

/* ── flow diagram ────────────────────────────────────────── */
.flow{
  margin-top:var(--s12); padding:var(--s8) var(--s5);
  background:var(--carbon); border-radius:var(--r-card); box-shadow:var(--ring);
}
.flow__track{display:grid; gap:var(--s3)}
.flow__step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  align-items:start; position:relative;
}
.flow__icon{
  width:40px; height:40px; border-radius:var(--r-ctl);
  background:var(--obsidian); box-shadow:var(--ring);
  display:grid; place-content:center; flex:none;
}
.flow__icon svg{width:20px; height:20px}
.flow__label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fog); margin-bottom:3px}
.flow__name{font-size:15px; color:var(--paper); font-weight:500; letter-spacing:-.008em}
.flow__link{width:1px; background:var(--graphite); height:var(--s5); margin-left:19px}
.flow__link i{display:block; width:1px; height:100%; background:var(--gold); opacity:.55}

@media (min-width:820px){
  .flow__track{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:var(--s4)}
  .flow__step{grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--s3)}
  .flow__link{width:100%; height:1px; margin:0}
  .flow__link i{width:100%; height:1px}
}

/* ── pain list — dots, deliberately not ticks ────────────── */
.dots{display:grid; gap:var(--s3)}
.dots li{position:relative; padding-left:var(--s6); font-size:15px; color:var(--fog)}
.dots li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:6px; height:6px; background:var(--gold); opacity:.85;
}

/* ── can / cannot lists ──────────────────────────────────── */
.can li,.cannot li{position:relative; padding-left:var(--s6); font-size:15px; color:var(--fog)}
.can,.cannot{display:grid; gap:var(--s3)}
.can li::before{
  content:''; position:absolute; left:1px; top:8px;
  width:8px; height:8px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.cannot li::before{
  content:''; position:absolute; left:1px; top:12px;
  width:9px; height:1.5px; background:var(--fog);
}

/* ── cards ───────────────────────────────────────────────── */
.card{
  background:var(--carbon); border-radius:var(--r-card);
  box-shadow:var(--ring); padding:var(--s6);
  transition:box-shadow var(--micro);
}
.card:hover{box-shadow:inset 0 0 0 1px var(--smoke)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--fog); font-size:15px}
.card__n{display:block; font-family:var(--mono); font-size:13px; color:var(--fog); margin-bottom:var(--s4)}

/* ── callout ─────────────────────────────────────────────── */
.callout{
  background:var(--carbon); border-left:2px solid var(--gold);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0;
  padding:var(--s5) var(--s6); margin-top:var(--s8); max-width:70ch;
}
.callout p{color:var(--mist); font-size:15px}

/* ── steps ───────────────────────────────────────────────── */
.steps{display:grid}
.step{display:grid; gap:var(--s2) var(--s6); padding-block:var(--s6); border-top:1px solid var(--graphite)}
.step:last-child{border-bottom:1px solid var(--graphite)}
.step__n{font-family:var(--mono); font-size:13px; color:var(--fog)}
.step p{color:var(--fog); max-width:62ch; font-size:15px}
@media (min-width:720px){
  .step{grid-template-columns:56px 1fr; align-items:baseline}
  .step p{grid-column:2}
}

/* ── demo placeholder ────────────────────────────────────── */
.demo{
  background:var(--carbon); border-radius:var(--r-card);
  box-shadow:var(--ring); overflow:hidden;
}
.demo__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; padding:var(--s3) var(--s5);
  background:var(--obsidian); border-bottom:1px solid var(--graphite);
}
.demo__body{padding:var(--s10) var(--s5); text-align:center}
@media (min-width:720px){ .demo__body{padding:var(--s12) var(--s10)} }
.demo__wave{display:flex; align-items:center; justify-content:center; gap:3px; height:36px; margin-bottom:var(--s6)}
.demo__wave span{width:2px; background:var(--smoke); border-radius:1px}
.demo__body p{color:var(--fog); max-width:56ch; margin:0 auto var(--s6); font-size:15px}

/* ── example summary card ────────────────────────────────── */
.summary{
  background:var(--void); border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--smoke); overflow:hidden; max-width:560px;
}
.summary__top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s5); background:var(--gold-ghost);
  border-bottom:1px solid var(--graphite);
}
.summary__tag{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
}
.summary__body{padding:var(--s5)}
.summary__title{font-size:16px; color:var(--paper); font-weight:500; margin-bottom:var(--s4)}
.summary__rows{display:grid; gap:var(--s3)}
.summary__row{display:grid; gap:2px}
@media (min-width:520px){ .summary__row{grid-template-columns:140px 1fr; gap:var(--s4); align-items:baseline} }
.summary__row dt{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fog)}
.summary__row dd{font-size:15px; color:var(--mist)}
.summary__foot{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--graphite);
  font-family:var(--mono); font-size:12px; color:var(--fog);
}

/* ── pricing ─────────────────────────────────────────────── */
.price{background:var(--carbon); border-radius:var(--r-card); box-shadow:var(--ring); padding:var(--s8) var(--s6)}
.price__fig{font-size:clamp(28px,4vw,38px); font-weight:500; color:var(--paper); letter-spacing:-.022em; line-height:1.15}
.price__total{display:block; font-family:var(--mono); font-size:15px; color:var(--gold); margin-top:var(--s3)}
.price__hr{height:1px; background:var(--graphite); margin-block:var(--s6)}
.price__scope{
  background:var(--obsidian); border-radius:var(--r-ctl);
  padding:var(--s5); margin-top:var(--s6); box-shadow:var(--ring);
}
.price__scope p{color:var(--mist); font-size:15px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--graphite)}
.faq details:last-child{border-bottom:1px solid var(--graphite)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; gap:var(--s5);
  align-items:center; justify-content:space-between;
  padding-block:var(--s5); min-height:44px;
  font-size:16px; font-weight:500; color:var(--paper); letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:var(--mono); font-size:18px; color:var(--gold); flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding-bottom:var(--s6); color:var(--fog); font-size:15px; max-width:68ch}

/* ── forms ───────────────────────────────────────────────── */
.form{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:720px){ .form{grid-template-columns:1fr 1fr} .field--full{grid-column:1/-1} }
.field{display:grid; gap:var(--s2)}
.field label{font-size:14px; color:var(--mist)}
.opt{color:var(--fog); font-size:12px}
.field input,.field textarea,.field select{
  background:var(--obsidian); border:1px solid var(--graphite);
  border-radius:var(--r-ctl); padding:11px 14px; min-height:44px;
  font-size:15px; color:var(--paper); resize:vertical;
  transition:border-color var(--micro), background-color var(--micro);
}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fog) 50%),
                   linear-gradient(135deg,var(--fog) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--smoke)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold); background-color:var(--void)}

.consent{display:flex; gap:var(--s3); align-items:flex-start; padding-block:var(--s2)}
.consent input{
  width:24px; height:24px; min-height:24px; flex:none; margin-top:1px;
  accent-color:var(--gold); cursor:pointer;
}
.consent label{font-size:14px; color:var(--fog); line-height:1.5; cursor:pointer}

.form__foot{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s2)}
.form__foot a{color:var(--mist); border-bottom:1px solid var(--smoke)}
.form__foot a:hover{color:var(--gold); border-color:var(--gold)}

/* ── prose (legal pages) ─────────────────────────────────── */
.prose{max-width:70ch}
.prose h2{font-size:22px; margin-top:var(--s10); margin-bottom:var(--s4)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--fog); font-size:15px}
.prose p + p{margin-top:var(--s4)}
.prose ul{display:grid; gap:var(--s2); margin-top:var(--s4)}
.prose li{position:relative; padding-left:var(--s6); color:var(--fog); font-size:15px}
.prose li::before{content:''; position:absolute; left:2px; top:9px; width:6px; height:6px; background:var(--gold); opacity:.85}
.prose a{color:var(--mist); border-bottom:1px solid var(--smoke)}
.prose a:hover{color:var(--gold); border-color:var(--gold)}

/* ── closing CTA ─────────────────────────────────────────── */
.cta{
  background:var(--carbon); border-radius:var(--r-card); box-shadow:var(--ring);
  padding:var(--s12) var(--s6); text-align:center;
}
.cta h2{margin-bottom:var(--s4)}
.cta p{color:var(--fog); max-width:54ch; margin:0 auto var(--s8)}
.cta .row{justify-content:center}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--graphite); padding-top:var(--s12); margin-top:var(--rhythm)}
.foot__inner{display:flex; flex-wrap:wrap; gap:var(--s10) var(--s16); justify-content:space-between; padding-bottom:var(--s10)}
.foot__brand{display:grid; gap:var(--s3); align-content:start; color:var(--paper); max-width:34ch}
.foot__cols{display:flex; flex-wrap:wrap; gap:var(--s10) var(--s16)}
.foot__col{display:grid; gap:var(--s1); align-content:start}
.foot__col h4{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--fog);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--s2);
}
.foot__col a{font-size:14px; color:var(--mist); padding-block:7px; transition:color var(--micro)}
.foot__col a:hover{color:var(--gold)}
.foot__disc{
  padding-block:var(--s6); border-top:1px solid var(--graphite);
  color:var(--fog); font-size:13px; max-width:80ch;
}
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3);
  padding-block:var(--s5); border-top:1px solid var(--graphite);
}

/* ── floating WhatsApp button ────────────────────────────────
   #25D366 is WhatsApp's own brand colour and the single documented
   exception to the one-accent rule. See DESIGN.md section 2. */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:52px; height:52px; border-radius:var(--r-pill);
  background:#25D366; display:grid; place-content:center;
  box-shadow:var(--shadow-xl);
  transition:transform var(--micro);
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px; height:28px}
.wa__tip{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--carbon); color:var(--mist); box-shadow:var(--ring);
  border-radius:var(--r-ctl); padding:8px; white-space:nowrap;
  font-family:var(--mono); font-size:12px;
  opacity:0; pointer-events:none; transition:opacity var(--micro);
}
.wa:hover .wa__tip,.wa:focus-visible .wa__tip{opacity:1}
@media (min-width:860px){ .wa{right:24px; bottom:24px} }

/* Keep the floating button clear of content on small screens. */
@media (max-width:720px){ main{padding-bottom:84px} }

/* ── entrance animation ──────────────────────────────────────
   Opt-in via the .js class. Content is visible by default so a
   script failure, JS off, or a link-preview bot still sees a page. */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.js .reveal{opacity:0}
.js .reveal.is-in{animation:rise var(--enter) both}
.js .reveal[data-d="1"].is-in{animation-delay:60ms}
.js .reveal[data-d="2"].is-in{animation-delay:120ms}
.js .reveal[data-d="3"].is-in{animation-delay:180ms}
.js .reveal[data-d="4"].is-in{animation-delay:240ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .js .reveal{opacity:1!important; transform:none!important; animation:none!important}
  .wa:hover{transform:none}
}

/* ── mobile hero order ───────────────────────────────────────
   On a phone the supporting paragraph pushed the primary CTA to
   738px — above the fold only on a browser with no chrome. Below
   720px the CTA moves up directly under the lede and the detail
   follows it. Desktop keeps the written order. */
@media (max-width:720px){
  .hero > .wrap{display:flex; flex-direction:column}
  .hero .eyebrow{order:1}
  .hero__h{order:2}
  .hero .lede{order:3}
  .hero .row{order:4; margin-top:var(--s6)}
  .hero__support{order:5; margin-top:var(--s6)}
  .hero__note{order:6}
  .flow{order:7}
}