/* Self-hosted, the same two faces as wpfoss.ke. Both are variable, so one file
   each covers every weight. font-display:swap rather than optional: this is an
   application people read, and text that never arrives is worse here than text
   that arrives a moment late. */
@font-face{font-family:'Inter';src:url('/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Red Hat Display';src:url('/redhat.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --primary-color:#00704a; --primary-bright:#00a86b; --primary-dark:#005c3d;
  --ink:#333; --head:#1a1a1a; --muted:#666; --faint:#8b97a6;
  --line:#e0e0e0; --bg:#f8f9fa; --card:#fff;
  --warn:#8a5a00; --warn-bg:#fdf3e0;
  --bad:#c62828; --bad-bg:#fdecea;
  --good:#007a4d; --good-bg:#e6f9f2;
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,0.05);
  --shadow-lift:0 10px 30px rgba(0,168,107,0.3);
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x: the closed mobile menu waits off the right edge; without this
   phones widened the page to fit it (403px on a 375px screen, 04/11/2026). */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.container{max-width:1296px;margin:0 auto;padding:0 24px}

/* --- The bar above the header, as on wpfoss.ke ------------------------- */
.top-bar{background:linear-gradient(135deg,var(--primary-bright),var(--primary-color));color:#fff;padding:12px 0;font-size:14px}
.top-bar-content{display:flex;justify-content:flex-end;align-items:center;gap:32px;max-width:1296px;margin:0 auto;padding:0 24px}
.top-bar-item{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;transition:opacity .3s}
.top-bar-item:hover{opacity:.8}
.top-bar-text{font-weight:500;white-space:nowrap}

/* --- Header ------------------------------------------------------------ */
/* No backdrop-filter, unlike wpfoss.ke's header, and deliberately.
   backdrop-filter makes an element a containing block for fixed-position
   descendants, so the mobile menu inside this header was positioned against
   the header rather than the viewport and opened 28px off the left edge with
   its first letters cut off. The background is 95% opaque, so the blur was
   invisible anyway: it cost a broken menu and bought nothing. */
header{background:#fff;height:88px;position:sticky;top:0;z-index:1000;
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);width:100%}
header .container{height:100%}
.header-content{display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.logo a{display:flex;align-items:center}
.logo img{height:60px;width:auto;display:block}
nav ul{display:flex;list-style:none;gap:36px;align-items:center;margin:0;padding:0}
nav a{color:var(--head);text-decoration:none;font-weight:500;transition:color .3s;white-space:nowrap}
nav a:hover,nav a.active{color:var(--primary-color)}
nav li.nav-cta a{background:var(--primary-color);color:#fff !important;padding:10px 22px;border-radius:6px;font-weight:600;
  border:2px solid var(--primary-color);line-height:1.2;box-shadow:0 2px 8px rgba(0,112,74,.25);
  transition:background-color .3s,transform .3s,box-shadow .3s}
nav li.nav-cta a:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,112,74,.4)}

/* The menu button is a checkbox, not a script. This app ships no JavaScript
   at all, and a menu that needs JS to open is a menu that does not open. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;
  background:none;border:0;padding:0;margin:0}
.hamburger span{display:block;width:24px;height:2px;background:var(--head);border-radius:2px}

/* --- Typography -------------------------------------------------------- */
main.container{padding-top:40px;padding-bottom:80px}
h1{font-family:'Red Hat Display','Inter',sans-serif;font-size:40px;font-weight:700;color:var(--head);
  letter-spacing:-.02em;line-height:1.2;margin:0 0 12px}
h2{font-family:'Red Hat Display','Inter',sans-serif;font-size:24px;font-weight:700;color:var(--head);
  letter-spacing:-.01em;margin:0 0 14px}
h3{font-family:'Red Hat Display','Inter',sans-serif;font-size:18px;font-weight:600;color:var(--head);margin:0 0 8px}
p{margin:.65rem 0}
a{color:var(--primary-color);text-underline-offset:2px}
a:hover{color:var(--primary-dark)}
.lead{font-size:18px;color:var(--muted);max-width:70ch}
.muted{color:var(--muted);font-size:15px}
code{background:#eef1f5;padding:.15rem .4rem;border-radius:5px;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

/* --- Cards, forms, tables ---------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;margin:24px 0;box-shadow:var(--shadow)}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:24px 0}
.grid .card{margin:0}

label{display:block;margin:20px 0 8px;font-weight:500;color:var(--head)}
form > label:first-of-type{margin-top:0}
input,select,textarea{
  width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:16px;background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,168,107,.15)}
input::placeholder{color:var(--faint)}
button{
  margin-top:24px;padding:14px 32px;border:0;border-radius:12px;
  background:var(--primary-color);color:#fff;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;
  transition:background-color .3s,transform .3s,box-shadow .3s;
}
button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
button:focus-visible{outline:3px solid rgba(0,168,107,.35);outline-offset:2px}
button.danger{background:var(--bad)}
/* The Partner Terms, readable in place on the accept page. */
.terms-box{max-height:55vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 24px;margin:16px 0}
.terms-box h2{font-size:19px}
button.danger:hover{background:#9f1f1f}
a.danger,table a.danger{color:var(--bad);font-weight:600}
.hint{color:var(--muted);font-size:14px;margin:6px 0 0}
/* A tickbox sits beside its words, not under them, and the words wrap under
   themselves rather than under the box. */
label.check{display:flex;align-items:flex-start;gap:12px;font-weight:400;cursor:pointer;margin:20px 0 8px}
label.check input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--primary-color)}
label.check span{flex:1}
/* One choice per block, with its own explanation and its own fields.
   The reason box for giving a prospect up used to sit directly under the
   extend button and read as though it belonged to it. */
.action{padding:20px 0;border-top:1px solid var(--line)}
.action:first-of-type{border-top:0;padding-top:4px}
.action h3{margin-bottom:4px}
.action p{margin-top:0}
.action button{margin-top:14px}
/* The one action a page wants you to take, as a button rather than a link
   buried in a paragraph. */
a.cta{display:inline-block;background:var(--primary-color);color:#fff;padding:14px 32px;border-radius:12px;
  font-weight:600;font-size:17px;text-decoration:none;margin-top:8px;
  transition:background-color .3s,transform .3s,box-shadow .3s}
a.cta:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lift)}

/* The website project form (26/10/2026): one question block each, tick
   lists close together, a progress bar, and the steps folded away. */
.q{margin:22px 0;border:0;padding:0;min-width:0}
.q legend{font-weight:500;color:var(--head);margin-bottom:4px;padding:0}
.choices label.check{margin:10px 0}
label.sub{font-weight:400;margin:10px 0 6px}
progress{width:100%;height:10px;accent-color:var(--primary-color)}
.brief-nav{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.brief-steps{margin-top:28px}
.brief-steps ol{padding-left:20px}
.brief-steps [aria-current] a{font-weight:700}
dl.answers dt{font-weight:500;color:var(--head);margin-top:12px}
dl.answers dd{margin:2px 0 0;white-space:pre-wrap}

/* The six digit sign-in code. Wide, spaced and monospaced, so reading it off
   a phone and typing it here is not a test of eyesight. */
.code-field input{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:28px;letter-spacing:.4em;text-align:center;padding:16px;text-indent:.4em;
}

/* body hides horizontal overflow, so a wide table has to carry its own
   scroller or its last columns are simply lost off the edge of a phone, and
   on the money screens those are the columns with the amounts in them. */
.table-wrap{overflow-x:auto;margin:8px -4px;padding:0 4px}
/* A table of names is a list, not a page of prose. Underlining every one of
   them turns the roster into a thicket of blue rules, so a link in a table
   carries its colour and underlines only when the pointer is on it. */
table a{text-decoration:none}
table a:hover,table a:focus-visible{text-decoration:underline}
table{width:100%;border-collapse:collapse;margin:8px 0;font-size:15px}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* --- Status ------------------------------------------------------------ */
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;
  font-weight:600;letter-spacing:.01em;background:#eef1f5;color:var(--muted);white-space:nowrap}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}

.notice{border-left:4px solid var(--primary-color);background:var(--card);padding:16px 20px;
  margin:24px 0;border-radius:0 10px 10px 0;box-shadow:var(--shadow);font-size:16px}
.notice.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.notice.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.code-status{min-height:1.4em;margin:6px 0 4px;font-weight:600;font-size:15px}
.code-status.good{color:var(--good)}
.code-status.bad{color:var(--bad)}
.code-suggestions{margin:4px 0 16px}
button.chip{background:#fff;color:var(--primary-color);border:2px solid var(--primary-color);border-radius:99px;padding:6px 14px;margin:4px 6px 4px 0;font-size:14px;font-weight:600;cursor:pointer}
button.chip:hover{background:var(--primary-color);color:#fff}
.big-code{font-size:40px;font-weight:800;letter-spacing:2px;margin:0 0 8px;color:var(--primary-color)}
.popup-backdrop{position:fixed;inset:0;background:rgba(10,30,22,.6);z-index:5000;overflow-y:auto;padding:48px 16px}
.popup-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.popup-actions form{margin:0}
.popup{background:#fff;max-width:720px;margin:0 auto;border-radius:16px;padding:32px 32px 24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.popup h1{font-size:30px;margin:4px 0 12px}
.popup-kicker{font-size:14px;color:var(--primary-color);font-weight:600;margin:0}
.popup-changes{background:var(--good-bg, #e8f5ee);border-radius:12px;padding:16px 20px;margin:16px 0}
.popup-changes ul{margin:8px 0 8px 20px}
.popup-terms{margin:12px 0 20px}
.popup-terms .terms-box{margin-top:12px}
@media (max-width:600px){.popup{padding:22px 18px}.popup h1{font-size:24px}}
.email-body{background:#f7faf8;border:1px solid var(--line, #e3e9e6);border-radius:10px;padding:16px 18px;line-height:1.6;white-space:normal;margin:8px 0 12px}
textarea{width:100%;font:inherit;line-height:1.5}
.demo-list{padding-left:20px}.demo-list li{margin-bottom:14px}
button.secondary{background:#fff;color:var(--primary-color);border:2px solid var(--primary-color)}
details summary{cursor:pointer;font-weight:600}

/* A headline number, for what a reseller has earned. */
.stat{font-family:'Red Hat Display','Inter',sans-serif;font-size:36px;font-weight:700;color:var(--primary-color);line-height:1.1}
.stat-label{font-size:14px;color:var(--muted);margin-top:4px}

/* --- Footer ------------------------------------------------------------ */
footer{background:#fff;border-top:1px solid var(--line);padding:32px 0;margin-top:64px}
footer .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer p{margin:0;color:var(--muted);font-size:14px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--primary-color)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}

/* --- Small screens ----------------------------------------------------- */
@media (max-width:992px){
  header{height:80px}
  .logo img{height:48px}
  .hamburger{display:flex}
  nav{position:fixed;top:80px;left:0;width:100%;height:calc(100vh - 80px);background:#fff;
      transform:translateX(100%);transition:transform .3s ease;padding:32px 24px;overflow-y:auto}
  .nav-toggle:checked ~ nav{transform:translateX(0)}
  nav ul{flex-direction:column;gap:24px;align-items:flex-start}
  nav li.nav-cta{margin-top:8px;width:100%}
  nav li.nav-cta a{display:block;text-align:center;width:100%}
  .top-bar-content{justify-content:center;gap:20px}
}
@media (max-width:600px){
  main.container{padding-top:28px}
  h1{font-size:30px}
  h2{font-size:20px}
  .card{padding:22px}
  table{font-size:14px}
  th,td{padding:12px 8px}
  .top-bar{font-size:13px}
  .stat{font-size:30px}
}