/* ============================================================
   DMCN marketing — base + interaction CSS
   The design is authored almost entirely with inline styles on
   token variables; this file carries only what an inline style
   can't express: the global reset, icon sizing, link defaults,
   the :hover states (the design's `style-hover` shim), and the
   container-query responsive rules (header hamburger, mesh
   diagram stacking).
   ============================================================ */

html, body { margin: 0; background: var(--surface-page); }
* { box-sizing: border-box; }
body { font-family: var(--font-sans); }

/* Inline Lucide SVGs size to the element's font-size and take its color. */
svg.lucide {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: middle;
  stroke-width: 2; flex: none;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--brand); }
::selection { background: var(--brand-subtle-2); }

button { font-family: var(--font-sans); }

/* ---- Hover utilities (replace the design's `style-hover`) ----
   !important so the hover state wins over the element's inline base
   style — an inline `style=` always beats a plain stylesheet rule, so
   these deliberately override it to reproduce the intended hover. */
.hov-brand:hover          { background: var(--brand-hover) !important; }
.hov-surface:hover        { background: var(--surface-hover) !important; }
.hov-border:hover         { border-color: var(--border-strong) !important; }
.hov-surface-border:hover { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; }
.hov-link:hover           { color: var(--brand) !important; }
.hov-lift:hover           { transform: translateY(-1px); }

/* ---- Header: responsive hamburger ----
   The <header> sets container-type:inline-size, so these are container
   queries (not viewport). Desktop nav shows above 860px; below, it
   collapses into the <details data-mm> disclosure. */
[data-mm] { display: none; margin-left: auto; position: relative; }
[data-mm] > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 4px; color: var(--text-body);
}
[data-mm] > summary::-webkit-details-marker { display: none; }
[data-mm][open] > summary { background: var(--surface-hover); }
[data-mm-panel] {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(280px, 82vw);
  background: var(--surface-page); border: 1px solid var(--border-default);
  border-radius: 6px; box-shadow: var(--shadow-md);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
@container (max-width: 860px) {
  [data-desk] { display: none !important; }
  [data-mm]   { display: block; }
}

/* ---- Mesh page: the You → mesh → recipient diagram ----
   Horizontal on desktop; stacks vertically with downward arrows below
   640px. The diagram row sets container-type:inline-size. */
@container (max-width: 640px) {
  [data-mesh-row]   { flex-direction: column !important; }
  [data-mesh-arrow] { transform: rotate(90deg); }
}

/* ---- Home pricing: monthly/annual toggle (driven by site.js) ----
   The pricing section carries data-billing="monthly|annual". Both price
   figures + notes are rendered; CSS shows the active one and styles the
   active segment button — no per-figure JS. */
.seg {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 32px; padding: 0 14px; border: none; border-radius: 3px;
  cursor: pointer; font-family: var(--font-sans); font-size: 13px;
  white-space: nowrap; transition: all 120ms;
  font-weight: 500; background: transparent; color: var(--text-muted);
}
[data-billing="monthly"] .seg[data-seg="monthly"],
[data-billing="annual"]  .seg[data-seg="annual"] {
  font-weight: 600; background: var(--surface-card);
  color: var(--text-strong); box-shadow: var(--shadow-xs);
}
[data-billing="monthly"] [data-bill="annual"]  { display: none; }
[data-billing="annual"]  [data-bill="monthly"] { display: none; }

/* ---- FAQ: native <details> accordion ----
   Hide the default disclosure marker; rotate the chevron when open. */
summary::-webkit-details-marker { display: none; }
[data-faq] > summary { list-style: none; }
.faq-chev { transition: transform var(--dur-fast) var(--ease-standard); }
[data-faq][open] .faq-chev { transform: rotate(180deg); }