/* Bakunye-nathi — public brochure (bakunye-nathi.com + www). Loads on top of
   theme.css and consumes its :root tokens only (no new colours). Subtle,
   non-appropriative woven motifs in the existing warm-earth palette. The app
   itself lives on app.bakunye-nathi.com. */

:root {
  /* Faint diamond lattice (beadwork/mud-cloth feel) — gold on sand. */
  --weave-diamond: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%3E%3Cg%20fill='none'%20stroke='%23C8A96A'%20stroke-width='1.4'%3E%3Cpath%20d='M24%202%2046%2024%2024%2046%202%2024Z'/%3E%3Cpath%20d='M24%2014%2034%2024%2024%2034%2014%2024Z'/%3E%3C/g%3E%3C/svg%3E");
  /* Chevron trim for section dividers — terracotta. */
  --weave-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='16'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%2013%20L6%203%20L12%2013%20L18%203%20L24%2013'%20fill='none'%20stroke='%23B4623A'%20stroke-width='1.5'/%3E%3C/svg%3E");
}

.mkt-body { background: var(--bg); }

/* Centred content column, a touch wider than the app's mobile shell. */
.mkt { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.mkt-narrow { max-width: 680px; }

/* ---- Top bar ------------------------------------------------------------- */
.mkt-topbar { background: var(--gradient); color: #fff; box-shadow: var(--shadow-sm); }
.mkt-topbar__inner {
  max-width: 960px; margin: 0 auto; padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.mkt-brand { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; }
.mkt-brand img { display: block; width: 30px; height: 30px; }
.mkt-brand__name { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.mkt-langs { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.mkt-langs a {
  color: #fff; opacity: .82; text-decoration: none; font-size: .82rem; font-weight: 600;
  padding: 4px 8px; border-radius: var(--radius-pill); line-height: 1;
}
.mkt-langs a:hover { opacity: 1; }
.mkt-langs a[aria-current="true"] { opacity: 1; background: rgba(255,255,255,.16); }
.mkt-topbar .mkt-signin {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius-pill);
}
.mkt-topbar .mkt-signin:hover { background: rgba(255,255,255,.14); }

/* ---- Buttons (auto-width on the brochure, not full-bleed like the app) ---- */
.mkt .btn { width: auto; }
.mkt-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.mkt-actions .btn + .btn { margin-top: 0; }

/* ---- Hero ---------------------------------------------------------------- */
.mkt-hero { position: relative; overflow: hidden; text-align: center; padding: var(--space-7) 0 var(--space-6); }
.mkt-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--weave-diamond); background-size: 48px 48px;
  opacity: .10; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.mkt-hero > * { position: relative; z-index: 1; }
.mkt-hero__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius);
  background: var(--gradient); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4);
}
.mkt-hero__logo img { width: 38px; height: 38px; }
.mkt-hero h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin-bottom: var(--space-1); }
.mkt-hero__meaning { color: var(--muted); font-style: italic; margin-bottom: var(--space-4); }
.mkt-hero__tagline { color: var(--terracotta); font-weight: 600; font-size: 1.15rem; margin-bottom: var(--space-3); }
.mkt-hero__lead { max-width: 620px; margin: 0 auto var(--space-5); font-size: 1.08rem; color: var(--ink); }

/* ---- Section rhythm & dividers ------------------------------------------ */
.mkt-section { padding: var(--space-7) 0; }
.mkt-section--alt { background: var(--panel-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mkt-section > .mkt > h2 { text-align: center; font-size: 1.5rem; margin-bottom: var(--space-5); }
.mkt-section p:last-child { margin-bottom: 0; }
.mkt-divider { height: 16px; background-image: var(--weave-chevron); background-repeat: repeat-x; background-position: center; opacity: .5; }
.mkt-eyebrow { text-align: center; color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; margin-bottom: var(--space-2); }

/* ---- Pillars ------------------------------------------------------------- */
.mkt-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .mkt-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.mkt-pillar { text-align: left; }
.mkt-pillar .mkt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--primary); margin-bottom: var(--space-3);
}
.mkt-pillar .mkt-ico svg { width: 22px; height: 22px; }
.mkt-pillar h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.mkt-pillar p { color: var(--ink); margin: 0; }

/* ---- Steps --------------------------------------------------------------- */
.mkt-steps { counter-reset: step; display: grid; gap: var(--space-5); }
.mkt-step { display: flex; gap: var(--space-3); align-items: flex-start; }
.mkt-step__num {
  flex: none; counter-increment: step;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: var(--gradient); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mkt-step__num::before { content: counter(step); }
.mkt-step h3 { font-size: 1.02rem; margin-bottom: var(--space-1); }
.mkt-step p { margin: 0; color: var(--muted); }
.mkt-steps__note { text-align: center; color: var(--muted); margin-top: var(--space-5); }

/* ---- Audience split ------------------------------------------------------ */
.mkt-split { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .mkt-split { grid-template-columns: 1fr 1fr; } }
.mkt-split .card h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.15rem; }
.mkt-split .card .mkt-ico { width: 34px; height: 34px; }
.mkt-split .card .mkt-ico svg { width: 18px; height: 18px; }

/* ---- Privacy strip ------------------------------------------------------- */
.mkt-privacy { background: var(--panel-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mkt-privacy .mkt { text-align: center; }
.mkt-privacy p { max-width: 640px; margin: 0 auto var(--space-3); }
/* The POPIA explainer is supporting detail, not a second headline claim — it sits a
   step back from the body copy above it. */
.mkt-privacy__popia { font-size: 0.95rem; color: var(--muted); }
.mkt-privacy__links { display: flex; gap: var(--space-4); justify-content: center; }
.mkt-privacy__links a { font-weight: 600; }

/* ---- Closing CTA --------------------------------------------------------- */
.mkt-cta { position: relative; overflow: hidden; background: var(--gradient); color: #fff; text-align: center; padding: var(--space-7) 0; }
.mkt-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--weave-diamond); background-size: 48px 48px; opacity: .14; pointer-events: none;
}
.mkt-cta > * { position: relative; z-index: 1; }
.mkt-cta h2 { color: #fff; font-size: 1.6rem; }
.mkt-cta p { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto var(--space-5); }
.mkt-cta__signin { margin-top: var(--space-4); color: rgba(255,255,255,.9); }
.mkt-cta__signin a { color: #fff; font-weight: 700; }

/* ---- Contact form (sits on the gradient CTA panel) ----------------------- */
.mkt-form { max-width: 560px; margin: 0 auto; text-align: left; }
.mkt-form__types { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.mkt-form__types legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; color: #fff; }
.mkt-form__types label { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); color: rgba(255,255,255,.92); }
/* The layout loads theme.css before this file, and its base `input, select,
   textarea` rule is written for text fields — width:100% and a 44px tap-target
   height. Unreset, these radios render as giant circles that overlap their own
   labels. Reset to native size; same gap, and the same fix, as .seg in theme.css.
   accent-color keeps the control on-brand instead of system blue on the panel. */
.mkt-form__types input[type="radio"] {
  width: auto; min-height: 0; padding: 0; margin: 0; border: 0; background: none;
  box-shadow: none; flex: 0 0 auto; -webkit-appearance: radio; appearance: radio;
  accent-color: var(--accent);
}
/* Same treatment as the text inputs below: the browser's default focus ring is
   low-contrast on this gradient panel. */
.mkt-form__types input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mkt-form__field { display: block; margin-bottom: var(--space-4); }
.mkt-form__field > span { display: block; margin-bottom: var(--space-2); font-weight: 600; color: #fff; }
.mkt-form__field input,
.mkt-form__field textarea {
  width: 100%; padding: var(--space-3); border-radius: var(--radius);
  /* --ink, not --text: there is no --text, and an unresolvable var() drops the
     declaration, so these inputs inherited #fff from .mkt-cta and rendered white
     text on a white field. The colour must be stated here — the panel's #fff
     otherwise wins by inheritance over theme.css's base input rule. */
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.96); color: var(--ink);
  font: inherit;
}
.mkt-form__field textarea { resize: vertical; }
.mkt-form__field input:focus-visible,
.mkt-form__field textarea:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Scoped under .mkt-cta on purpose: .mkt-cta p (0-1-1) otherwise outranks these bare
   classes (0-1-0) and silently wins, since every element below is a <p> inside .mkt-cta. */
.mkt-cta .mkt-form__error { color: #fff; font-weight: 600; margin: calc(var(--space-4) * -1) 0 var(--space-4); font-size: .88rem; }
.mkt-cta .mkt-form__note { color: rgba(255,255,255,.82); font-size: .85rem; margin-top: var(--space-4); text-align: center; }
/* Error summary — a role="alert" landmark so a failed submission is visible, not just the
   individual @error lines beside each field. */
.mkt-form__summary { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.mkt-cta .mkt-form__summary p { color: #fff; font-weight: 600; margin: 0 0 var(--space-2); }
.mkt-form__summary ul { margin: 0; padding-left: var(--space-4); color: #fff; }
.mkt-form__summary li { margin-bottom: var(--space-1); }
.mkt-form__summary li:last-child { margin-bottom: 0; }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.mkt-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer -------------------------------------------------------------- */
.mkt-footer { background: var(--primary-deep); color: rgba(255,255,255,.85); }
.mkt-footer__weave { height: 16px; background-image: var(--weave-chevron); background-repeat: repeat-x; background-position: center; opacity: .35; }
.mkt-footer__inner { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--gutter); text-align: center; }
.mkt-footer__tagline { color: #fff; font-weight: 600; margin-bottom: var(--space-2); }
.mkt-footer__note { font-size: .85rem; opacity: .8; margin-bottom: var(--space-3); }
.mkt-footer__langs { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.mkt-footer__langs a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .82rem; padding: 2px 8px; }
.mkt-footer__langs a[aria-current="true"] { color: #fff; text-decoration: underline; }
.mkt-footer__legal a { color: rgba(255,255,255,.85); font-size: .82rem; }
.mkt-footer__copy { font-size: .78rem; opacity: .6; margin-top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .mkt .btn { transition: none; }
}