/* Keepa — Bee Networking.
 *
 * ORDER MATTERS AND IS DELIBERATE:
 *   1. Tokens and the typeface.
 *   2. IAN'S APPROVED DESIGN, verbatim. This is the authority for layout,
 *      type, header, nav, buttons, sections and the map.
 *   3. Components the design has no opinion about: forms, notices, options,
 *      the emergency page, the map hover card.
 *
 * An earlier version had my own landing page CSS sitting above the design and
 * redefining sixteen of the same classes. The design won where it set a
 * property and my rules leaked through everywhere else, which is why the
 * formatting looked wrong. Do not reintroduce a second definition of anything
 * the design already styles.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --amber: #ffc107;
  --amber-light: #ffe082;
  --amber-wash: rgba(255, 193, 7, 0.1);
  --page: #000000;
  --card: #0e0b06;
  --surface: #14100a;
  --raised: #241f16;
  --border: #3a3222;
  --border-strong: #4a3f2b;
  --wax: #f0e4c8;
  --dust: #a79877;
  --muted: #6e6249;
  --healthy: #7cc47f;
  --danger: #e57373;
  /* The design references these four directly. --hex-clip keeps the hexagon
     shape in one place rather than repeated as a polygon() at every call site. */
  --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --on-danger: #2a1215;
  --block-open: #2a2318;
  --block-occupied-line: #e0a92c;
  --map-outline: #6b5a3a;
  --neon: #39ff88;
  --block-occupied: #c2891a;

  --radius: 3px;
  --radius-card: 4px;
  --gutter: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* THE PAGE BACKGROUND. Dropped once when this stylesheet was rebuilt, which
     turned every section without its own background white on a dark theme. */
  background: var(--page);
  color: var(--wax);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Belt and braces: the html element too, so an over scroll or a short page
   never shows white behind the body. */
html { background: var(--page); }

a { color: var(--amber); }
a:hover { color: var(--amber-light); }


/* ===============================================================
   IAN'S APPROVED DESIGN. Verbatim. Do not duplicate these rules
   anywhere above or below.
   =============================================================== */

body{margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
a{text-decoration:none}
.hex{clip-path:var(--hex-clip)}
header{position:sticky;top:0;z-index:10;background:var(--page);border-bottom:1px solid var(--border)}
.bar{display:flex;align-items:center;gap:12px;padding:16px 18px;max-width:1100px;margin:0 auto}
.mark{width:26px;height:28px;background:var(--amber)}
.lockup{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--amber)}
nav{margin-left:auto;display:flex;gap:20px}
nav a{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dust);padding-bottom:4px;border-bottom:2px solid transparent}
nav a:hover{color:var(--amber)}
nav a.active{color:var(--amber);border-bottom-color:var(--amber)}
.topright{display:flex;justify-content:flex-end;margin:24px 0}
.btn{display:inline-block;padding:14px 26px;border-radius:var(--radius);font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--amber);color:var(--card)}
.btn-primary:hover{background:var(--amber-light);color:var(--card)}
.btn-sos{background:none;border-color:var(--danger);color:var(--danger);padding:10px 18px;font-size:13px}
.btn-danger{background:var(--danger);color:var(--on-danger)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--amber);margin:0 0 12px}
h1{font-size:clamp(44px,8vw,84px);font-weight:600;letter-spacing:-2.5px;line-height:.98;margin:0;max-width:900px}
h1 em{font-style:normal;color:var(--amber)}
.lede{margin-top:22px;max-width:620px;font-size:18px;color:var(--dust)}
.stats{display:flex;flex-wrap:wrap;gap:18px 64px;padding:56px 0 40px}
.stat b{display:block;font-size:56px;font-weight:700;letter-spacing:-2px;color:var(--amber);line-height:1}
.stat b .approx{font-size:30px;vertical-align:8px}
.stat span{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dust);margin-top:6px}
section{border-top:1px solid var(--border);padding:56px 0}
.step-no{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--amber);margin:0}
h2{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0 0 10px}
.section-lede{color:var(--dust);max-width:620px;margin:0 0 36px}
.covhead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.legend{display:flex;gap:18px;padding-bottom:36px}
.legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dust)}
.legend i{width:13px;height:14px;display:inline-block}
.mapbox{display:grid;justify-items:center}
.mapnote{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dust);margin:14px 0 0}
.band{background:var(--amber);border-top:0;padding:64px 0}
.band .kicker{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#0e0b06;opacity:.6;margin:0}
.band h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-1.2px;color:#0e0b06;margin:8px 0 40px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.step .n{width:44px;height:48px;background:#0e0b06;color:var(--amber);display:grid;place-items:center;font-size:20px;font-weight:800}
.step h3{font-size:20px;font-weight:800;letter-spacing:-.4px;color:#0e0b06;margin:16px 0 8px}
.step p{font-size:14.5px;color:#3d3208;margin:0;line-height:1.55}
.step a{font-size:13px;font-weight:800;color:#0e0b06;text-decoration:underline;display:inline-block;margin-top:12px}
.theft{background:var(--surface)}
.thefthead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.report{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--border);flex-wrap:wrap}
.report .blk{font-size:15px;font-weight:800;color:var(--danger);min-width:76px}
.report .what{font-size:15px;font-weight:700;min-width:140px}
.report .detail{font-size:14px;color:var(--dust)}
footer{border-top:1px solid var(--border);padding:34px 0 56px;color:var(--muted);font-size:13px}
@media (max-width:640px){nav{display:none}}


/* ===============================================================
   Components the design does not style.
   =============================================================== */


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
}

.card .icon {
  width: 30px;
  height: 33px;
  background: var(--amber-wash);
  display: grid;
  place-items: center;
  color: var(--amber);
  font-size: 15px;
  margin-bottom: 14px;
}

.card h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.card p { font-size: 14px; color: var(--dust); }


.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Sections */

fieldset { border: 0; margin-bottom: 40px; }
legend { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; padding: 0; }
label.field { display: block; margin-top: 16px; }
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--dust);
  margin-bottom: 6px;
}

legend { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; padding: 0; }
label.field { display: block; margin-top: 16px; }
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--dust);
  margin-bottom: 6px;
}

label.field { display: block; margin-top: 16px; }
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--dust);
  margin-bottom: 6px;
}

label.field > span {
  display: block;
  font-size: 13px;
  color: var(--dust);
  margin-bottom: 6px;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--wax);
  font-family: inherit;
  font-size: 15px;
}

input:focus, textarea:focus { outline: none; border-color: var(--amber); }
input::placeholder, textarea::placeholder { color: var(--muted); }

.options { display: grid; gap: 8px; margin-top: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

input::placeholder, textarea::placeholder { color: var(--muted); }

.options { display: grid; gap: 8px; margin-top: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.options { display: grid; gap: 8px; margin-top: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.option:hover { border-color: var(--border-strong); }
.option input { accent-color: var(--amber); width: 17px; height: 17px; }
.option.checked { border-color: var(--amber); background: var(--amber-wash); }
.option.checked .option-label { color: var(--amber); }
.option-label { font-weight: 600; font-size: 15px; color: var(--dust); }
.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.option input { accent-color: var(--amber); width: 17px; height: 17px; }
.option.checked { border-color: var(--amber); background: var(--amber-wash); }
.option.checked .option-label { color: var(--amber); }
.option-label { font-weight: 600; font-size: 15px; color: var(--dust); }
.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.option.checked { border-color: var(--amber); background: var(--amber-wash); }
.option.checked .option-label { color: var(--amber); }
.option-label { font-weight: 600; font-size: 15px; color: var(--dust); }
.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.option.checked .option-label { color: var(--amber); }
.option-label { font-weight: 600; font-size: 15px; color: var(--dust); }
.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.option-label { color: var(--amber); }
.option-label { font-weight: 600; font-size: 15px; color: var(--dust); }
.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.option-sub { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.group-label { font-weight: 700; font-size: 15px; margin-top: 24px; }
.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.group-label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.notice {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 14px;
  margin: 16px 0;
}

.notice-warn { border-color: rgba(255, 193, 7, 0.35); background: var(--amber-wash); color: var(--dust); }
.notice-lock { border-color: var(--border); background: var(--surface); color: var(--dust); }
.notice b { color: var(--wax); }

.error { color: var(--danger); font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.notice-lock { border-color: var(--border); background: var(--surface); color: var(--dust); }
.notice b { color: var(--wax); }

.error { color: var(--danger); font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.notice b { color: var(--wax); }

.error { color: var(--danger); font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.error { color: var(--danger); font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.hidden { display: none !important; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.summary { border: 1px solid var(--border); border-radius: var(--radius-card); }
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.summary div:last-child { border-bottom: 0; }
.summary span:first-child { color: var(--dust); }
.summary span:last-child { text-align: right; }


.summary span:first-child { color: var(--dust); }
.summary span:last-child { text-align: right; }


.summary span:last-child { text-align: right; }


.page-head { padding: 56px 0 30px; border-bottom: 1px solid var(--border); }
.page-head .eyebrow { margin-bottom: 10px; }
.page-head h1 { font-size: clamp(32px, 5vw, 48px); }
.page-head p { color: var(--dust); max-width: 56ch; margin-top: 14px; }

.crumb { font-size: 13px; color: var(--muted); padding-top: 18px; }
.crumb a { text-decoration: none; }


/* ---------------------------------------------------------------
   The map and its selection bar, to Ian's design.
   The map is the attraction, so it runs nearly full width and the
   selection reads as one horizontal line rather than a card.
   --------------------------------------------------------------- */

/* Extends the design's .mapbox. The map is the attraction on this page, so it
   goes full bleed rather than sitting inside the 1100px text column.
   The grid is 960 by 860, so width and height move together: capping the
   height stops a wide screen producing a map taller than the viewport, which
   would mean scrolling to see the country. */
.mapbox {
  /* The map, its block bar and its captions share one width so every edge
     lines up. Three different widths is what read as "not aligned". */
  width: 100%;
  /* The design sets justify-items:center, which sizes the child to its
     CONTENT. An SVG with a viewBox and no width attribute has an intrinsic
     width of 300px, so the map collapsed to a stamp. Stretch instead. */
  justify-items: stretch;
}
.mapbox > div { width: 100%; }
.mapbox svg {
  width: 100%;
  height: auto;
  max-height: 92vh;
  display: block;
  margin: 0 auto;
}

#map path { cursor: pointer; }
#map path:hover { stroke: var(--amber); stroke-width: 1.6; }

/* Selected reads as a RING, not a fill: the fill already carries occupancy. */
#map path[data-selected] {
  stroke: var(--amber);
  stroke-width: 3;
  fill: var(--page);
}

.block-bar {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  margin: 32px 0 0;
  padding: 26px 34px;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
}
.block-bar .cell { display: flex; flex-direction: column; gap: 6px; }
.block-bar .value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1;
  color: var(--amber);
}
.block-bar .cell.plain .value { color: var(--wax); }
.block-bar .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dust);
}
.block-bar .note {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}
.block-bar .hint { font-size: 14px; color: var(--dust); }

.map-priv {
  text-align: center;
  margin: 22px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--wax);
}
.map-priv em { font-style: normal; color: var(--amber); }

/* Extends the design's .report: the block code is the clickable anchor. */
.report .blk {
  color: var(--danger);
  text-decoration: underline;
  cursor: pointer;
}


/* ---------------------------------------------------------------
   Phones. The design hides the nav under 640px, which leaves a
   visitor on a phone with no way to move around the site. Most
   South African keepers will arrive on a phone, so the nav wraps
   instead of vanishing.
   --------------------------------------------------------------- */

@media (max-width: 640px) {
  nav { display: flex; }
  .bar {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 18px;
  }
  nav {
    margin-left: 0;
    width: 100%;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  nav a { white-space: nowrap; font-size: 11px; }

  /* 100vw is the VIEWPORT, but .mapbox sits inside .wrap's 18px padding, so
     a 100vw-wide child pushed the whole page wider than the screen and every
     line of text got clipped at the right edge on a phone. */
  .mapbox { width: 100%; }
  .wrap-wide { padding: 0 14px; }
  .block-bar { gap: 22px; padding: 16px 18px; }
  .block-bar .note { margin-left: 0; width: 100%; text-align: left; }
  .stats { gap: 22px 32px; padding: 36px 0 28px; }
  .stat b { font-size: 40px; }
  .report { gap: 8px; }
  .report .detail { width: 100%; }
}

/* Card bullet used by the restored "What Keepa does" and app cards. */
.icon {
  width: 26px;
  height: 28px;
  background: var(--amber);
  color: var(--card);
  display: grid;
  place-items: center;
  font-size: 11px;
  margin-bottom: 14px;
}

/* Sections that are NOT in Ian's design file, marked in neon green so it is
   obvious at a glance which parts were added on top of the approved design. */
.added .step-no,
.added > .wrap > .step-no { color: var(--neon); }
.added h2 { color: var(--neon); }


/* The coverage section is the reason people come, so it gets a wider column
   than the text sections. Heading, legend, map, block bar and caption all
   sit in THIS width, so every edge inside the section still agrees. */
.wrap-wide {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Register: the two submit paths sit side by side. "Join Keepa" is the keeper
   signing themselves up; "Submit details" is a staff member capturing for
   someone else, which clears the form for the next person instead of showing
   the personal confirmation screen. */
.submit-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.submit-hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .submit-row { flex-direction: column; align-items: stretch; }
  .submit-row .btn { width: 100%; }
}

/* Hero stats: the "~" carried vertical-align:8px, which grew the line box of
   that one stat only, so "29 km" sat lower than "1,568" and its label dropped
   with it. Sitting the tilde on the baseline gives all four stats an
   identical line box, which is what lines the row up. */
.stat b .approx { vertical-align: baseline; }