/* ============================================================
   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); }

/* ---- Code: no ligatures ----
   Geist Mono ships programming ligatures, and its contextual handling of "--"
   swallows the space in front of it: `dns --domain` renders as `dns--domain`,
   which is a command a reader would copy and have fail. Code should show the
   characters you actually type, so ligatures are off everywhere the mono face
   is used. font-feature-settings repeats it at the low level for engines that
   honour that but not font-variant-ligatures. */
code, pre, kbd, samp {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
}

/* ---- Footer ----
   Wide: the brand block and the link-column group sit side by side. Narrow: the
   brand stacks above, and the columns become an even auto-fit grid.

   The previous version was one flex row of four children with flex-wrap, which
   let each column pick its own break point — on a phone that put one column
   beside the brand and the others on a second row with dead space to the right.
   Grouping the columns means they wrap together, evenly. */
[data-foot] { display: flex; gap: clamp(32px, 6vw, 64px); align-items: flex-start; }
[data-foot-brand] { flex: 1 1 240px; min-width: 0; }
/* Doesn't grow: the brand absorbs the slack, so the column group stays flush
   with the right edge instead of trailing dead space beside it. */
[data-foot-cols] { display: flex; gap: clamp(28px, 5vw, 56px); flex: 0 0 auto; min-width: 0; }
[data-foot-cols] nav { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
[data-foot-cols] a { font-size: 14px; color: var(--text-body); text-decoration: none; }
[data-foot-cols] a:hover { color: var(--brand); }
.foot-label {
  font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
}
@container (max-width: 720px) {
  /* Flipping to column re-points the flex axes: flex-basis becomes a HEIGHT and
     align-items controls WIDTH. The row-direction values above would leave a
     240px void under the brand and shrink the columns to their content, so both
     are reset here rather than carried over. */
  [data-foot] { flex-direction: column; gap: 36px; align-items: stretch; }
  [data-foot-brand] { flex: 0 0 auto; }
  [data-foot-cols] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px 20px; flex: 0 0 auto;
  }
}

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); }