/* The Cellar Book — marketing site shared styles.
   Dark, warm "cellar" theme. Fraunces (display) + Sora (text).
   Served static from app/site/ (see app/nginx.conf); no build step. */

:root {
  --bg:#151110; --ink:#EFE6D8; --muted:#B7A797; --soft:#CDBFB0;
  --amber:#C57A3B; --amber2:#E8B77F; --card:#1e1712; --line:#3d2f24;
  --maxw:1040px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:'Sora',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ── Buttons ── */
.btn {
  display:inline-block; background:var(--amber); color:#fff;
  padding:11px 20px; border-radius:999px; font-size:14px; font-weight:500;
  transition:.2s; border:1px solid var(--amber); cursor:pointer;
}
.btn:hover { background:#b06a30; }
.btn-ghost { background:transparent; color:var(--amber2); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--amber); }

/* ── Header / nav ── */
header.site { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; }
.brand { font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:#F3E9DA; line-height:1.1; }
.brand small { display:block; font-family:'Sora',sans-serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--amber); }
/* Header page selector — a native <details> dropdown (no framework).
   Holds every page link plus Log in, so it's the one nav on all screens. */
.menu { position:relative; }
.menu > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink); font-size:14px; font-weight:500; background:transparent; transition:.2s;
}
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary::marker { content:''; }
.menu > summary:hover, .menu[open] > summary { border-color:var(--amber); color:var(--amber2); }
.menu > summary .bars { display:inline-flex; flex-direction:column; gap:3px; }
.menu > summary .bars span { width:16px; height:2px; background:currentColor; border-radius:2px; transition:.2s; }
.menu .panel {
  position:absolute; right:0; top:calc(100% + 10px); z-index:40;
  min-width:214px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:8px; box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.menu .panel a {
  display:block; padding:11px 14px; border-radius:9px; font-size:15px; color:var(--soft); transition:.15s;
}
.menu .panel a:hover { background:#241b15; color:var(--amber2); }
.menu .panel a[aria-current="page"] { color:var(--amber2); }
.menu .panel .sep { height:1px; background:var(--line); margin:8px 4px; }
.menu .panel a.signin { color:var(--amber2); font-weight:500; }
.menu .panel a.signin:hover { background:var(--amber); color:#fff; }

/* ── Hero ── */
.hero { padding:70px 0 60px; text-align:center; }
.hero .tag, .eyebrow { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); margin-bottom:18px; }
.hero h1 { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(34px,6vw,58px); line-height:1.08; color:#F5ECDD; letter-spacing:.2px; }
.hero p.lede { max-width:640px; margin:22px auto 30px; font-size:18px; color:var(--soft); }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.journey { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:44px 0 10px; color:#9E8E7E; font-size:13px; letter-spacing:1px; }
.journey b { color:var(--amber2); font-weight:500; }

/* ── Page header (interior pages) ── */
.page-head { padding:56px 0 18px; text-align:center; }
.page-head h1 { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,5vw,46px); color:#F5ECDD; line-height:1.1; }
.page-head p { max-width:600px; margin:18px auto 0; font-size:17px; color:var(--soft); }

/* ── Cards grid ── */
section.features { padding:56px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
.card h3 { font-family:'Fraunces',serif; font-size:19px; color:#F3E9DA; margin-bottom:8px; }
.card p { color:var(--muted); font-size:14px; }
.card ul { color:var(--muted); font-size:14px; margin:8px 0 0 18px; }
.card ul li { margin:3px 0; }

/* ── Band (call-to-action strip) ── */
.band { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; text-align:center; }
.band h2 { font-family:'Fraunces',serif; font-size:26px; color:#F3E9DA; margin-bottom:12px; }
.band p { color:var(--muted); max-width:560px; margin:0 auto 20px; }

/* ── Steps (how it works) ── */
.steps { padding:48px 0; display:grid; gap:16px; }
.step { display:flex; gap:18px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
.step .num { flex:none; width:40px; height:40px; border-radius:999px; border:1px solid var(--amber); color:var(--amber2); font-family:'Fraunces',serif; font-size:18px; display:flex; align-items:center; justify-content:center; }
.step h3 { font-family:'Fraunces',serif; font-size:19px; color:#F3E9DA; margin-bottom:6px; }
.step p { color:var(--muted); font-size:14px; }

/* ── FAQ ── */
.faq { padding:40px 0 10px; }
.faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary { font-family:'Fraunces',serif; font-size:18px; color:#F3E9DA; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--amber); font-size:22px; line-height:1; transition:.2s; }
.faq details[open] summary::after { content:'–'; }
.faq details p { color:var(--soft); font-size:15px; margin-top:12px; }
.faq details p + p { margin-top:8px; }

/* ── Prose (about-style copy) ── */
.prose { max-width:680px; margin:0 auto; padding:44px 0; }
.prose h2 { font-family:'Fraunces',serif; font-size:24px; color:#F3E9DA; margin:32px 0 12px; }
.prose p { color:var(--soft); font-size:16px; margin-bottom:14px; }

/* ── Pricing ── */
.plans { padding:28px 0 10px; }
.plans h2 { font-family:'Fraunces',serif; font-size:24px; color:#F3E9DA; margin:26px 0 6px; }
.plans .sub { color:var(--muted); font-size:14px; margin-bottom:18px; }
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; align-items:stretch; }
.tier { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; }
.tier.featured { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.tier .plan-name { font-family:'Fraunces',serif; font-size:20px; color:#F3E9DA; }
.tier .plan-for { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin:2px 0 14px; }
.tier .price { font-family:'Fraunces',serif; font-size:38px; color:#F5ECDD; line-height:1; }
.tier .price small { font-family:'Sora',sans-serif; font-size:13px; color:var(--muted); font-weight:400; }
.tier .per-user { font-size:13px; color:var(--amber2); margin-top:6px; }
.tier ul { list-style:none; margin:18px 0 22px; padding:0; flex:1; }
.tier ul li { position:relative; padding:5px 0 5px 24px; color:var(--muted); font-size:14px; }
.tier ul li::before { content:'✓'; position:absolute; left:0; color:var(--amber); }
.tier ul li.lim::before { content:'·'; color:#7d6f61; }
.tier ul li .coming { color:#7d6f61; font-size:12px; }
.tier .soon { display:inline-block; text-align:center; padding:11px 20px; border-radius:999px; font-size:14px; border:1px dashed var(--line); color:#9E8E7E; }
.pricing-note { max-width:680px; margin:34px auto 0; padding:18px 22px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.pricing-note p { color:var(--muted); font-size:13px; margin:5px 0; }
.pricing-note b { color:var(--soft); font-weight:500; }

/* ── Contact form ── */
.contact-form { max-width:560px; margin:0 auto; padding:8px 0 20px; }
.contact-form .field { margin-bottom:18px; }
.contact-form label { display:block; font-size:13px; letter-spacing:.4px; color:var(--soft); margin-bottom:7px; }
.contact-form input, .contact-form textarea {
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font-family:inherit; font-size:15px; line-height:1.5; padding:12px 14px;
  transition:.15s; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--amber); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#6f6053; }
.contact-form button { margin-top:4px; }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status { margin-top:16px; font-size:14px; color:var(--soft); min-height:20px; }
.form-status.ok { color:var(--amber2); }
.form-status.err { color:#d98a6a; }

/* ── Download / get the app ── */
.platforms { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; padding:28px 0 8px; }
.platform { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px; display:flex; flex-direction:column; }
.platform .ptag { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:10px; }
.platform h3 { font-family:'Fraunces',serif; font-size:22px; color:#F3E9DA; margin-bottom:10px; }
.platform p { color:var(--muted); font-size:14px; margin-bottom:14px; }
.platform p b { color:var(--soft); font-weight:500; }
.platform .actions { margin-top:auto; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.platform .actions .hint { font-size:12.5px; color:#7d6f61; margin:0; }
.badge-soon { display:inline-block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#9E8E7E; border:1px dashed var(--line); border-radius:999px; padding:5px 12px; }

/* ── Footer ── */
footer.site { padding:44px 0; border-top:1px solid var(--line); margin-top:20px; color:#7d6f61; font-size:13px; }
footer.site .cols { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
footer.site a { color:var(--amber2); }
footer.site nav { display:flex; gap:18px; flex-wrap:wrap; }
footer.site .fine { margin-top:22px; color:#6b5f53; }