/* ------------------------------------------------------------------ *
 * The public site.
 *
 * Tokens copied from `app/css/app.css` on purpose rather than shared. The two
 * are deployed separately, from different folders, and a shared stylesheet
 * would mean the landing page could break when the app's design changed. They
 * are meant to LOOK like one product, not to be one build.
 *
 * If the palette ever changes, it changes in both. That is a real cost and it
 * is the smaller one.
 * ------------------------------------------------------------------ */

:root{
  --bg:#EDEFEA; --surface:#F8F9F6; --surface-2:#E2E7DE;
  --ink:#161F1A; --ink-2:#4B5A51; --ink-3:#7E8C82;
  --line:#CFD6CA;
  --accent:#C4321C; --accent-soft:#F7E1DB;
  --go:#1B7355; --go-soft:#DDEDE6;
  --stop:#7B3350; --stop-soft:#F1DDE4;
  --shadow:0 1px 2px rgba(22,31,26,.06), 0 6px 18px -10px rgba(22,31,26,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1411; --surface:#171D18; --surface-2:#212A23;
    --ink:#E7ECE5; --ink-2:#A4B1A7; --ink-3:#6E7D73;
    --line:#2A332C;
    --accent:#F26044; --accent-soft:#3B1B14;
    --go:#45BC92; --go-soft:#12291F;
    --stop:#D0819B; --stop-soft:#2E1620;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16.5px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:960px; margin:0 auto; padding:0 22px}

/* A narrow section keeps the same LEFT EDGE as a wide one and caps the measure
   instead of centring. Centring made the left edge jump between adjacent
   sections, which reads as a mistake rather than as a reading column. */
.wrap.narrow > *{max-width:680px}

/* ---------------- top bar ---------------- */

.top{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.topbar{display:flex; align-items:center; justify-content:space-between; height:58px; gap:16px}
.brand{font-weight:600; letter-spacing:.01em}
.top nav{display:flex; align-items:center; gap:20px}
.top nav a{color:var(--ink-2); text-decoration:none; font-size:14.5px}
.top nav a:hover{color:var(--ink)}

/* ---------------- type ---------------- */

h1{
  font-size:clamp(30px, 5.2vw, 50px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 20px;
  font-weight:640;
}
h1 em{font-style:normal; color:var(--accent)}

h2{
  font-size:clamp(21px, 3vw, 27px);
  letter-spacing:-.01em;
  margin:0 0 26px;
  font-weight:620;
}

h3{font-size:17px; margin:0 0 8px; font-weight:620}

p{margin:0 0 14px; color:var(--ink-2)}
.lede{font-size:clamp(16.5px, 2vw, 19px); color:var(--ink-2); max-width:62ch}
.note{color:var(--ink-3); font-size:14px}
.note.centred{text-align:center; display:block; margin-top:26px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.94em}
strong{color:var(--ink)}
em{color:var(--ink)}

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

section{padding:66px 0}
.hero{padding:84px 0 70px}
.band{background:var(--surface); border-block:1px solid var(--line)}

.cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px}

.btn{
  display:inline-block;
  background:var(--accent); color:#fff;
  padding:11px 20px; border-radius:9px;
  text-decoration:none; font-weight:560; font-size:15.5px;
  border:1px solid transparent;
}
.btn:hover{filter:brightness(1.06)}
.btn.small{padding:7px 14px; font-size:14px}

/* ---------------- columns ---------------- */

.cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px}
.cols.two{grid-template-columns:repeat(2, 1fr); gap:24px}
.cols p{margin-bottom:0}

.feature{
  padding:22px 0;
  border-top:1px solid var(--line);
}
.feature:first-of-type{border-top:0; padding-top:0}
.feature p:last-child{margin-bottom:0}

.rule{
  background:var(--bg);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:14px;
}
.rule p:last-child{margin-bottom:0}

/* ---------------- the kit lists ---------------- */

.kit{border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:var(--surface)}
.kit ul{margin:0; padding-left:20px; color:var(--ink-2)}
.kit li{margin-bottom:6px}
.kit.yes{border-left:3px solid var(--go)}
.kit.yes h3{color:var(--go)}
.kit.no{border-left:3px solid var(--stop)}
.kit.no h3{color:var(--stop)}
.kit.no li{text-decoration:line-through; color:var(--ink-3)}

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

footer{border-top:1px solid var(--line); background:var(--surface); padding:26px 0}
.foot{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

/* ---------------- small screens ---------------- */

@media (max-width:760px){
  .cols, .cols.two{grid-template-columns:1fr; gap:24px}
  section{padding:48px 0}
  .hero{padding:56px 0 46px}
  /* The nav links are secondary; the sign-in button is not, so it stays. */
  .top nav a:not(.btn){display:none}
}