:root{
  --parchment:#EDE4D3;
  --paper:#F7F2E7;
  --ink:#2B2620;
  --ink-soft:#5B5347;
  --green:#3F4B34;
  --green-deep:#242B1D;
  --gold:#C9A227;
  --gold-soft:#E7D9A6;
  --clay:#8A4B32;
  --mucilage:#DCE8DA;
  --line: rgba(43,38,32,.16);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  line-height:1.65;
}
.font-display{ font-family:'Fraunces', ui-serif, Georgia, serif; }
.font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
section{ scroll-margin-top:88px; }
::selection{ background:var(--gold-soft); color:var(--ink); }

a, button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px; }

.btn-primary{
  background:var(--green); color:var(--paper);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 1px 0 rgba(43,38,32,.15);
}
.btn-primary:hover{ background:#4c5a3f; transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(63,75,52,.55); }
.btn-primary:active{ transform:translateY(0); }

.btn-outline{
  border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn-outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }
.btn-outline:active{ transform:translateY(0); }

.btn-outline-light{
  border:1.5px solid var(--paper); color:var(--paper); background:transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn-outline-light:hover{ background:var(--paper); color:var(--ink); transform:translateY(-1px); }
.btn-outline-light:active{ transform:translateY(0); }

.chip{
  border:1px solid var(--line); background:var(--paper);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-surface{
  background:var(--paper);
  box-shadow: 0 1px 2px rgba(43,38,32,.06), 0 10px 24px -18px rgba(43,38,32,.35);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-surface:hover{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(43,38,32,.08), 0 18px 30px -16px rgba(63,75,52,.35); }

.path-card{
  background:var(--paper);
  box-shadow: 0 1px 2px rgba(43,38,32,.06), 0 14px 30px -20px rgba(43,38,32,.4);
  transition: transform .22s ease, box-shadow .22s ease;
}
.path-card:hover{ transform:translateY(-5px); box-shadow:0 1px 2px rgba(43,38,32,.08), 0 22px 34px -18px rgba(63,75,52,.4); }

.hairline{ border-color:var(--line); }

/* --- Nav --- */
#nav{ transition: box-shadow .25s ease, background-color .25s ease; }
#nav.scrolled{ box-shadow: 0 8px 24px -18px rgba(43,38,32,.5); }

/* --- Cylinder signature element --- */
.cyl-wrap{ position:relative; }
.cyl{
  position:relative;
  width:96px; height:280px;
  margin:0 auto;
}
.cyl-inner{
  position:absolute; inset:0;
  border:2px solid var(--ink);
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  border-top-left-radius:4px; border-top-right-radius:4px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%), var(--paper);
  overflow:hidden;
}
.cyl .husk{
  position:absolute; left:0; right:0; bottom:0; height:8%;
  background-image: radial-gradient(circle, var(--gold) 0 1.2px, transparent 1.3px);
  background-size: var(--speck-size, 7px) var(--speck-size, 7px);
  background-color:#DCCB92;
  z-index:2;
}
.cyl .liquid{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background: linear-gradient(180deg, rgba(220,232,218,.65), rgba(220,232,218,.92));
  transform: scaleY(0.07);
  transform-origin:bottom;
  transition: transform 1.3s cubic-bezier(.22,.9,.3,1.1);
  z-index:1;
}
.cyl.swelled .liquid{ transform: scaleY(0.66); }
.cyl.swelled .husk{ opacity:.55; }
.ticks{ position:absolute; top:6%; bottom:4%; left:100%; margin-left:10px; display:flex; flex-direction:column-reverse; justify-content:space-between; }
.ticks span{ font-size:10px; color:var(--ink-soft); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  .cyl .liquid{ transition: none; }
  .btn-primary, .btn-outline, .btn-outline-light, .card-surface, .path-card{ transition:none; }
}

/* FAQ marker */
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
details .chev{ transition: transform .2s ease; }
details[open] .chev{ transform: rotate(45deg); }

.step-num{ font-family:'IBM Plex Mono', monospace; color:var(--gold); }

.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }