/* Vino website: the app's look — navy + gold, Playfair Display headings, DM Sans text, IBM Plex Mono figures */
:root{
  --bg:#f5f2ea; --surface:#fff; --surface-2:#faf7f0; --ink:#1a2233; --muted:#6f685c; --border:#e6dfcf;
  --navy:#0b1524; --navy-2:#13223a; --navy-ink:#f3ecdf; --navy-muted:#9aa4b6;
  --gold:#a8752c; --gold-strong:#8a5f22; --gold-soft:#f3e6cb; --gold-light:#f1c76d; --on-gold:#241704;
  --ok:#1f7a52; --bad:#b3453f; --warn:#9a6812; --warn-soft:#f8ecd6;
}
@media (prefers-color-scheme: dark){ :root{ color-scheme:dark;
  --bg:#0e1522; --surface:#152033; --surface-2:#1a273d; --ink:#ece5d8; --muted:#a0a8b6; --border:#26344d;
  --gold:#d19a4a; --gold-strong:#e2b066; --gold-soft:#2c2416; --warn-soft:#342a15; --warn:#e0a84a; } }
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 "DM Sans", system-ui, sans-serif;}
h1,h2{font-family:"Playfair Display", Georgia, serif; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em;}
h3{margin:0 0 4px; font-size:16.5px;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px;}
.wrap.narrow{max-width:760px;}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold-strong); margin:0 0 8px;}
.sub{color:var(--muted); max-width:62ch; margin:12px 0 0; font-size:17px;}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:14.5px; padding:10px 18px; border-radius:11px; border:1px solid transparent; cursor:pointer; font-family:inherit;}
.btn.big{padding:13px 22px; font-size:15.5px;}
.btn.gold{background:linear-gradient(135deg,var(--gold-strong),var(--gold)); color:var(--on-gold);}
.btn.ghost-light{border-color:rgba(255,255,255,.22); color:var(--navy-ink); background:rgba(255,255,255,.04);}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.announce{background:var(--warn-soft); color:var(--warn); text-align:center; font-weight:600; font-size:14px; padding:8px 16px;}
.top{background:var(--navy); color:var(--navy-ink); position:sticky; top:env(safe-area-inset-top,0px); z-index:10; border-bottom:1px solid rgba(255,255,255,.07);}
.top-in{display:flex; align-items:center; gap:24px; padding-block:12px;}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none;}
.logo span{font-family:"Playfair Display",serif; font-size:23px; color:var(--gold-light); font-weight:700;}
.menu{display:flex; gap:22px; font-size:14.5px;}
.menu a{text-decoration:none; color:var(--navy-muted);}
.menu a:hover{color:var(--navy-ink);}
.top-cta{margin-left:auto; display:flex; gap:10px;}
.burger{display:none; margin-left:auto; background:none; border:0; color:var(--navy-ink); font-size:22px;}

.hero{background:radial-gradient(1100px 500px at 80% 10%, rgba(241,199,109,.14), transparent 60%), linear-gradient(160deg,var(--navy),var(--navy-2)); color:var(--navy-ink);}
.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-block:64px 72px;}
.hero h1{font-size:clamp(36px, 5.2vw, 58px);}
.hero h1 em{font-style:italic; color:var(--gold-light);}
.hero .eyebrow{color:var(--gold-light);}
.lead{font-size:18.5px; color:#cdd4e0; max-width:54ch; margin:18px 0 26px;}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap;}
.play{font-size:13px; color:var(--navy-muted); margin:14px 0 0;}
.ticks{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:#cdd4e0;}
.ticks li::before{content:"✓"; color:var(--gold-light); font-weight:700; margin-right:7px;}

.phone{justify-self:center; width:min(330px,100%); background:#fbf8f1; color:#1a2233; border-radius:30px; padding:12px; box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 8px #1b2a42;}
.ph-head{background:var(--navy); color:var(--navy-ink); border-radius:18px; padding:10px 14px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;}
.ph-head small{margin-left:auto; color:var(--navy-muted); font-weight:500;}
.ph-dot{width:8px; height:8px; border-radius:50%; background:var(--gold-light);}
.ph-body{padding:12px 6px 4px;}
.ph-eye{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a5f22; font-weight:700; margin:0 0 6px;}
.ph-t{width:100%; border-collapse:collapse; font-size:12.5px;}
.ph-t th{font-size:10px; color:#7a7266; text-align:right; font-weight:700; padding:4px;}
.ph-t th:first-child{text-align:left;}
.ph-t td{padding:6px 4px; border-top:1px solid #ece5d6; text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.ph-t td:first-child{text-align:left; font-family:"DM Sans",sans-serif; font-weight:700;}
.ph-t td small{display:block; font-weight:400; color:#8b8376; font-size:10.5px;}
.ph-t tr:nth-child(even) td{background:#f4eee2;}
.ph-sum{display:flex; justify-content:space-between; font-size:12.5px; padding:7px 4px 0;}
.ph-sum b{font-family:"IBM Plex Mono",monospace;}
.ph-ok{margin-top:8px; text-align:center; font-size:12px; font-weight:700; color:#1f7a52; background:#e5f3ec; border-radius:9px; padding:6px;}
.ph-note{text-align:center; font-size:10.5px; color:#8b8376; margin:8px 0 2px;}

.sec{padding-block:72px;}
.sec.alt{background:var(--surface-2); border-block:1px solid var(--border);}
.sec h2{font-size:clamp(28px, 3.6vw, 40px);}
.feat{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:32px;}
.feat > div{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px;}
.feat p{margin:0; color:var(--muted); font-size:14.5px;}
.steps{list-style:none; counter-reset:s; padding:0; margin:32px 0 0; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;}
.steps li{counter-increment:s; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; display:grid; gap:4px; font-size:14.5px; color:var(--muted);}
.steps li::before{content:counter(s); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-strong); font-weight:800; font-size:13px;}
.steps b{color:var(--ink); font-size:15.5px;}
.plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-top:30px;}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; display:grid; gap:4px;}
.plan b{font-size:16px;}
.plan .price{font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:600; color:var(--gold-strong);}
.plan small{color:var(--muted); font-size:13.5px;}
.plan.free{background:var(--navy); color:var(--navy-ink); border-color:var(--navy);}
.plan.free .price{color:var(--gold-light);}
.plan.free small{color:var(--navy-muted);}
details{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-top:10px;}
summary{font-weight:700; cursor:pointer;}
details p{color:var(--muted); margin:8px 0 0;}
.cta{background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:var(--navy-ink);}
.cta .eyebrow{color:var(--gold-light);}
.cta .sub{color:#cdd4e0;}
.demo-in{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.demo-form{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px; display:grid; gap:12px;}
.demo-form label{display:grid; gap:5px; font-size:13.5px; font-weight:600; color:#cdd4e0;}
.demo-form input{padding:11px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.2); color:var(--navy-ink); font:inherit;}
.form-msg{margin:0; min-height:1.4em; font-size:14px;}
.form-msg.ok{color:#7fd6a6;} .form-msg.bad{color:#f3a47f;}
.foot{background:var(--navy); color:var(--navy-muted); padding-block:30px; font-size:14px;}
.foot-in{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 18px;}
.foot nav a{text-decoration:none;}
.foot nav a:hover{color:var(--navy-ink);}
.foot p{margin:0 0 0 auto;}

/* help / legal pages */
.page-hero{background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:var(--navy-ink); padding-block:42px;}
.page-hero .eyebrow{color:var(--gold-light);}
.page-hero h1{font-size:clamp(30px,4vw,42px);}
.page-hero p{color:#cdd4e0; margin:10px 0 0; max-width:62ch;}
.doc{display:grid; grid-template-columns:230px 1fr; gap:36px; padding-block:40px 70px;}
.toc{position:sticky; top:calc(80px + env(safe-area-inset-top,0px)); align-self:start; display:grid; gap:2px; font-size:14px;}
.toc b{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-strong); margin:12px 0 4px;}
.toc a{text-decoration:none; color:var(--muted); padding:3px 0;}
.toc a:hover{color:var(--ink);}
.article{max-width:70ch;}
.article section{padding-top:14px; margin-bottom:26px; border-top:1px solid var(--border);}
.article h2{font-size:25px; margin:12px 0 8px;}
.article p, .article li{color:var(--ink);}
.article ol, .article ul{padding-left:22px;}
.article .note{background:var(--gold-soft); border-radius:10px; padding:10px 14px; font-size:15px;}
.legal{padding-block:36px 70px;}
.legal h2{font-size:22px; margin:28px 0 8px;}
.legal .card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; margin-top:18px;}
.legal .card form{display:grid; gap:10px;}
.legal .card label{display:grid; gap:5px; font-weight:600; font-size:14px;}
.legal .card input, .legal .card textarea{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--ink); font:inherit;}
.legal .form-msg.ok{color:var(--ok);} .legal .form-msg.bad{color:var(--bad);}

@media (max-width: 900px){
  .hero-in, .demo-in{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .menu{display:none; position:absolute; left:0; right:0; top:100%; background:var(--navy); flex-direction:column; gap:0; padding:8px 20px 14px;}
  .menu.open{display:flex;}
  .menu a{padding:9px 0;}
  .burger{display:block;}
  .top-cta{margin-left:0;}
  .top-cta .ghost-light{display:none;}
  .doc{grid-template-columns:1fr;}
  .toc{position:static;}
  .foot p{margin-left:0;}
}
@media (max-width: 480px){ .steps{grid-template-columns:1fr;} .top-cta .btn{padding:8px 12px; font-size:13px;} }
.cta .sub a{color:var(--gold-light);}