/* Here brand (Brand Guidelines draft): DM Sans Bold headlines, Regular lead copy and buttons,
   Light body; primary colours Here Green / Calm Beige / Charcoal / Cool Khaki. Logo only in
   charcoal (light backgrounds) or white (dark), never altered otherwise. */
:root {
  --green: #96ff9d;
  --beige: #f2e9df;
  --charcoal: #2f2e2c;
  --khaki: #7e846b;
  --grey: #e3e3e3;      /* secondary: use sparingly */
  --purple: #7570ef;
  --peach: #f1a299;
  --yellow: #fff255;
  --white: #ffffff;
  --max: 1080px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--beige);
  color: var(--charcoal);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.55;
}
h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.lead { font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
strong { font-weight: 700; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Logo: the safe zone is the logo's own height on every side */
.logo { display: block; height: 32px; width: auto; }
.on-dark .logo { filter: brightness(0) invert(1); }   /* white, the only other allowed colour */
.site-header { padding: 32px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }

/* Sections */
.dark { background: var(--charcoal); color: var(--white); }
.green { background: var(--green); color: var(--charcoal); }
.section { padding: clamp(56px, 10vw, 120px) 0; }

/* Hero */
.hero { padding-bottom: clamp(72px, 12vw, 140px); }
.hero .was { display: block; font-size: 0.6em; text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 0.12em; opacity: 0.9; }
.irl { font-weight: 700; }

/* Buttons: DM Sans Regular */
.button {
  display: inline-block; font-family: inherit; font-weight: 400; font-size: 1.1rem;
  padding: 12px 40px; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer;
  background: var(--white); color: var(--charcoal);
}
.green .button, .button.dark-button { background: var(--charcoal); color: var(--white); }

/* "How it works" */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 32px; }
.step { background: var(--white); border-radius: 16px; padding: 24px; }
.step .num { display: inline-block; background: var(--green); border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.manifesto p { max-width: 760px; }
.manifesto .punch { font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem); margin-top: 1.5em; }

/* Content pages (privacy, terms, delete, join) */
.page { padding: 24px 0 96px; max-width: 760px; }
.card { background: var(--white); border-radius: 16px; padding: 24px; margin: 24px 0; }
.code { font-weight: 700; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: 0.12em; margin: 0.2em 0; }
.todo { border: 2px dashed var(--khaki); border-radius: 12px; padding: 12px 16px; color: var(--khaki); }

/* Footer */
.site-footer { padding: 48px 0; font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }