/* Anivo — anivo.net
 *
 * Built to be read by two audiences at once: a wine producer deciding whether
 * to pay us, and a payment-processor underwriter deciding what kind of business
 * this is. The second one is why the "we never sell alcohol" statement is
 * prominent rather than buried in the footer — a reviewer who cannot tell
 * whether we are a consumer alcohol merchant will assume we are.
 */
:root{
  --ink:#16130f; --paper:#f7f4ef; --card:#fffdfa; --wine:#6e1f26; --gold:#b8912f;
  --muted:#5f5952; --line:rgba(22,19,15,.14);
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* ---------- nav ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(247,244,239,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1120px;margin:0 auto;padding:18px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:26px}
.brand{font-size:15px;letter-spacing:.42em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.nav a{text-decoration:none;opacity:.85;padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
.nav a:hover{border-bottom-color:var(--ink);opacity:1}
.cta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);padding:11px 18px;transition:.2s;white-space:nowrap}
.cta:hover{background:var(--ink);color:var(--paper)}
@media(max-width:880px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding:90px 0 82px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,5.4vw,58px);font-weight:400;
  line-height:1.08;max-width:17ch;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:clamp(15px,1.7vw,18px);line-height:1.85;opacity:.86;max-width:58ch}
.hero .eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  opacity:.7;margin-bottom:24px}

/* ---------- the compliance statement — deliberately high on the page ---------- */
.stance{background:var(--card);border-top:3px solid var(--wine);padding:34px 0}
.stance .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
.stance .k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--wine);
  white-space:nowrap;padding-top:4px}
.stance p{font-size:15.5px;line-height:1.8;max-width:74ch}
.stance b{font-weight:500}
@media(max-width:760px){.stance .wrap{grid-template-columns:1fr;gap:12px}}

/* ---------- sections ---------- */
.section{padding:82px 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:none}
.sec-h{font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-bottom:16px}
.section h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:400;
  line-height:1.18;max-width:20ch;margin-bottom:20px}
.section .intro{font-size:16px;line-height:1.85;max-width:62ch;opacity:.9}

.steps{counter-reset:s;margin-top:44px;display:grid;gap:2px}
/* :before is itself a grid item — so this is a TWO item grid: the number, then
   one content div. An extra spacer div made it three, which wrapped and crushed
   the text into the 56px number column. That is what broke it on phones. */
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;
  padding:26px 0;border-top:1px solid var(--line)}
.step:before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1.1}
@media(max-width:640px){
  .step{grid-template-columns:1fr;gap:6px}
  .step:before{font-size:22px}
}
.step h3{font-family:var(--serif);font-size:21px;font-weight:400;margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.8;opacity:.88;max-width:70ch}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;margin-top:44px}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.col{background:var(--card);border:1px solid var(--line);padding:34px 30px}
.col h3{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:6px}
.col .who{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);margin-bottom:18px}
.col ul{list-style:none;margin-top:14px}
.col li{font-size:14.5px;line-height:1.75;padding:9px 0 9px 20px;position:relative;opacity:.9}
.col li:before{content:'';position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--gold)}

/* ---------- pricing ---------- */
.ptable{margin-top:38px;border:1px solid var(--line);background:var(--card)}
.prow{display:grid;grid-template-columns:1fr auto;gap:20px;padding:18px 24px;border-bottom:1px solid var(--line);align-items:baseline}
.prow:last-child{border-bottom:none}
.prow .n{font-size:14.5px}
.prow .n small{display:block;font-size:12.5px;opacity:.7;margin-top:4px;line-height:1.6}
.prow .p{font-family:var(--serif);font-size:19px;white-space:nowrap}
.pnote{font-size:13px;line-height:1.8;opacity:.75;margin-top:20px;max-width:70ch}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:60px 0 26px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;font-size:13px;line-height:2}
@media(max-width:800px){.foot{grid-template-columns:1fr;gap:26px}}
.foot .fh{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
.foot a{opacity:.9}
.foot-brand{font-size:15px;letter-spacing:.42em;text-transform:uppercase;margin-bottom:14px}
.legal{border-top:1px solid rgba(247,244,239,.16);margin-top:44px;padding-top:22px;
  font-size:11.5px;line-height:1.9;opacity:.68;max-width:82ch}

/* ---------- legal pages ---------- */
.doc{padding:64px 0 90px;max-width:800px}
.doc h1{font-family:var(--serif);font-size:38px;font-weight:400;margin-bottom:8px}
.doc .updated{font-size:12px;opacity:.65;margin-bottom:38px}
.doc h2{font-family:var(--serif);font-size:22px;font-weight:400;margin:38px 0 12px}
.doc p,.doc li{font-size:15px;line-height:1.85;opacity:.92;margin-bottom:14px}
.doc ul{margin:0 0 14px 20px}
.doc .callout{background:var(--card);border-left:3px solid var(--wine);padding:20px 24px;margin:26px 0}
.doc .callout p:last-child{margin-bottom:0}

/* ---------- small screens ----------
   The site is read on a phone at least as often as on a laptop, and the first
   version was never checked there. */
@media(max-width:640px){
  .wrap,.top-in{padding-left:20px;padding-right:20px}
  .hero{padding:56px 0 50px}
  .section{padding:52px 0}
  .top-in{gap:12px}
  .brand{font-size:13px;letter-spacing:.3em}
  .cta{padding:9px 13px;font-size:9.5px;letter-spacing:.14em}
  .col{padding:26px 22px}
  .doc{padding:40px 0 64px}
  .doc h1{font-size:30px}
  /* nothing may force a sideways scroll */
  body{overflow-x:hidden}
  h1,h2,h3,p,li{overflow-wrap:break-word}
}