/* ===========================================================================
   Cotento — one stylesheet, no framework, no build step.
   Brand rules are enforced HERE so they can be checked by reading this file.

   PALETTE (brand.md, locked 2026-10-02)
     Ink   #121212  the default ground, ~80% of every layout
     Aqua  #3FD7C9  THE SIGNAL. Dark grounds only. One per surface. ~10%
     Deep  #12766E  the signal on a light ground (4.65:1 on Mist, AA body)
     Mist  #EDEDE8  the light reading canvas, ~10%
     Soot  #1E1E1D  raised surfaces on Ink

   HARD RULE: Aqua never carries text or a stroke on a light ground (1.52:1).
   On Mist the signal is ALWAYS Deep Aqua. Bright Aqua on light is permitted
   only as a FILL (block, badge, rule). There is no `.on-mist` rule below that
   sets `color: var(--aqua)` — that is deliberate, do not add one.
   =========================================================================== */

@font-face{
  font-family:Figtree;
  src:url(assets/fonts/figtree-var.woff2) format('woff2-variations'),
      url(assets/fonts/figtree-var.woff2) format('woff2');
  font-weight:500 900;      /* 500 body · 800 headings · 900 display. Nothing between. */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url(assets/fonts/jetbrainsmono-700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --ink:#121212;
  --aqua:#3FD7C9;
  --deep:#12766E;
  --mist:#EDEDE8;
  --soot:#1E1E1D;

  /* the only derived values permitted (brand.md) */
  --aqua-70:#72E1D7;
  --deep-140:#0C5751;

  /* neutrals, lifted from the signed-off mock-ups */
  /* Neutrals. Every one of these is MEASURED against the ground it sits on and
     clears WCAG AA (4.5:1) for body text. The mock-ups' print tones did not:
     #79736C was 3.99:1 on Mist and #6E6E68 was 3.65:1 on Ink. Tuned here.
     NOTE: on a light ground there is only ONE muted tier. A second, fainter
     one cannot clear AA, so the small labels separate themselves with
     uppercase + tracking instead of with less contrast. */
  --on-ink-muted:#A8A8A2;    /* 7.84:1 on Ink, 6.98:1 on Soot */
  --on-ink-faint:#7F7F79;    /* 4.65:1 on Ink */
  --on-ink-place:#878781;    /* 5.19:1 on Ink, 4.62:1 on Soot — input placeholders */
  --on-ink-line:#2C2C2A;
  --on-ink-line-2:#3C3C39;
  --on-mist-muted:#6F6962;   /* 4.62:1 on Mist, 5.00:1 on Paper */
  --on-mist-faint:#6F6962;   /* same tier, deliberately */
  --on-mist-line:rgba(18,18,18,.14);
  --paper:#F6F6F2;

  --wrap:1120px;
  --gut:clamp(20px,5vw,56px);
  --band:clamp(64px,8vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:Figtree,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:inherit}

/* ---------- layout ------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.band{padding:var(--band) 0;position:relative;overflow:hidden}
.band--ink{background:var(--ink);color:var(--mist)}
.band--mist{background:var(--mist);color:var(--ink)}
.band--tight{padding-top:clamp(40px,5vw,64px)}
.band--mist + .band--mist{padding-top:0}
.measure{max-width:60ch}
.measure-s{max-width:46ch}

/* ---------- type --------------------------------------------------------- */
.display{
  font-weight:900;letter-spacing:-.042em;line-height:1.02;margin:0;
  font-size:clamp(40px,7.2vw,76px);
}
h1{font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:0;font-size:clamp(34px,5.4vw,56px)}
h2{font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0;font-size:clamp(26px,3.4vw,38px)}
h3{font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0;font-size:clamp(19px,2vw,23px)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6}
.band--ink .lead,.band--ink .body-muted{color:var(--on-ink-muted)}
.band--mist .lead,.band--mist .body-muted{color:var(--on-mist-muted)}

/* eyebrow / caption — brand.md: 700, +0.18em, uppercase */
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 14px;
}
.band--ink .eyebrow{color:var(--aqua)}      /* signal on dark: bright Aqua */
.band--mist .eyebrow{color:var(--deep)}     /* signal on light: Deep Aqua. NEVER --aqua. */

.fig{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;letter-spacing:-.02em}
.excl{font-size:.62em;font-weight:700;letter-spacing:.04em;opacity:.7;text-transform:lowercase}

/* the short rule — the Deep Aqua signal above a heading on Mist */
.rule{height:3px;width:34px;border-radius:2px;background:var(--deep);margin:0 0 20px}
.band--ink .rule{background:var(--aqua)}

/* ---------- the arc device ------------------------------------------------
   The ONLY permitted background motif is the mark's own arc, enlarged:
   same radius ratio, same round cap. Never any other shape.            */
.arc{position:absolute;pointer-events:none;z-index:0;overflow:visible}
.arc path{fill:none;stroke-linecap:round;stroke-width:18}
.arc--aqua path{stroke:var(--aqua)}
.arc--deep path{stroke:var(--deep)}
.band > .wrap{position:relative;z-index:1}

/* named arc placements — every arc on the site uses one of these.
   Inline <style> blocks are banned: a rule like `.band--ink .arc{...}` leaks
   onto every other arc on the page. */
.arc--cta{right:-12%;bottom:-40%;width:min(640px,78vw);opacity:.13}
.arc--approve{right:-14%;bottom:-44%;width:min(620px,80vw);opacity:.13}
.arc--form{left:-16%;bottom:-46%;width:min(560px,74vw);opacity:.11}

/* the arc draws in on entry: 600ms ease-out (brand.md motion) */
.arc path{stroke-dasharray:300;stroke-dashoffset:300;animation:arc-draw .6s ease-out .1s forwards}
@keyframes arc-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .arc path{animation:none;stroke-dashoffset:0}
}

/* ---------- buttons ------------------------------------------------------
   One signal per surface. `.btn--signal` is the aqua fill and there is never
   more than one of it visible at a time. `.btn--ghost` is the companion.  */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:12px 24px;border-radius:7px;
  font:inherit;font-weight:800;font-size:16px;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--signal{background:var(--aqua);color:var(--ink)}
.btn--signal:hover{background:var(--aqua-70)}
.btn--ghost{border-color:var(--on-ink-line-2);color:var(--mist);background:transparent}
.btn--ghost:hover{border-color:var(--mist)}
.band--mist .btn--ghost{border-color:rgba(18,18,18,.22);color:var(--ink)}
.band--mist .btn--ghost:hover{border-color:var(--ink)}
/* On a light ground a solid action is INK, not aqua — aqua would fail on Mist. */
.band--mist .btn--signal{background:var(--ink);color:var(--mist)}
.band--mist .btn--signal:hover{background:#000}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* text link */
.link{
  font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:.45em;
  border-bottom:2px solid transparent;padding-bottom:1px;
}
.band--ink .link{color:var(--aqua)}
.band--mist .link{color:var(--deep)}
.link:hover{border-bottom-color:currentColor}

/* focus — always visible, on-palette, never removed */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--aqua);outline-offset:3px;border-radius:4px;
}
.band--mist a:focus-visible,.band--mist button:focus-visible,
.band--mist input:focus-visible,.band--mist textarea:focus-visible,
.band--mist summary:focus-visible{outline-color:var(--deep)}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--gut);top:12px;z-index:60;background:var(--aqua);color:var(--ink);
  padding:10px 16px;border-radius:6px;font-weight:800}

/* ---------- header ------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.site-head[data-scrolled]{border-bottom-color:var(--on-ink-line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:76px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:30px;height:30px}
.brand-word{font-weight:900;font-size:25px;letter-spacing:-.035em;line-height:.95;color:var(--mist)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font-size:15px;font-weight:700;color:var(--on-ink-muted);text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--mist)}
.nav .btn{min-height:44px;padding:10px 18px;font-size:15px}

/* ONE SIGNAL: while the hero's own aqua CTA is on screen the nav CTA is a
   ghost. Once the hero scrolls past, the nav CTA becomes the aqua fill. So
   exactly one aqua action is visible at any scroll position. */
.nav-cta{border-color:var(--on-ink-line-2);color:var(--mist);background:transparent}
.site-head[data-cta=signal] .nav-cta{background:var(--aqua);color:var(--ink);border-color:var(--aqua)}

.nav-toggle{display:none}
@media (max-width:860px){
  .nav a:not(.btn){display:none}
  .nav-links-m{display:flex;gap:18px;overflow-x:auto;padding:0 var(--gut) 14px;
    max-width:var(--wrap);margin:0 auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-links-m::-webkit-scrollbar{display:none}
  .nav-links-m a{font-size:14px;font-weight:700;color:var(--on-ink-muted);text-decoration:none;white-space:nowrap}
  .nav-links-m a[aria-current=page]{color:var(--mist)}
}
@media (min-width:861px){.nav-links-m{display:none}}

/* ---------- hero --------------------------------------------------------- */
.hero{padding:clamp(56px,8vw,112px) 0 clamp(64px,9vw,120px)}
.hero .arc{right:-14%;top:4%;width:min(760px,88vw);opacity:.13}
.hero .display{margin-top:4px}
.hero .lead{margin-top:20px;max-width:46ch}

/* ---------- cards -------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--on-mist-line);border-radius:10px;
  padding:clamp(20px,2.2vw,28px);
}
.card h3{margin:16px 0 8px}
.card p{color:var(--on-mist-muted);font-size:16px}
.band--ink .card{background:var(--soot);border-color:var(--on-ink-line)}
.band--ink .card p{color:var(--on-ink-muted)}

/* numbered steps */
.steps{display:grid;gap:clamp(20px,2.4vw,30px);grid-template-columns:repeat(4,1fr);margin-top:40px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;
  font-size:30px;letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.band--ink .step-n{color:rgba(237,237,232,.4)}   /* Mist 40% = 3.46:1, clears 3:1 for large text */
.band--mist .step-n{color:rgba(18,18,18,.52)}  /* .32 was 2.05:1 and failed */
.step h3{font-size:19px;margin:0 0 8px}
.step p{font-size:16px}
.band--ink .step p{color:var(--on-ink-muted)}
.band--mist .step p{color:var(--on-mist-muted)}
.need{font-size:14px;font-weight:700;margin-top:10px}
.band--mist .need{color:var(--deep)}
.band--ink .need{color:var(--aqua)}

/* ---------- case cards --------------------------------------------------- */
.cases{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:44px}
@media (max-width:960px){.cases{grid-template-columns:1fr}}
.case{background:var(--paper);border:1px solid var(--on-mist-line);border-radius:10px;overflow:hidden}
/* The card header is an Ink -> Aqua duotone field carrying the arc motif.
   There is no photography on this site yet; when a photograph replaces this
   panel it must ALREADY be an Ink->Aqua duotone (brand.md, no exceptions). */
.case-head{height:120px;position:relative;overflow:hidden;
  background:linear-gradient(118deg,var(--ink) 0%,#0f3b37 42%,var(--deep) 72%,var(--aqua) 142%)}
.case-head .arc{left:-7%;bottom:-54%;width:114%;opacity:.24}
.case-head .arc path{stroke:var(--mist)}
.case-body{padding:20px}
.case-body .eyebrow{font-size:11px;margin-bottom:8px}
.case-body h3{font-size:21px;letter-spacing:-.032em;line-height:1.14}
.case-figs{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:18px}
.case-figs > div{min-width:0}
.case-figs .n{font-size:30px;font-weight:700;color:var(--deep);letter-spacing:-.03em;line-height:1;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.case-figs .l{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-mist-faint);margin-top:6px}

/* ---------- pricing ------------------------------------------------------ */
.plans{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:44px;align-items:start}
@media (max-width:960px){.plans{grid-template-columns:1fr}}
.plan{background:var(--paper);border:1px solid var(--on-mist-line);border-radius:11px;
  padding:clamp(22px,2.4vw,30px);color:var(--ink)}
/* The recommended plan is the only INK card on the page — signed-off mock. */
.plan--hero{background:var(--ink);color:var(--mist);border-color:var(--ink)}
.plan-name{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.plan--hero .plan-name{color:var(--aqua)}
.plan-price{font-size:clamp(34px,3.6vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1;margin:12px 0 2px}
.plan-per{font-size:14px;font-weight:700;color:var(--on-mist-faint)}
.plan--hero .plan-per{color:var(--on-ink-faint)}
.plan-for{font-size:15px;margin:16px 0 0;color:var(--on-mist-muted)}
.plan--hero .plan-for{color:var(--on-ink-muted)}
.plan ul{list-style:none;margin:18px 0 0;padding:0}
.plan li{font-size:16px;padding:7px 0 7px 26px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:3px;
  border-radius:2px;background:var(--deep)}
.plan--hero li::before{background:var(--aqua)}
.plan-flag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:var(--aqua);color:var(--ink);
  padding:5px 10px;border-radius:5px;margin-bottom:16px;min-height:25px}
/* every card reserves the slot, so R4 500 / R8 900 / R14 500 sit on one line */
.plan-flag--empty{background:transparent;color:transparent;padding-left:0;padding-right:0}
@media (max-width:960px){.plan-flag--empty{display:none}}

.ticks{list-style:none;margin:28px 0 0;padding:0;columns:2;column-gap:40px}
@media (max-width:720px){.ticks{columns:1}}
.ticks li{font-size:16px;padding:8px 0 8px 26px;position:relative;break-inside:avoid}
.ticks li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:3px;
  border-radius:2px;background:var(--deep)}
.plain{list-style:none;margin:28px 0 0;padding:0;max-width:64ch}
.plain li{font-size:16px;padding:9px 0;border-top:1px solid var(--on-mist-line);color:var(--on-mist-muted)}
.plain li:last-child{border-bottom:1px solid var(--on-mist-line)}

/* ---------- FAQ ---------------------------------------------------------- */
.faq{margin-top:40px;max-width:76ch}
.faq details{border-top:1px solid var(--on-mist-line)}
.faq details:last-of-type{border-bottom:1px solid var(--on-mist-line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font-weight:800;font-size:clamp(17px,1.7vw,19px);letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;margin-top:.5em;
  width:15px;height:3px;border-radius:2px;background:currentColor;opacity:.5;
  transition:opacity .15s ease,width .2s ease;
}
.faq details[open] summary{color:var(--deep)}          /* Deep Aqua on the open marker */
.faq details[open] summary::after{opacity:1;width:22px}
.faq .a{padding:0 0 22px;color:var(--on-mist-muted);max-width:64ch}

/* ---------- capture bar (HELD BACK — decision D5, not rendered) ---------- */
.capture{background:var(--aqua);color:var(--ink);border-radius:11px;
  padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}

/* ---------- the form ----------------------------------------------------- */
.form-card{background:var(--soot);border:1px solid var(--on-ink-line);border-radius:12px;
  padding:clamp(22px,3vw,36px);max-width:620px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:800;letter-spacing:.02em;margin-bottom:7px}
.field .hint{font-weight:500;color:var(--on-ink-muted);letter-spacing:0}
input,textarea{
  width:100%;font:inherit;font-size:16px;font-weight:500;color:var(--mist);
  background:var(--ink);border:1px solid var(--on-ink-line-2);border-radius:7px;
  padding:13px 15px;min-height:48px;
}
textarea{min-height:92px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--on-ink-place)}
input:hover,textarea:hover{border-color:#4A4A46}
.form-note{font-size:15px;color:var(--on-ink-muted);margin-top:18px;max-width:52ch}
.err{font-size:14px;font-weight:700;color:var(--aqua);margin-top:8px;display:none}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--aqua)}
.field[data-invalid] .err{display:block}

/* ---------- long-form reading (privacy) ---------------------------------- */
.prose{max-width:72ch}
.prose h2{margin:44px 0 14px;font-size:clamp(22px,2.4vw,27px)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--on-mist-muted);font-size:16.5px}
.prose a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:7px}

/* ---------- 404 ---------------------------------------------------------- */
.e404{min-height:72vh;display:flex;align-items:center}
.e404 > .wrap{width:100%}
.e404 .arc{right:-10%;bottom:-24%;width:min(620px,80vw);opacity:.2}
.e404 .code{font-weight:900;font-size:clamp(78px,16vw,180px);line-height:.9;
  letter-spacing:-.05em;margin:0}

/* ---------- footer ------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--mist);padding:clamp(48px,6vw,76px) 0 36px;
  border-top:1px solid var(--on-ink-line)}
.foot-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px 28px}
.foot-nav a{font-size:15px;font-weight:700;color:var(--on-ink-muted);text-decoration:none}
.foot-nav a:hover{color:var(--mist)}
.foot-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-top:44px}
.legal{font-size:14px;color:var(--on-ink-faint);line-height:1.7}
/* the footer's ONE signal is the short aqua rule. No aqua button down here. */
.foot-rule{height:3px;width:40px;border-radius:2px;background:var(--aqua);flex:0 0 auto}