/* ============================================================
   Digitally Native — shared brand system (dn.css)
   Single source of truth for tokens + chrome shared across
   every page: nav, footer, buttons, typography, section
   scaffold, FAQ, motion primitives.

   Versioned filename (dn.v1.css) is deliberate: netlify.toml
   caches *.css immutable for 1 year. When this file changes,
   bump to dn.v2.css and update the <link> in every page so
   returning visitors never see stale styles.

   Page-specific CSS (hero instruments, demo panels, stats,
   cases, etc.) stays inline in each page's <style>.
   ============================================================ */

:root {
  --ink:#0A0A0A; --teal:#00CBA7; --teal-bright:#00F5CE; --muted:#9B9B9B; --rule:#E0E0E0; --rule-strong:#0A0A0A; --bg:#fff;
  --alert:#D6452F;
  --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --maxw:1180px;
}

/* === RESET === */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:var(--teal); color:var(--ink); }

/* === LAYOUT === */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px) { .wrap { padding:0 3rem; } }

/* === TYPOGRAPHY PRIMITIVES === */
h1.display { font-family:var(--sans); font-weight:700; font-size:clamp(2.5rem, 5.4vw, 4.3rem); line-height:1.03; letter-spacing:-.025em; margin-bottom:1.5rem; }
h2.display { font-family:var(--sans); font-weight:700; font-size:clamp(1.9rem, 4vw, 2.85rem); line-height:1.08; letter-spacing:-.015em; }
.display .teal, h1.display .teal, h2.display .teal { color:var(--teal); }

.eyebrow { font-family:var(--mono); font-size:.72rem; color:var(--teal); letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:1.3rem; display:inline-flex; align-items:center; gap:.55em; }
.eyebrow .glyph { display:inline-block; width:.52em; height:.52em; background:var(--teal); }

.lead { font-size:1.12rem; line-height:1.55; color:var(--ink); max-width:46ch; margin-bottom:2rem; }
.lead .soft { color:var(--muted); }

/* === BUTTONS === */
.cta-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.4rem; }
.btn { font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:.92rem 1.3rem; cursor:pointer; border:1px solid var(--ink); transition:all .2s; display:inline-flex; align-items:center; gap:.5em; }
.btn-primary { background:var(--teal); border-color:var(--teal); color:var(--ink); }
.btn-primary:hover { background:#00B494; border-color:#00B494; }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:#fff; }

/* === PILLS === */
.pill { font-family:var(--mono); font-size:.63rem; padding:.3rem .58rem; border:1px solid var(--rule); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.pill.teal { border-color:var(--teal); color:var(--teal); }

/* === BULLET LIST === */
ul.bullet { list-style:none; margin:1.3rem 0 1.6rem; }
ul.bullet li { padding-left:1.3rem; position:relative; margin-bottom:.6rem; font-size:.97rem; line-height:1.5; color:var(--ink); }
ul.bullet li::before { content:"\2192"; color:var(--teal); position:absolute; left:0; font-weight:700; }

/* === NAV === */
.nav { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--rule); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { display:flex; align-items:center; gap:.55rem; }
.logo img { width:24px; height:24px; }
.logo-word { font-family:var(--sans); font-size:1rem; font-weight:500; letter-spacing:-.01em; }
.nav-links { display:none; gap:1.9rem; }
@media (min-width:940px) { .nav-links { display:flex; } }
.nav-links a { font-size:.92rem; color:var(--ink); opacity:.78; transition:opacity .2s; position:relative; }
.nav-links a:hover { opacity:1; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta { font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:#fff; padding:.62rem .95rem; transition:background .2s; }
.nav-cta:hover { background:var(--teal); color:var(--ink); }

/* === SECTION SCAFFOLD === */
.section { padding:4.75rem 0; border-top:1px solid var(--rule); }
@media (max-width:680px) { .section { padding:3.4rem 0; } }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:2.1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sec-head .r { text-align:right; }
@media (max-width:560px) { .sec-head { font-size:.6rem; } }
.sec-intro { max-width:62ch; margin-bottom:2.6rem; }
.sec-intro.tight { margin-bottom:1.6rem; }
.sec-intro p { font-size:1.05rem; line-height:1.55; color:var(--muted); margin-top:1.05rem; max-width:56ch; }

/* === FAQ (shared: homepage + AI Visibility page) === */
.faq-list { border-top:1px solid var(--ink); max-width:880px; }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-q { font-family:var(--sans); font-weight:700; font-size:1.08rem; line-height:1.35; letter-spacing:-.01em; color:var(--ink); padding:1.3rem 2.4rem 1.3rem 0; cursor:pointer; position:relative; list-style:none; transition:color .2s; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q:hover { color:var(--teal); }
.faq-q::after { content:"+"; position:absolute; right:.1rem; top:1.15rem; font-family:var(--mono); font-size:1.25rem; font-weight:400; color:var(--teal); transition:transform .25s ease; }
details[open] .faq-q::after { transform:rotate(45deg); }
.faq-a { padding:0 2.4rem 1.5rem 0; }
.faq-a p { font-size:1rem; line-height:1.62; color:var(--muted); }
.faq-a p + p { margin-top:.85rem; }

/* === FOOTER === */
.site-foot { border-top:1px solid var(--ink); }
.site-foot-top { display:grid; grid-template-columns:1fr; gap:2.2rem; padding:3.2rem 0 2.6rem; }
@media (min-width:760px) { .site-foot-top { grid-template-columns:1.6fr 1fr 1fr; gap:2rem; } }
.site-foot .brand .logo { margin-bottom:1.1rem; }
.site-foot .brand p { font-size:.92rem; color:var(--muted); line-height:1.5; max-width:34ch; }
.site-foot .brand .addr { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:1rem; }
.site-foot .fcol h4 { font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.site-foot .fcol a { display:block; font-size:.95rem; color:var(--ink); opacity:.78; margin-bottom:.6rem; transition:opacity .2s; }
.site-foot .fcol a:hover { opacity:1; }
.site-foot-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.2rem; align-items:center; padding:1.15rem 0; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.site-foot-bar .mid { color:var(--ink); }

/* === MOTION (generic reveal; page-specific instrument motion stays inline) === */
@media (prefers-reduced-motion:no-preference) {
  .js-animations .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease-out, transform .65s ease-out; }
  .js-animations .reveal.in { opacity:1; transform:translateY(0); }
}

/* ===== Mobile navigation (injected by dn.v1.js) ===== */
.nav-actions { display:flex; align-items:center; gap:.6rem; }
.nav-burger {
  display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:42px; height:38px; padding:0 9px; box-sizing:border-box;
  background:var(--bg); border:1px solid var(--rule); border-radius:3px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s;
}
.nav-burger:hover { border-color:var(--ink); }
.nav-burger span { display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-burger.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity:0; }
.nav-burger.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (min-width:940px) { .nav-burger { display:none; } }

.nav-mobile {
  position:fixed; left:0; right:0; top:64px; z-index:49;
  background:var(--bg); border-bottom:1px solid var(--rule);
  box-shadow:0 22px 44px -28px rgba(10,10,10,.45);
  transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
body.nav-open .nav-mobile { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease, transform .22s ease, visibility 0s; }
.nav-mobile-inner { display:flex; flex-direction:column; padding-top:.4rem; padding-bottom:1.3rem; }
.nav-mobile-inner a { font-size:1.06rem; color:var(--ink); padding:1rem 0; border-bottom:1px solid var(--rule); transition:color .2s; }
.nav-mobile-inner a:last-child { border-bottom:0; }
.nav-mobile-inner a:hover, .nav-mobile-inner a:active { color:var(--teal); }
@media (min-width:940px) { .nav-mobile { display:none; } }
body.nav-open { overflow:hidden; }

/* ===== SMS / compliance callout (privacy + terms) ===== */
.callout { background:rgba(0,203,167,.05); border:1px solid var(--rule); border-left:3px solid var(--teal); padding:1.05rem 1.3rem; margin:1.7rem 0; }
.callout > :first-child { margin-top:0; }
.callout > :last-child { margin-bottom:0; }