/* ==========================================================================
   Conure — design system
   Ported from web/concept-flock2.html into a shared stylesheet so the
   landing page and the blog share one visual language. Plain CSS on
   purpose (no SCSS) — keeps the toolchain to a single Hugo binary.
   ========================================================================== */

:root {
  --paper: #FBF6ED;
  --paper-warm: #F5EDDD;
  --card: #FFFDF8;
  --ink: #1C2E22;
  --ink-2: #4E5F52;
  --ink-3: #7C8A7E;
  --green: #2E7D4F;
  --green-deep: #1E5A38;
  --orange: #E8722C;
  --orange-data: #C75E12;
  --red: #C6432E;
  --line: rgba(28, 46, 34, 0.14);
  --line-soft: rgba(28, 46, 34, 0.08);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Karla", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; } /* clip (not hidden) → no stray element can force horizontal scroll, and it keeps the sticky nav working */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--orange); color: #fff; }
/* Horizontal padding only (longhand on purpose): a `padding` shorthand here
   would out-specify "section { padding: 88px 0 }" — a class (0,1,0) beats an
   element (0,0,1) — and zero out every section's vertical padding. */
.wrap { max-width: 1140px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.mono { font-family: var(--mono); }

/* ---------- pre-launch banner ---------- */
.prelaunch {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 9px 20px;
}
.prelaunch b { color: #F0A468; font-weight: 500; }
.prelaunch a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 237, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  padding: 16px 28px; max-width: 1140px; margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.brand svg { display: block; }

/* logo: bird on a swing — the swing arm sways around the top (hanger) dot */
.swing-arm { transform-origin: 32px 8px; }
@keyframes sway {
  0%, 100% { transform: rotate(2.6deg); }
  50% { transform: rotate(-2.6deg); }
}
.brand:hover .swing-arm { animation: sway 1.6s ease-in-out infinite; }
.mark-lg .swing-arm { animation: sway 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .swing-arm { animation: none !important; } }
.nav-links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500;
}
.nav-links a:hover { color: var(--green-deep); }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer; border: none; font-family: var(--sans);
}
.btn-green { background: var(--green-deep); color: #FBF6ED; box-shadow: 0 2px 0 rgba(28,46,34,0.25); }
.btn-green:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(30,90,56,0.3); }
.btn-ghost { color: var(--green-deep); border: 1.5px solid var(--green); background: transparent; }
.btn-ghost:hover { background: rgba(46,125,79,0.07); }
.nav-links a.btn-green, .nav-links a.btn-green:hover { color: #FBF6ED; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
  align-items: center; padding-top: 84px; padding-bottom: 72px; /* vertical only — let .wrap keep the horizontal 28px */
}
.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-data); font-weight: 500;
  margin-bottom: 20px;
}
h1 {
  font-family: var(--serif); font-weight: 550; font-size: clamp(40px, 5.2vw, 62px);
  line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 22px;
}
h1 em { font-style: italic; color: var(--green-deep); }
.hero p.lede { font-size: 19px; color: var(--ink-2); max-width: 30em; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }

/* quorum diagram */
.quorum-stage {
  position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; width: 100%;
}
.quorum-svg { width: 100%; height: 100%; display: block; }
.verdict-card {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 18px;
  box-shadow: 0 8px 24px rgba(28,46,34,0.10);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.verdict-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: breathe 2.6s ease-in-out infinite; }
.verdict-card span { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.verdict-card strong { color: var(--green-deep); font-weight: 500; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ping-line { 0% { stroke-dashoffset: 120; opacity: 0; } 15% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ping { stroke-dasharray: 6 6; animation: ping-line 3.9s ease-in-out infinite; }
.ping.p2 { animation-delay: 1.3s; }
.ping.p3 { animation-delay: 2.6s; }
@keyframes pulse-ring { 0% { r: 26; opacity: 0.5; } 100% { r: 46; opacity: 0; } }
.pulse { animation: pulse-ring 2.6s ease-out infinite; }

/* ---------- stat strip ---------- */
.stats {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}
.stats-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1140px; margin: 0 auto; padding: 0 28px;
}
.stat { padding: 26px 20px; border-left: 1px solid var(--line-soft); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat b { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--green-deep); display: block; letter-spacing: -0.01em; }
.stat span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- sections ---------- */
section { padding: 88px 0; }
.sec-label {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-data); margin-bottom: 14px;
}
h2 {
  font-family: var(--serif); font-weight: 550; font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 22em;
}
.sec-sub { color: var(--ink-2); font-size: 17.5px; max-width: 36em; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 26px; position: relative;
}
.step-num {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--orange-data);
  margin-bottom: 14px; display: block;
}
.step h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); }
.step .mono-tag {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}

/* alert classes */
.classes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.class-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; color: var(--ink-2);
}
.class-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- sentry ---------- */
.sentry { background: var(--green-deep); color: #EAF3EC; border-radius: 28px; overflow: hidden; }
.sentry-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 72px 64px; align-items: center; }
.sentry .sec-label { color: #F0A468; }
.sentry h2 { color: #FBF6ED; }
.sentry p { color: rgba(234, 243, 236, 0.78); font-size: 16.5px; }
.sentry-tagline {
  font-family: var(--serif); font-style: italic; font-size: 21px; color: #F0A468;
  margin-top: 26px;
}
.sentry-points { list-style: none; margin-top: 26px; display: grid; gap: 13px; }
.sentry-points li {
  display: flex; gap: 12px; align-items: baseline; font-size: 15.5px;
  color: rgba(234, 243, 236, 0.86);
}
.sentry-points li::before {
  content: "→"; font-family: var(--mono); color: #F0A468; flex-shrink: 0;
}
.ban-feed {
  background: #16402A; border: 1px solid rgba(234,243,236,0.14);
  border-radius: 14px; overflow: hidden;
  font-family: var(--mono); font-size: 12.5px;
}
.ban-feed-head {
  padding: 12px 18px; border-bottom: 1px solid rgba(234,243,236,0.12);
  display: flex; justify-content: space-between; color: rgba(234,243,236,0.55);
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
/* honest label: this is an illustration of the mechanism, not a live feed */
.ban-feed-head .illus { color: #F0A468; }
.ban-row {
  display: grid; grid-template-columns: 118px 1fr auto; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid rgba(234,243,236,0.07);
  color: rgba(234,243,236,0.85);
}
.ban-row:last-child { border-bottom: none; }
.ban-row .ip { color: #FBF6ED; }
.ban-row .why { color: rgba(234,243,236,0.6); }
.ban-row .spread { color: #7FCB9B; text-align: right; white-space: nowrap; }
.ban-summary {
  padding: 14px 18px; background: rgba(0,0,0,0.18); color: #F0A468;
  font-size: 12.5px; text-align: center;
}

/* ---------- evidence ---------- */
.evidence { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.evi-list { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.evi-list li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink-2); align-items: baseline; }
.evi-list li b { color: var(--ink); font-weight: 700; }
.evi-list li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; }
.receipt-mini {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(28,46,34,0.10);
  font-family: var(--mono); font-size: 12.5px; overflow: hidden;
  transform: rotate(0.6deg);
}
.receipt-mini-head {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper-warm);
}
.receipt-mini-head b { font-size: 12px; letter-spacing: 0.1em; color: var(--ink); }
.badge-down {
  background: var(--red); color: #fff; border-radius: 5px; padding: 3px 9px;
  font-size: 11px; letter-spacing: 0.08em;
}
.receipt-body { padding: 18px 20px; display: grid; gap: 9px; color: var(--ink-2); }
.receipt-body .row { display: flex; justify-content: space-between; gap: 16px; }
.receipt-body .row span:last-child { color: var(--ink); text-align: right; }
.receipt-body .fail { color: var(--red); }
.receipt-body .ok { color: var(--green); }
.receipt-foot {
  border-top: 1px dashed var(--line); padding: 13px 20px;
  display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11.5px;
}
.receipt-foot a { color: var(--green-deep); text-decoration: none; }
/* small caption marking a mock/sample so it can't read as a real record */
.sample-caption {
  text-align: center; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-3); margin-top: 12px; letter-spacing: 0.04em;
}

/* ---------- extras ---------- */
.extras-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.extra {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; font-size: 14px;
}
.extra b { display: block; font-size: 15px; margin-bottom: 5px; font-weight: 700; }
.extra span { color: var(--ink-2); font-size: 13.5px; }

/* ---------- pricing ---------- */
.pricing { background: var(--paper-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.tier {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column;
}
.tier.featured { border: 2px solid var(--green); box-shadow: 0 12px 32px rgba(30,90,56,0.12); }
.tier-name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.tier-price { font-family: var(--serif); font-size: 34px; font-weight: 700; margin: 10px 0 2px; letter-spacing: -0.02em; }
.tier-price small { font-size: 15px; font-weight: 400; color: var(--ink-3); font-family: var(--sans); }
.tier-line { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.tier .btn { margin-top: auto; text-align: center; font-size: 14px; padding: 10px 16px; }
.free-note {
  margin-top: 26px; font-size: 14.5px; color: var(--ink-2); text-align: center;
}
.free-note b { color: var(--green-deep); }
.pricing-caveat {
  margin-top: 10px; font-size: 13px; color: var(--ink-3); text-align: center;
  font-family: var(--mono);
}

/* ---------- waitlist ---------- */
.waitlist { background: var(--ink); color: var(--paper); border-radius: 28px; }
.waitlist-inner { padding: 68px 56px; text-align: center; max-width: 640px; margin: 0 auto; }
.waitlist .sec-label { color: #F0A468; }
.waitlist h2 { color: var(--paper); margin: 0 auto 14px; }
.waitlist p { color: rgba(251, 246, 237, 0.75); margin-bottom: 28px; }
.waitlist-form {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  max-width: 480px; margin: 0 auto;
}
.waitlist-form input {
  flex: 1 1 180px; min-width: 0;
  font-family: var(--sans); font-size: 16px;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid rgba(251,246,237,0.25);
  background: rgba(251,246,237,0.06); color: var(--paper);
}
.waitlist-form input::placeholder { color: rgba(251,246,237,0.45); }
.waitlist-form input:focus {
  outline: none; border-color: var(--orange); background: rgba(251,246,237,0.10);
}
/* two inputs share the top row (stacking on narrow screens); button spans full width */
.waitlist-form .btn { flex: 1 1 100%; }
/* Turnstile widget sits on its own centred row */
.waitlist-form .cf-turnstile { flex: 1 1 100%; display: flex; justify-content: center; }
.waitlist-status { margin-top: 16px; font-size: 14px; min-height: 1.2em; }
.waitlist-status.success { color: #7FCB9B; }
.waitlist-status.error { color: #F0A468; }
.waitlist-note { font-size: 12.5px; color: rgba(251,246,237,0.5); margin-top: 16px; margin-bottom: 0; }
.waitlist-note a { color: rgba(251,246,237,0.7); }

/* ---------- footer cta ---------- */
.final { text-align: center; padding-top: 110px; padding-bottom: 96px; }
.final h2 { margin: 0 auto 16px; }
.final p { color: var(--ink-2); margin-bottom: 34px; }
footer {
  border-top: 1px solid var(--line); padding: 30px 0; font-size: 13.5px; color: var(--ink-3);
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1140px; margin: 0 auto; padding: 0 28px; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--ink-2); text-decoration: none; margin-left: 20px; }
footer a:hover { color: var(--green-deep); }
.footer-links { display: flex; align-items: center; }

/* ---------- blog ---------- */
.page-head { padding-top: 72px; padding-bottom: 24px; }
.page-head h1 {
  font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 12px;
}
.page-head .sec-sub { font-size: 18px; }

.post-list { display: grid; gap: 4px; margin: 40px 0 40px; max-width: 760px; }
.post-list-item {
  display: block; text-decoration: none; color: inherit;
  padding: 26px 0; border-top: 1px solid var(--line-soft);
}
.post-list-item:hover h3 { color: var(--green-deep); }
.post-list-item:last-child { border-bottom: 1px solid var(--line-soft); }
.post-list-item time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.post-list-item h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 6px 0 8px; line-height: 1.2; color: var(--ink); transition: color 0.15s ease; }
.post-list-item p { color: var(--ink-2); font-size: 15.5px; max-width: 42em; }

article.post { max-width: 720px; margin: 0 auto; padding-top: 64px; padding-bottom: 40px; }
.post-meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 14px; }
article.post > h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; margin-bottom: 16px; }
.post-lede { font-size: 20px; color: var(--ink-2); font-family: var(--serif); font-weight: 400; line-height: 1.4; margin-bottom: 8px; }
.post-body { font-size: 18px; line-height: 1.68; color: var(--ink); }
.post-body > * + * { margin-top: 24px; }
.post-body h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 48px; max-width: none; }
.post-body h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-top: 36px; }
.post-body p { color: var(--ink); }
.post-body a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li { margin-top: 8px; }
.post-body li::marker { color: var(--orange-data); }
.post-body blockquote {
  border-left: 3px solid var(--orange); padding-left: 22px;
  font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-2);
}
.post-body code {
  font-family: var(--mono); font-size: 0.86em; background: var(--paper-warm);
  padding: 2px 6px; border-radius: 5px;
}
.post-body pre {
  background: var(--ink); color: #EAF3EC; padding: 20px 22px;
  border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.post-body pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.post-body hr { border: none; border-top: 1px solid var(--line); }
.post-foot {
  max-width: 720px; margin: 0 auto; padding-top: 8px; padding-bottom: 40px;
  border-top: 1px solid var(--line-soft);
}
.post-foot-inner { padding-top: 28px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; }
  .quorum-stage { max-width: 380px; }
  /* Without this the pill stays one ~490px nowrap line and overflows the screen */
  .verdict-card { white-space: normal; max-width: 100%; text-align: center; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat { padding-left: 0; border-left: none; }
  .steps, .extras-grid { grid-template-columns: 1fr 1fr; }
  .sentry-inner { grid-template-columns: 1fr; padding: 44px 32px; gap: 36px; }
  .evidence { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .nav-links a:not(.btn) { display: none; }
  .waitlist-inner { padding: 52px 28px; }
}
@media (max-width: 560px) {
  .steps, .extras-grid, .tiers { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  /* let the middle column shrink and wrap instead of forcing the row wider than the screen */
  .ban-row { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 10px; padding-left: 14px; padding-right: 14px; }
}