/* ---- tokens ---- */
:root{
  --ink:#1B2A4A;
  --paper:#F7F4EC;
  --card:#FFFFFF;
  --stamp:#B23A2F;
  --stamp-dark:#8F2E25;
  --slate:#5C6470;
  --hairline:#DCD5C2;
  --gold:#D9B45C;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0 0 .5em; line-height:1.15;}
p{margin:0 0 1em;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---- header ---- */
.site-header{
  background:var(--ink);
  color:var(--paper);
  position:sticky; top:0; z-index:20;
  border-bottom:3px solid var(--stamp);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.mark{font-family:var(--serif); font-weight:600; font-size:1.15rem;}
nav a{
  color:var(--paper); text-decoration:none; margin-left:28px; font-size:0.92rem;
  opacity:.85; border-bottom:2px solid transparent; padding-bottom:4px;
}
nav a:hover{opacity:1; border-color:var(--stamp);}

/* ---- hero ---- */
.hero{padding:64px 0 80px; border-bottom:1px solid var(--hairline);}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
.docket{
  font-size:0.85rem; letter-spacing:.02em; color:var(--slate);
  border-left:3px solid var(--stamp); padding-left:10px; margin-bottom:18px;
}
.hero h1{font-size:2.6rem; max-width:11.5ch;}
.lede{font-size:1.08rem; color:#3A4256; max-width:52ch;}
.counter{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--hairline);
  display:flex; align-items:baseline; gap:10px;
}
.counter-num{font-family:var(--serif); font-size:2.2rem; font-weight:700; color:var(--stamp);}
.counter-label{color:var(--slate); font-size:0.95rem;}

/* ---- petition sheet ---- */
.sheet{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 1px 0 var(--hairline);
  padding:32px;
}
.sheet-head h2{font-size:1.4rem; margin-bottom:.2em;}
.sheet-head p{color:var(--slate); font-size:0.9rem;}
.field{margin-bottom:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px;}
.opt{font-weight:400; color:var(--slate);}
input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%; padding:11px 12px; font:inherit; font-size:0.95rem;
  border:1px solid #C9C1AC; border-radius:var(--radius); background:#FFFEFB;
  color:var(--ink);
}
input:focus, textarea:focus{
  outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink);
}
textarea{resize:vertical;}
.checkline{
  display:flex; align-items:center; gap:8px; font-weight:400; font-size:0.9rem;
  margin:4px 0 20px;
}
.checkline input{width:auto;}

.stamp-btn{
  display:inline-block; width:100%;
  background:var(--stamp); color:#fff; border:none;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  padding:14px 20px; border-radius:var(--radius);
  cursor:pointer; transition:background .15s ease, transform .05s ease;
}
.stamp-btn:hover{background:var(--stamp-dark);}
.stamp-btn:active{transform:scale(0.99);}
.stamp-btn--dark{background:var(--ink);}
.stamp-btn--dark:hover{background:#0f1830;}
.fineprint{font-size:0.78rem; color:var(--slate); margin-top:10px; margin-bottom:0;}

/* ---- facts / infographic ---- */
.facts{padding:76px 0; border-bottom:1px solid var(--hairline);}
.section-head{max-width:60ch; margin-bottom:36px;}
.section-head h2{font-size:1.9rem;}
.section-head p{color:var(--slate);}

.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:60px;
}
.stat-card{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:22px;
}
.stat-num{font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--stamp); margin-bottom:8px;}
.stat-num span{font-size:1rem; font-weight:400; color:var(--slate); font-family:var(--sans);}
.stat-card p{font-size:0.9rem; color:#3A4256; margin-bottom:0;}
.bar{height:6px; background:var(--hairline); border-radius:3px; margin-top:12px; overflow:hidden;}
.bar span{display:block; height:100%; background:var(--ink);}

.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.split h3{font-size:1.15rem;}
.donut{margin:8px 0 16px;}
.legend{list-style:none; margin:0; padding:0; font-size:0.9rem;}
.legend li{display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#3A4256;}
.legend i{width:12px; height:12px; border-radius:2px; display:inline-block;}

.timeline{list-style:none; margin:8px 0 0; padding:0; border-left:2px solid var(--hairline);}
.timeline li{
  padding:0 0 24px 20px; position:relative; font-size:0.95rem; color:#3A4256;
}
.timeline li::before{
  content:""; position:absolute; left:-6px; top:4px; width:10px; height:10px;
  border-radius:50%; background:var(--stamp);
}
.timeline span{display:block; font-weight:700; color:var(--ink); font-size:0.85rem; margin-bottom:2px;}

/* ---- questionnaire ---- */
.questions{padding:76px 0 96px;}
.q{margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--hairline);}
.q:last-of-type{border-bottom:none;}
.q-label{font-weight:600; font-size:1rem; margin-bottom:12px;}
.options{display:flex; flex-direction:column; gap:10px;}
.options-inline{flex-direction:row; flex-wrap:wrap; gap:20px;}
.options label{
  display:flex; align-items:center; gap:9px; font-weight:400; font-size:0.95rem; cursor:pointer;
}
.options input{width:auto;}
.questions textarea{margin-top:4px;}

/* ---- toast ---- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:var(--radius);
  font-size:0.9rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- footer ---- */
.site-footer{padding:28px 0; color:var(--slate); font-size:0.85rem;}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid, .split{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:2.1rem;}
}
@media (max-width:560px){
  .stat-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  nav a{margin-left:14px; font-size:0.82rem;}
}