/* Shared styles for the QuotSimpl marketing pages (index, pricing).
   Palette and type match demo.html so the site reads as one product. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#FAF9F6; --bg-surface:#F1EEE8; --bg-deep:#17140F; --text:#17140F; --text-muted:#7A6E62;
  --text-on-deep:#F4F0E8; --muted-on-deep:#A99D90;
  --border:#E4DFD6; --border-deep:#332D25; --accent:#FF4D2E; --accent-strong:#C8371D; --accent-soft:#FFE3DC;
  --serif-display:'Bricolage Grotesque', Georgia, serif;
  --sans:'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono:'Space Mono', 'SFMono-Regular', Consolas, monospace;
  --radius:10px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; }
img,svg{ max-width:100%; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- top bar ---------- */
.topbar{ position:sticky; top:0; z-index:20; background:rgba(250,249,246,.88); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.brand{ font-family:var(--serif-display); font-weight:800; font-size:21px; letter-spacing:-0.01em; text-decoration:none; }
.brand em{ font-style:normal; color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ text-decoration:none; color:var(--text-muted); font-size:14.5px; font-weight:500; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px; padding:13px 22px; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s ease, transform .15s ease, border-color .15s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--text-muted); }
.btn-dark{ background:var(--text); color:var(--bg); }
.btn-dark:hover{ background:#000; }
.btn-sm{ font-size:13.5px; padding:9px 16px; }
.btn-block{ width:100%; }

/* ---------- type ---------- */
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); margin:0 0 14px; }
h1,h2,h3{ font-family:var(--serif-display); letter-spacing:-0.02em; margin:0; }
h1{ font-weight:800; font-size:clamp(40px,7vw,76px); line-height:.98; }
h2{ font-weight:800; font-size:clamp(30px,4.4vw,46px); line-height:1.04; }
h3{ font-weight:700; font-size:19px; line-height:1.25; letter-spacing:-0.01em; }
.lead{ font-size:clamp(17px,2vw,20px); color:var(--text-muted); max-width:56ch; margin:22px 0 0; }
.section{ padding:104px 0; }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head p{ color:var(--text-muted); font-size:17px; margin:16px 0 0; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
@media (max-width:600px){ .section{ padding:72px 0; } .section-head{ margin-bottom:40px; } }

/* ---------- footer ---------- */
.site-foot{ background:var(--bg-deep); color:var(--muted-on-deep); padding:64px 0 40px; font-size:14px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.foot-grid .brand{ color:var(--text-on-deep); }
.foot-grid h4{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-deep); margin:0 0 14px; font-weight:400; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-grid a{ text-decoration:none; }
.foot-grid a:hover{ color:var(--text-on-deep); }
.foot-tag{ margin:12px 0 0; max-width:34ch; }
.foot-base{ border-top:1px solid var(--border-deep); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; }
.foot-social{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--muted-on-deep); }
.foot-social:hover{ color:var(--text-on-deep); }
.foot-social svg{ width:16px; height:16px; fill:currentColor; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid > :first-child{ grid-column:1 / -1; } }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; }
.faq details{ border-top:1px solid var(--border); padding:4px 0; }
.faq details:last-child{ border-bottom:1px solid var(--border); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-family:var(--serif-display); font-weight:700; font-size:18.5px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); font-size:20px; color:var(--text-muted); transition:transform .2s ease; flex:none; }
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--accent); }
.faq details p{ margin:0 0 22px; color:var(--text-muted); max-width:64ch; }

/* ---------- closing CTA band ---------- */
.cta-band{ background:var(--accent); color:#fff; border-radius:24px; padding:72px 48px; text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; max-width:18ch; margin:0 auto; }
.cta-band p{ color:rgba(255,255,255,.86); font-size:18px; margin:18px auto 32px; max-width:46ch; }
.cta-band .btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-dark{ background:var(--bg-deep); color:#fff; }
.cta-band .btn-light{ background:#fff; color:var(--text); }
.cta-band .btn-light:hover{ background:var(--bg); }
@media (max-width:600px){ .cta-band{ padding:52px 22px; border-radius:18px; } }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }