/* Vvibe — shared stylesheet for content pages (about, contact, legal, help, 404).
   Landing (index.html) and login carry their own inline CSS; these tokens mirror them
   so the brand stays coherent across the site. No external requests (self-contained). */
:root{
  --ink:#1c1b22; --ink-soft:#55525f; --ink-faint:#8c8895;
  --paper:#fbf7f1; --paper-2:#f4ece1; --card:#ffffff; --line:#ece4d8;
  --flame:#ff6a45; --flame-deep:#e8502f; --amber:#ffb24d; --teal:#11a4a0; --teal-deep:#0c7c79;
  --plum:#5b4b8a;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(36,24,12,.05), 0 12px 34px -12px rgba(80,46,20,.22);
  --shadow-soft:0 1px 2px rgba(36,24,12,.04), 0 18px 50px -22px rgba(80,46,20,.28);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--flame-deep); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{line-height:1.15; letter-spacing:-.02em; margin:0; font-weight:780; color:var(--ink)}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--flame-deep);
  background:rgba(255,106,69,.10); padding:6px 12px; border-radius:999px}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--flame)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:680; font-size:.96rem; padding:13px 22px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn svg{width:16px; height:16px}
.btn-primary{color:#fff; background:linear-gradient(135deg,var(--flame),var(--flame-deep));
  box-shadow:0 8px 20px -8px rgba(232,80,47,.7)}
.btn-primary:hover{transform:translateY(-2px); text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.6); border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{background:#fff; transform:translateY(-2px); text-decoration:none}

/* NAV */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(14px);
  background:rgba(251,247,241,.78); border-bottom:1px solid rgba(236,228,216,.7)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:820; font-size:1.26rem;
  letter-spacing:-.04em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .pin{width:26px; height:26px}
.nav-links{display:flex; gap:30px}
.nav-links a{font-size:.95rem; color:var(--ink-soft); font-weight:560; padding:4px 0}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-cta{display:flex; gap:10px; align-items:center}
@media(max-width:720px){.nav-links{display:none}}

/* PAGE HEADER */
.page-hero{padding:56px 0 30px; position:relative; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(60% 70% at 85% 0%, rgba(255,178,77,.22), transparent 60%),
             radial-gradient(55% 60% at 0% 10%, rgba(17,164,160,.12), transparent 60%)}
.page-hero h1{font-size:clamp(2rem,4vw,3rem); margin:16px 0 0}
.page-hero .lead{margin-top:16px; font-size:1.12rem; color:var(--ink-soft); max-width:46ch}

/* CONTENT / PROSE */
.section{padding:30px 0 70px}
.prose h2{font-size:1.5rem; margin:38px 0 12px}
.prose h3{font-size:1.12rem; margin:26px 0 8px}
.prose p{color:var(--ink-soft); margin:0 0 14px}
.prose ul{color:var(--ink-soft); margin:0 0 14px; padding-left:22px}
.prose li{margin:6px 0}
.prose .updated{color:var(--ink-faint); font-size:.9rem; margin-bottom:8px}

/* CARDS / GRID */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; box-shadow:var(--shadow)}
.tile h3{font-size:1.1rem; margin-bottom:8px}
.tile p{color:var(--ink-soft); font-size:.97rem}

/* FORM */
.form{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px; box-shadow:var(--shadow); max-width:520px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:620; font-size:.9rem; margin-bottom:6px}
.field input,.field textarea{width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-sm); font:inherit; background:var(--paper); color:var(--ink)}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--flame); background:#fff}

/* FOOTER */
.footer{background:var(--paper-2); border-top:1px solid var(--line); padding:54px 0 30px; margin-top:30px}
.footer .muted{color:var(--ink-soft); font-size:.95rem; margin-top:12px; max-width:34ch}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer h4{font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin:9px 0}
.footer li a{color:var(--ink-soft); font-size:.95rem}
.footer li a:hover{color:var(--ink); text-decoration:none}
.footer-bottom{display:flex; align-items:center; justify-content:space-between;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.9rem}
.footer-bottom a{color:var(--ink-faint)}
.socials{display:flex; gap:14px}
.socials a{color:var(--ink-faint)}
@media(max-width:600px){.footer-bottom{flex-direction:column; gap:14px; text-align:center}}

/* 404 */
.center-pad{padding:90px 0; text-align:center}
.center-pad h1{font-size:clamp(3rem,9vw,6rem); background:linear-gradient(120deg,var(--flame),var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.center-pad p{color:var(--ink-soft); font-size:1.1rem; margin:10px 0 26px}