/* JIT-PATHS — idea 2 Business (Pty) Ltd
   One stylesheet for the whole site. British English throughout. */

:root{
  --ink:#0D1B2A;
  --ink-2:#152A3F;
  --paper:#FFFFFF;
  --paper-2:#F5F7F9;
  --paper-3:#EAEFF3;
  --teal:#1F6F78;
  --teal-lt:#2E8C96;
  --teal-pale:#E8F1F2;
  --amber:#A96B14;
  --amber-pale:#FBF3E6;
  --text:#16212E;
  --muted:#5A6B7C;
  --line:#DCE3E9;
  --line-dk:rgba(255,255,255,0.14);
  --max:1120px;
  --r:8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--teal);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1.18;font-weight:700;letter-spacing:-0.015em;color:var(--ink);}
h1{font-size:clamp(34px,5.2vw,54px);}
h2{font-size:clamp(26px,3.4vw,36px);}
h3{font-size:clamp(19px,2.1vw,22px);}
p{margin:0 0 1em;}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--muted);}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px;display:block;
}
.eyebrow.on-dark{color:#7FC4CB;}
.small{font-size:14px;color:var(--muted);}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px;}
.brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;}
.brand b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;}
.brand span{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center;}
.nav-links a{font-size:14.5px;color:var(--text);text-decoration:none;font-weight:500;}
.nav-links a:hover{color:var(--teal);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px;cursor:pointer;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-size:15px;font-weight:600;text-decoration:none;
  padding:13px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-lt);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-on-dark{background:#fff;color:var(--ink);}
.btn-on-dark:hover{background:var(--paper-3);}
.btn-ghost-dark{background:transparent;color:#fff;border-color:var(--line-dk);}
.btn-ghost-dark:hover{border-color:#fff;}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}

/* ---------- sections ---------- */
section{padding:78px 0;}
section.tight{padding:56px 0;}
.bg-2{background:var(--paper-2);}
.bg-3{background:var(--paper-3);}
.bg-dark{background:var(--ink);color:#E7EDF3;}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:#fff;}
.bg-dark .lede{color:#AFC0D0;}
.bg-dark .small{color:#93A6B8;}

/* ---------- hero ---------- */
.hero{padding:78px 0 54px;}
.hero h1{max-width:19ch;}
.hero .lede{max-width:60ch;margin-top:20px;}
.hero-note{margin-top:26px;font-size:14px;color:var(--muted);}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;
}
.card h3{margin-bottom:8px;}
.card p:last-child{margin-bottom:0;}
.card .num{
  font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:10px;
}
.bg-dark .card{background:var(--ink-2);border-color:var(--line-dk);}
.bg-dark .card p{color:#B8C7D6;}

/* ---------- symptom list ---------- */
.symptoms{list-style:none;display:grid;gap:12px;margin-top:28px;}
.symptoms li{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:6px;padding:16px 20px;font-size:16px;
}
.symptom-foot{margin-top:24px;font-weight:600;color:var(--ink);}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:16px;margin-top:30px;}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;}
.step .n{
  width:38px;height:38px;border-radius:50%;background:var(--teal-pale);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.step h3{font-size:18px;margin-bottom:4px;}
.step p{margin:0;color:var(--muted);font-size:15.5px;}

/* ---------- tiers ---------- */
.tier{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:#fff;}
.tier .status{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;margin-bottom:14px;
}
.s-now{background:var(--teal-pale);color:var(--teal);}
.s-supports{background:var(--paper-3);color:var(--muted);}
.s-ahead{background:var(--amber-pale);color:var(--amber);}

/* ---------- complexity table ---------- */
.ctable{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;font-size:15px;table-layout:fixed;}
.ctable col.c-q{width:22%;} .ctable col.c-1{width:17%;} .ctable col.c-2{width:22%;} .ctable col.c-3{width:39%;}
.ctable th,.ctable td{border:1px solid var(--line);padding:14px 16px;vertical-align:top;text-align:left;}
.ctable thead th{background:var(--ink);color:#fff;font-size:14px;line-height:1.35;border-color:var(--ink-2);}
.ctable thead th span{display:block;font-weight:400;font-size:12.5px;color:#A9BCCD;margin-top:4px;}
.ctable th.rowq{background:var(--paper-2);color:var(--ink);font-weight:700;width:24%;}
.ctable td.l1{background:#FAFBFC;color:var(--muted);}
.ctable td.l2{background:var(--teal-pale);}
.ctable td.l3{background:#DCE6EE;font-weight:600;color:var(--ink);}
.ctable-note{margin-top:18px;font-size:14px;color:var(--muted);}
.closing{
  margin-top:30px;padding:22px 26px;border-left:4px solid var(--teal);
  background:var(--teal-pale);border-radius:0 var(--r) var(--r) 0;
  font-size:18px;font-weight:600;color:var(--ink);
}

/* ---------- honest ledger ---------- */
.ledger{display:grid;gap:14px;margin-top:28px;}
.ledger div{
  padding:18px 22px;border-radius:var(--r);background:var(--ink-2);
  border:1px solid var(--line-dk);
}
.ledger b{color:#fff;display:block;margin-bottom:4px;}
.ledger p{margin:0;color:#B8C7D6;font-size:15.5px;}

/* ---------- readiness check ---------- */
.q{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:16px;background:#fff;}
.q h3{font-size:17.5px;margin-bottom:14px;}
.opts{display:grid;gap:8px;}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:15.5px;}
.opt:hover{border-color:var(--teal);background:var(--paper-2);}
.opt input{margin-top:4px;accent-color:var(--teal);}
#result{display:none;margin-top:34px;}
.result-box{border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--r);padding:30px 28px;background:var(--paper-2);}
.bar{height:10px;border-radius:6px;background:var(--paper-3);overflow:hidden;margin:8px 0 18px;}
.bar i{display:block;height:100%;background:var(--teal);}
.reslist{list-style:none;display:grid;gap:10px;margin-top:16px;}
.reslist li{padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:15.5px;}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#A9BCCD;padding:52px 0 40px;font-size:14.5px;}
footer.site a{color:#CFE0EA;text-decoration:none;}
footer.site a:hover{color:#fff;}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.foot-b{color:#fff;font-weight:700;font-size:16px;display:block;margin-bottom:4px;}
.foot-rule{border-top:1px solid var(--line-dk);margin-top:30px;padding-top:20px;font-size:13px;color:#8199AD;}

/* ---------- form ---------- */
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:15.5px;color:var(--text);
  border:1px solid var(--line);border-radius:6px;background:#fff;
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal);}
.hp{position:absolute;left:-9999px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  body{font-size:16px;}
  section{padding:56px 0;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .nav-links{
    display:none;position:absolute;top:66px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;
    border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;padding:10px 0;border-bottom:1px solid var(--paper-3);}
  .nav-toggle{display:block;}
  .foot{flex-direction:column;}

  /* stacked complexity table */
  .ctable,.ctable tbody,.ctable tr,.ctable td,.ctable th{display:block;width:100%;}
  .ctable thead{display:none;}
  .ctable tr{margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
  .ctable th,.ctable td{border:none;border-bottom:1px solid var(--line);}
  .ctable td::before{
    content:attr(data-l);display:block;font-size:11.5px;font-weight:700;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
  }
  .ctable th.rowq{width:100%;}
}