:root{
  --ink:#161412;
  --paper:#FFFFFF;
  --biscuit:#C8862E;
  --biscuit-dark:#9A6620;
  --green:#1F8A4C;
  --amber:#E89B05;
  --red:#D8432C;
  --grey:#6B655D;
  --rule:#161412;
  --bg-soft:#FBF8F3;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Karla',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px;}

/* ---------- top bar ---------- */
header{
  border-bottom:8px solid var(--rule);
  padding:14px 0;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.logo{font-family:'Anton',sans-serif;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.45rem;}
.logo .dot{width:.9em;height:.9em;border-radius:50%;background:var(--biscuit);display:inline-block;position:relative;}
.logo .dot::after{content:"";position:absolute;inset:22%;border-radius:50%;background:
  radial-gradient(circle at 30% 30%, var(--biscuit-dark) 12%, transparent 13%),
  radial-gradient(circle at 70% 40%, var(--biscuit-dark) 12%, transparent 13%),
  radial-gradient(circle at 45% 72%, var(--biscuit-dark) 12%, transparent 13%);}
.topbar a.cta-mini{
  font-weight:700;font-size:.85rem;text-decoration:none;color:var(--paper);
  background:var(--ink);padding:.55rem 1rem;border-radius:999px;white-space:nowrap;
}
.topbar a.cta-mini:hover{background:var(--biscuit-dark);}

/* ---------- hero ---------- */
.hero{padding:56px 0 64px;}
.eyebrow{
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--biscuit-dark);
  margin-bottom:1rem;
}
h1{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,5.2rem);line-height:.98;letter-spacing:.005em;
  max-width:14ch;
}
h1 .vs{color:var(--biscuit);}
.hero p.lede{
  margin:1.4rem auto 0;font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:46ch;color:var(--grey);text-align:center;
}
.hero p.lede strong{color:var(--ink);}

/* ---------- demo card ---------- */
.demo{
  margin-top:2.6rem;
  border:2.5px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--biscuit);
  background:var(--paper);
}
.demo-head{
  border-bottom:8px solid var(--rule);
  padding:14px 18px 10px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.demo-head .title{font-family:'Anton',sans-serif;font-size:1.3rem;text-transform:uppercase;}
.demo-head .sub{font-size:.82rem;color:var(--grey);font-weight:500;}

/* product picker */
.picker{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:12px 18px;background:var(--bg-soft);
  border-bottom:2.5px solid var(--ink);
}
.picker button{
  font-family:'Karla',sans-serif;font-weight:700;font-size:.85rem;
  padding:.45rem .9rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  transition:background .15s,color .15s;
}
.picker button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.picker button:hover:not([aria-pressed="true"]){background:var(--biscuit);}

.demo-body{display:grid;grid-template-columns:1fr 1fr;}
.panel{padding:20px 18px 24px;}
.panel + .panel{border-left:2.5px solid var(--ink);}
.panel .label-tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:4px;margin-bottom:.9rem;
}
.panel.recommended .label-tag{background:var(--bg-soft);border:1.5px solid var(--ink);}
.panel.reality .label-tag{background:var(--ink);color:var(--paper);}
.amount{font-family:'Anton',sans-serif;font-size:clamp(2rem,5vw,2.9rem);line-height:1;}
.amount small{font-size:.45em;color:var(--grey);font-family:'Karla',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.nutri{margin-top:1.1rem;border-top:5px solid var(--ink);}
.nutri .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 0;border-bottom:1px solid #D9D4CC;font-size:.95rem;
}
.nutri .row .k{font-weight:700;}
.nutri .row .v{font-variant-numeric:tabular-nums;font-weight:500;}
.pill{
  display:inline-block;min-width:4.6em;text-align:center;
  font-size:.78rem;font-weight:700;color:#fff;border-radius:999px;padding:.18rem .6rem;
  transition:background .25s;
}
.pill.low{background:var(--green);}
.pill.med{background:var(--amber);}
.pill.high{background:var(--red);}
.slider-zone{margin-top:1.3rem;}
.slider-zone label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.5rem;}
input[type=range]{
  width:100%;appearance:none;-webkit-appearance:none;height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--amber) 55%,var(--red));
  outline-offset:4px;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink);
}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink);
}
.gap-strip{
  border-top:2.5px solid var(--ink);
  background:var(--ink);color:var(--paper);
  padding:12px 18px;font-size:.95rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;
}
.gap-strip strong{color:var(--biscuit);font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.03em;}

/* ---------- section scaffolding ---------- */
section{padding:64px 0;}
section + section{border-top:8px solid var(--rule);}
.sec-label{
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--biscuit-dark);margin-bottom:.8rem;
}
h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.05;margin-bottom:1rem;max-width:22ch;
}
.muted{color:var(--grey);max-width:60ch;}

/* interior pages */
.page-hero{padding:64px 0 34px;border-bottom:8px solid var(--rule);}
.page-hero h1{max-width:16ch;}
.page-content{padding:46px 0 72px;}
.page-content p{
  color:var(--grey);
  font-size:clamp(1.05rem,2vw,1.2rem);
  max-width:68ch;
}
.page-content p + p{margin-top:1rem;}
.page-actions{margin-top:2rem;display:flex;gap:10px;flex-wrap:wrap;}
.button-link{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  padding:.7rem 1.1rem;
  border-radius:999px;
}
.button-link:hover{background:var(--biscuit-dark);}

/* how it works */
.steps{margin-top:2.2rem;border-top:5px solid var(--ink);}
.step{
  display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;
  padding:1.4rem 0;border-bottom:1px solid #D9D4CC;
}
.step .num{
  font-family:'Anton',sans-serif;font-size:2.2rem;color:var(--biscuit);line-height:1;
}
.step h3{font-size:1.1rem;margin-bottom:.25rem;}
.step p{color:var(--grey);font-size:.97rem;max-width:56ch;}

/* community */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.community-note{margin-top:.8rem;max-width:none;}
.stat-card{
  border:2.5px solid var(--ink);border-radius:14px;padding:22px;background:var(--bg-soft);
}
.stat-card .big{font-family:'Anton',sans-serif;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;}
.stat-card .big span{color:var(--red);}
.stat-card p{margin-top:.6rem;color:var(--grey);font-size:.95rem;}
.bars{margin-top:1.2rem;display:grid;gap:.7rem;}
.bar-row{display:grid;grid-template-columns:9.5em 1fr;align-items:center;gap:.7rem;font-size:.85rem;font-weight:700;}
.bar{height:20px;border-radius:4px;border:1.5px solid var(--ink);position:relative;overflow:hidden;background:var(--paper);}
.bar i{position:absolute;inset:0;transform-origin:left;border-radius:2px;}
.bar.rec i{background:var(--green);width:30%;}
.bar.real i{background:var(--biscuit);width:100%;}
.bar-cap{font-weight:500;color:var(--grey);font-size:.8rem;}

/* mission */
.mission blockquote{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.15;max-width:24ch;
}
.mission blockquote em{font-style:normal;color:var(--biscuit);}
.mission p{margin-top:1.2rem;}

/* cta */
.cta-final{text-align:center;background:var(--ink);color:var(--paper);}
.cta-final h2{margin-left:auto;margin-right:auto;}
.cta-final h2 .q{color:var(--biscuit);}
.cta-final .muted{color:#B8B2A8;margin:0 auto;}
.signup{
  margin:2rem auto 0;display:flex;gap:10px;max-width:440px;flex-wrap:wrap;justify-content:center;
}
.signup input{
  flex:1;min-width:220px;padding:.85rem 1rem;border-radius:999px;border:2px solid var(--paper);
  background:transparent;color:var(--paper);font-family:'Karla',sans-serif;font-size:1rem;
}
.signup input::placeholder{color:#8F897F;}
.signup input:disabled{opacity:.5;}
.signup button{
  padding:.85rem 1.5rem;border-radius:999px;border:2px solid var(--biscuit);
  background:var(--biscuit);color:var(--ink);font-weight:700;font-size:1rem;cursor:pointer;font-family:'Karla',sans-serif;
}
.signup button:hover:not(:disabled){background:var(--paper);border-color:var(--paper);}
.signup button:disabled{cursor:default;opacity:.85;}
.signup-note{margin-top:.8rem;font-size:.8rem;color:#8F897F;min-height:1.2em;}
.signup-note.error{color:#F2A196;font-weight:700;}
.signup-note.success{color:#7FCF9E;font-weight:700;}

footer{
  background:var(--ink);color:#8F897F;border-top:1px solid #3A362F;
  padding:22px 0;font-size:.82rem;
}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
footer a{color:#B8B2A8;text-decoration:none;}
footer a:hover{color:var(--paper);}

:focus-visible{outline:3px solid var(--biscuit);outline-offset:3px;}

@media (max-width:720px){
  .demo-body{grid-template-columns:1fr;}
  .panel + .panel{border-left:none;border-top:2.5px solid var(--ink);}
  .split{grid-template-columns:1fr;}
  .step{grid-template-columns:48px 1fr;}
  section{padding:48px 0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;}
}