/* ============================================================================
   Thesis.ai — shared MARKETING layer (loaded AFTER theme.css by marketing pages)

   Deliberately SLIM: each marketing page keeps its own page-specific components
   (nav, hero, cards, sections), so this layer carries only what's genuinely
   shared + safe to apply globally — and NOTHING with bare element/utility
   selectors that could clobber a page's own .section/.val/.lead/etc.

   Provides:
   1. the canonical brand vocabulary + the dot-field tokens (so every page's
      body can paint the dotted grid with var(--dot) — the brand primitive);
   2. the canonical cobalt button (.btn / .btn-primary), the one "signal" CTA;
   3. an opt-in corner-dot card helper (.card.cd) matching the app.

   theme.css stays PRISTINE — none of this lives there, so the app/settings
   surfaces that also load theme.css are never touched.
   Brand law: one cobalt signal; Space Grotesk display; never serif.
   ============================================================================ */

/* ── Brand vocabulary + the dot field (maps brand names onto theme.css tokens
      so they auto-invert in dark; adds the dot tokens theme.css doesn't have) ── */
:root{
  --fg:var(--ink); --card:var(--surface); --hair:var(--line); --muted:var(--ink-2);
  --paper:var(--surface); --paper-2:var(--canvas-2); --maxw:var(--container);
  --dot:rgba(10,10,11,.14); --dot-strong:rgba(10,10,11,.22); --gap:24px;
}
html[data-theme="dark"]{ --dot:rgba(255,255,255,.12); --dot-strong:rgba(255,255,255,.20); }

/* ── Canonical cobalt button (the one signal). Pages that define their own .btn
      override this; averitec (which has none) inherits it. ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:.15s var(--ease);white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--muted);background:var(--paper-2)}
.btn-sm{height:36px;padding:0 14px;font-size:13px}

/* ── Opt-in corner-dot card (the app's signature). Requires BOTH classes, so it
      can never clobber a page's bare .card. ── */
.card.cd{position:relative}
.card.cd::before{content:"";position:absolute;top:11px;left:11px;width:4px;height:4px;border-radius:50%;background:var(--dot-strong)}
.card.cd::after{content:"";position:absolute;bottom:11px;right:11px;width:4px;height:4px;border-radius:50%;background:var(--dot-strong)}