/* Lawwiz Africa — marketing site.
   One stylesheet, no framework, no build step, no external requests. */

:root {
  --green: #0b3d2e;          /* the brand green, same as the app and the emails */
  --green-700: #0f5340;
  --mint: #9fd3bf;
  --ink: #1f2933;
  --muted: #52606d;
  --faint: #656f7c;
  --line: #e3e7e5;
  --tint: #f0f7f4;
  --paper: #ffffff;
  --ground: #f7f9f8;
  --radius: 10px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.06rem; font-weight: 700; }
p  { margin: 0 0 14px; }

a { color: var(--green); }

/* Keyboard users get to the content without walking the nav. */
.skip {
  position: absolute; left: -9999px;
  background: var(--green); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ---- header ---------------------------------------------------------- */

.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; flex-wrap: wrap; }

/* min-width: 0 lets the brand shrink below its own content width, which is what allows
   the narrow-screen rule further down to work at all. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); min-width: 0; }

/* The supplied logo is a lockup — wordmark and tagline in one piece — so it carries
   the brand on its own and there is no text beside it to keep in step. The height is
   fixed and the width follows the artwork, so re-exporting the file at a different
   size cannot change the header.

   The artwork carries about 12% transparent padding of its own, so it always sits with
   more optical clearance than the raw numbers suggest. Below about 48px the tagline — a
   seventh of the artwork's height — stops being legible, which is the real floor. */
.brand-logo { display: block; height: 81px; width: auto; }

.site nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site nav a { color: var(--muted); text-decoration: none; font-size: 0.94rem; }
.site nav a:hover { color: var(--green); }
.site nav a.btn { color: #fff; }

/* ---- buttons --------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--green); color: #fff;
  padding: 13px 24px; border-radius: 8px;
  text-decoration: none; font-weight: 650; font-size: 0.98rem;
  border: 1px solid var(--green);
}
.btn:hover { background: var(--green-700); border-color: var(--green-700); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--line); }
.btn-ghost:hover { background: var(--tint); border-color: var(--mint); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ---- hero ------------------------------------------------------------ */

/* The hero photograph sits under a white scrim, because the headline is dark ink and the
   photograph is not: without it the h1 loses contrast wherever the wood grain is light.
   The three --scrim stops and --hero-pos are the whole control surface: left is where the
   text sits and stays near-opaque, mid and right are where the photo is allowed through.
   All three have to move together — raising only the right-hand one leaves the mid stop
   sitting at 0.72 over whatever the crop lands on, which is how the phone layout ended up
   at 1.85:1.

   The 58% hold is measured, not taste: the lede's longest line ends at 56% of the hero,
   and letting the falloff start before that dropped it to 4.36:1, under WCAG AA. Holding
   opacity past the text keeps it at 6.0:1. Move the hold left and you break that. */
.hero {
  --scrim-left: 0.97;
  --scrim-mid: 0.72;
  --scrim-right: 0.45;
  --hero-pos: center right;
  background:
    radial-gradient(1000px 380px at 15% -10%, rgba(159, 211, 191, 0.32), transparent 70%),
    linear-gradient(100deg,
      rgba(255, 255, 255, var(--scrim-left)) 0%,
      rgba(255, 255, 255, var(--scrim-left)) 58%,
      rgba(255, 255, 255, var(--scrim-mid)) 75%,
      rgba(255, 255, 255, var(--scrim-right)) 100%),
    url("hero-background.jpg") var(--hero-pos) / cover no-repeat,
    var(--paper);
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 84px);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.75rem; font-weight: 700; color: var(--green);
  margin-bottom: 14px;
}
.lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--muted); max-width: 62ch; margin-top: 18px; }
.hero-note { margin-top: 26px; color: var(--faint); font-size: 0.93rem; font-style: italic; }

/* ---- sections -------------------------------------------------------- */

section { padding: clamp(48px, 7vw, 88px) 0; }
.band { background: var(--ground); border-block: 1px solid var(--line); }
.section-lede { color: var(--muted); max-width: 70ch; margin-bottom: 26px; }

.grid { display: grid; gap: 18px; margin-top: 28px; }
/* The min() is load-bearing. A bare minmax(310px, 1fr) is a floor the track holds even
   when the container is narrower than 310px, so on a 320px screen — where .wrap's
   padding leaves 272px — the cards pushed 14px past the viewport and the whole page
   scrolled sideways. min(310px, 100%) lets the track collapse to the container instead. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* The modules are four, and reading as four (or as an even 2×2) matters — "four modules on
   one engine" is the claim the heading makes, and auto-fit undercuts it: no single minmax
   can fit four across a 1072px wrap and also skip the three-across stage, which leaves a
   lone fourth card orphaned on a small laptop. So these columns are set explicitly:
   four up, then 2×2, then stacked. */
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1080px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .grid-4 { grid-template-columns: 1fr; } }
/* Five cards: two across, then three, then all five on a wide screen. */
.grid-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 560px)  { .grid-5 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card p:last-child, .feature p:last-child { margin-bottom: 0; }

.feature { padding: 4px 0 4px 18px; border-left: 3px solid var(--mint); }
.feature h3 { color: var(--green); }
.feature p { color: var(--muted); }

/* ---- the loop -------------------------------------------------------- */

.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  background: var(--tint);
  border-radius: var(--radius);
  color: var(--ink);
}
.steps span {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}

/* ---- obligation types ------------------------------------------------ */

/* Module cards and obligation-type cards are the same object: a green name, a one-line
   gloss in ink, then the body. Grouped so the two cannot drift apart. */
.type h3, .module h3 { color: var(--green); font-size: 1.2rem; }
.type-what, .module-what { font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.type p, .module p { color: var(--muted); }
.eg { font-size: 0.88rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }

/* ---- security + contact ---------------------------------------------- */

.security { background: var(--green); color: #fff; }
.security h2 { color: #fff; }
.security .section-lede { color: var(--mint); }
.security .fine { color: rgba(255, 255, 255, 0.62); }

.contact { text-align: center; }
.contact .section-lede { margin-inline: auto; }
.contact .cta-row { justify-content: center; }

.fine { font-size: 0.88rem; color: var(--faint); margin-top: 18px; }

/* ---- footer ---------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: 26px 0; background: var(--ground); }
.site-footer p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.site-footer .fine { margin: 0; }

/* ---- narrow screens -------------------------------------------------- */

/* 880px is measured, not chosen: the logo (224px) plus the full nav (568px) plus the
   gap and .wrap's padding need 858px of content width to sit on one row, and a media
   query matches the window width — about 15px more than that, once the scrollbar is
   counted. Below this the bar wrapped into a 142px two-row sticky header. Anything that
   changes the logo width or the nav labels moves this number: re-measure, do not nudge. */
@media (max-width: 880px) {
  .bar { min-height: 0; padding-block: 12px; flex-wrap: nowrap; }

  /* The section links stack onto their own rows on a phone, and a sticky
     header three rows deep costs more than the shortcuts are worth on a page
     this short. Everything they point at is reachable by scrolling; the one
     thing that is not is the call to action, so that stays. */
  .site nav a:not(.btn) { display: none; }

  /* The lockup and the call-to-action share one row on a phone, and at these sizes the
     lockup no longer fits every screen. Sizing by width rather than height lets it take
     the full 188px where there is room (390px screens and up) and shrink to whatever the
     button leaves it below that, instead of pushing the header off-screen. Height follows
     the artwork, so the ratio is never at risk.

     The 116px floor is the widest the lockup can be at 320px without pushing the header
     off-screen (measured). Without it flex shrink overshoots and drops the logo to 34px,
     well under the tagline's legibility floor. */
  .brand-logo { width: 188px; min-width: 116px; max-width: 100%; height: auto; }
  .site nav .btn { white-space: nowrap; padding: 8px 14px; font-size: 0.85rem; }

  .cta-row .btn { flex: 1 1 auto; text-align: center; }

  /* On a phone the text runs the full width, so the photo cannot be left showing through
     on the right the way it is on a wide screen — every stop has to come up, not just the
     right-hand one. The framing moves too: a tall narrow box cropped to the right of the
     artwork lands on the near-black binder, which is the worst possible ground for grey
     italic text. Centre-left is the pale wood. */
  .hero {
    --scrim-left: 0.97;
    --scrim-mid: 0.96;
    --scrim-right: 0.96;
    --hero-pos: center left;
  }
}

@media print {
  .site, .cta-row, .skip { display: none; }
  body { color: #000; }
}