/* Cactus Apps — one stylesheet for the whole site.
   Palette is taken from the app so the site and the product read as one thing:
   page black, card #1F1F1F, stroke #383838, accent text #4FB287, accent fill #2F7D5B.
   ⚠️ #4FB287 is the FOREGROUND green (6.2:1 on black) and #2F7D5B is the FILL green
   (white on it clears 4.5:1). They are not interchangeable — pick by role, not by eye. */

:root {
  --page:   #000;
  --card:   #1F1F1F;
  --stroke: #383838;
  --accent-text: #4FB287;
  --accent-fill: #2F7D5B;
  --text:      rgba(255,255,255,0.92);
  --text-dim:  rgba(255,255,255,0.62);
  --text-faint:rgba(255,255,255,0.42);
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Inter, system-ui, sans-serif;
  padding: clamp(1.5rem, 5vw, 4rem) 1.25rem 5rem;
  display: flex;
  justify-content: center;
}

.wrap { width: 100%; max-width: var(--measure); }
.wide { max-width: 44rem; }

/* ---- masthead ---- */
.brand {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent-text); }

h1 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.022em;
  font-weight: 700; margin: 2.5rem 0 .75rem;
}
h2 {
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.005em;
  margin: 2.75rem 0 .6rem;
}
h2:first-of-type { margin-top: 2rem; }

p, li { color: var(--text-dim); margin: 0 0 1rem; }
li { margin-bottom: .5rem; }
ul { padding-left: 1.15rem; margin: 0 0 1rem; }
strong { color: var(--text); font-weight: 600; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.lede { font-size: 1.06rem; color: var(--text); }
.meta { font-size: .85rem; color: var(--text-faint); margin-bottom: 2.5rem; }

/* ---- card ---- */
.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  margin: 0 0 .75rem;
}
.card h3 { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.card p  { margin: 0 0 .6rem; font-size: .95rem; }
.card p:last-child { margin-bottom: 0; }

/* The summary panel at the top of the policy — the part most people actually read. */
.summary {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--accent-fill);
  border-radius: 12px;
  padding: 1.15rem 1.35rem;
  margin: 0 0 2.5rem;
}
.summary p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--stroke); margin: 3rem 0; }

footer { margin-top: 4rem; font-size: .85rem; color: var(--text-faint); }
footer a { color: var(--text-dim); }

/* Keyboard focus must stay visible — it is the only affordance a keyboard user has. */
a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}