/* Idea Heron — shared site styles for secondary pages (About / Support / Privacy).
   Matches the Tremor Landing aesthetic: dark, molten accent, editorial serif. */

:root {
  --ink:#0B0C0E; --ink900:#0B0C0E; --ink800:#16181C; --ink700:#1F2227;
  --ink400:#5b626c; --ink300:#8A8F99; --ink200:#B6BAC2;
  --bone:#F7F6F3; --molten:#E4581F; --molten-bright:#F98C3C;
  --hair:rgba(255,255,255,0.08);
  --serif:"New York",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body {
  margin:0; background:var(--ink); color:var(--bone);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}

/* ---- Background ---- */
.bg-wash { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 86% -8%, rgba(228,88,31,0.16) 0%, transparent 46%),
    radial-gradient(80% 80% at 50% 120%, rgba(228,88,31,0.05) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 30%, #16181C 0%, #0B0C0E 72%); }
.vignette { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 30%, transparent 60%, rgba(0,0,0,0.45) 100%); }

/* ---- Nav ---- */
.site-nav { position:relative; z-index:3; display:flex; align-items:center; justify-content:flex-end;
  padding:26px 40px; width:100%; }
.navlinks { display:flex; gap:30px; }
.navlinks a { color:var(--ink200); text-decoration:none; font-size:13.5px; transition:color .2s; }
.navlinks a:hover { color:var(--bone); }
.navlinks a.active { color:var(--bone); }

/* ---- Page shell ---- */
main { position:relative; z-index:3; flex:1 0 auto; width:100%; }
.wrap { max-width:760px; margin:0 auto; padding:64px 40px 40px; }
.wrap--wide { max-width:1000px; }

.page-kicker { font-family:var(--mono); font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--molten); font-weight:600; margin:0 0 16px; }
.page-title { font-family:var(--serif); font-weight:500; font-size:clamp(40px,6.4vw,72px);
  line-height:1.0; letter-spacing:-0.025em; margin:0; text-wrap:balance; }
.page-title em { font-style:italic; color:var(--molten); }
.updated { font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; color:var(--ink300); margin:20px 0 0; }

.lead { font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--ink200); margin:28px 0 0;
  max-width:34ch; text-wrap:pretty; }

/* ---- Body copy ---- */
.prose { margin-top:44px; }
.prose p { font-size:17px; line-height:1.62; color:var(--ink200); margin:0 0 22px; text-wrap:pretty; }
.prose p.big { font-size:19px; color:var(--bone); }
.prose strong { color:var(--bone); font-weight:600; }
.prose a, a.link { color:var(--molten-bright); text-decoration:none; border-bottom:1px solid rgba(249,140,60,0.35);
  transition:border-color .2s, color .2s; }
.prose a:hover, a.link:hover { color:#ffb06a; border-color:rgba(249,140,60,0.8); }

.prose h2 { font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:-0.015em;
  color:var(--bone); margin:46px 0 16px; }

/* Section hairline above each policy heading */
.prose h2.ruled { padding-top:30px; border-top:1px solid var(--hair); }

/* ---- Callout (privacy "short version") ---- */
.callout { margin:30px 0 8px; padding:22px 24px; border-radius:14px;
  background:rgba(228,88,31,0.07); border:1px solid rgba(228,88,31,0.22); }
.callout p { margin:0; font-size:17px; line-height:1.6; color:var(--bone); }

/* ---- Support: contact block ---- */
.contact-card { margin:40px 0 8px; padding:26px 28px; border-radius:16px;
  background:var(--ink800); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.contact-card .label { font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink300); margin:0 0 6px; }
.contact-card .email { font-family:var(--serif); font-size:24px; color:var(--bone); letter-spacing:-0.01em; }

/* ---- Buttons ---- */
.btn { display:inline-block; font-size:15px; font-weight:500; padding:13px 24px; border-radius:999px;
  cursor:pointer; border:1px solid transparent; text-decoration:none; transition:transform .15s, background .2s, border-color .2s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--molten); color:#fff; box-shadow:0 6px 24px -6px rgba(228,88,31,0.55); }
.btn-primary:hover { background:#F0692C; }
.btn-ghost { background:rgba(255,255,255,0.04); color:var(--bone); border-color:rgba(255,255,255,0.14); }
.btn-ghost:hover { background:rgba(255,255,255,0.09); }

/* ---- FAQ accordion (Support) ---- */
.faq { margin-top:14px; border-top:1px solid var(--hair); }
.qa { border-bottom:1px solid var(--hair); }
.qa > summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-size:20px; letter-spacing:-0.01em; color:var(--bone); }
.qa > summary::-webkit-details-marker { display:none; }
.qa > summary::after { content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.6px solid var(--molten); border-bottom:1.6px solid var(--molten);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s; }
.qa[open] > summary::after { transform:translateY(-30%) rotate(-135deg); }
.qa > summary:hover { color:var(--molten-bright); }
.qa .answer { padding:0 44px 24px 0; }
.qa .answer p { margin:0; font-size:16px; line-height:1.62; color:var(--ink200); text-wrap:pretty; }

/* ---- Footer brand logo ---- */
.footer-brand { display:flex; justify-content:center; margin-bottom:-20px; }
.footer-brand img { height:192px; width:auto; display:block; opacity:0.96; transition:opacity .2s; }
.footer-brand:hover img { opacity:1; }

/* ---- Footer ---- */
.site-footer { position:relative; z-index:3; flex-shrink:0; text-align:center;
  padding:30px 40px 34px; font-size:13px; letter-spacing:0.04em; color:var(--ink300);
  border-top:1px solid var(--hair); margin-top:48px; }
.site-footer .row { max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.site-footer a { color:var(--ink300); text-decoration:none; }
.site-footer a:hover { color:var(--bone); }

@media (max-width:720px){
  .site-nav { padding:18px 22px; }
  .navlinks { gap:18px; }
  .wrap { padding:44px 22px 32px; }
}