/* Wazomind — shared site chrome.
   The site runs two surfaces: a dark product/marketing theme (homepage, intent
   pages) and a light editorial theme (blog, comparisons, /for). That split is
   deliberate — long-form reads better on paper. What was NOT deliberate was that
   the two shared nothing, and that only the homepage carried a real footer, which
   left ~40 pages as near dead ends with no path to the rest of the site.

   This file is the common chrome. The footer is a dark band on every page, so it
   reads as one site from either surface and gives every page the same outbound
   links — which is what lets inbound backlinks flow past the landing page. */

/* ── Brand typeface ──────────────────────────────────────────────────────────
   Headings only. The body stays on the system stack: it renders instantly, and
   a second webfont would cost more in LCP than it returns in character.
   Space Grotesk (SIL OFL) is self-hosted — no request leaves wazomind.com, and
   the files inherit our own week-long cache header. font-display:swap so text
   is never invisible while it loads. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

h1, h2, h3, .wzf h4, .hero h1, article h1, article h2, article h3 {
  font-family: "Space Grotesk", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
}

/* ── The answer card ─────────────────────────────────────────────────────────
   The one thing on this site no competitor can copy without copying the
   product: a specimen of what Wazomind actually puts on screen mid-call.
   It lived only in the homepage hero animation; it belongs on every page that
   has to explain what "helps during the call" means. Works on both surfaces —
   it carries its own dark ground rather than inheriting the page's. */
.wz-answer {
  --wa-accent: #4fd1c5;
  background: linear-gradient(180deg, #131b23, #0d141b);
  border: 1px solid rgba(79, 209, 197, .30);
  border-left: 3px solid var(--wa-accent);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 26px 0;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .7);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 560px;
}
.wz-answer .wa-lbl {
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wa-accent); margin: 0 0 10px;
}
.wz-answer .wa-lbl b { width: 5px; height: 5px; border-radius: 50%; background: var(--wa-accent); box-shadow: 0 0 10px var(--wa-accent); }
.wz-answer .wa-txt { color: #eef4fb; font-size: 1.06rem; line-height: 1.5; margin: 0; }
.wz-answer .wa-src {
  margin: 12px 0 0; padding-top: 9px;
  border-top: 1px solid rgba(79, 209, 197, .18);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .68rem; color: #8a97a7;
}
.wz-answer .wa-src span { color: var(--wa-accent); }
.wz-answer .wa-ask { color: #8a97a7; font-size: .92rem; margin: 0 0 10px; }
.wz-answer .wa-ask b { color: #c9d3df; font-weight: 600; }

/* Responsive image default.
   Every <img> carries intrinsic width/height attributes so the browser can
   reserve space and avoid layout shift. Without this rule the browser also
   honours that literal height — so a 1400x875 screenshot in a 380px-wide phone
   viewport gets squeezed to 380x875. The page CSS mostly sets width:100% and
   never sets height, which is exactly the case that breaks.
   height:auto restores the aspect ratio while keeping the CLS benefit.
   Anything that deliberately sets both dimensions (the founder avatars) has
   higher specificity and still wins. */
img {
  max-width: 100%;
  height: auto;
}

.wzf {
  --wzf-bg: #0b0f14;
  --wzf-line: rgba(255, 255, 255, .10);
  --wzf-fg: #eef4fb;
  --wzf-mut: #8a97a7;
  --wzf-accent: #4fd1c5;
  background: var(--wzf-bg);
  color: var(--wzf-mut);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin-top: clamp(56px, 9vw, 104px);
  padding: 56px 0 34px;
  border-top: 1px solid var(--wzf-line);
}
.wzf-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wzf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .wzf-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .wzf-grid { grid-template-columns: 1fr; } }

.wzf h4 {
  color: var(--wzf-fg); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 12px; font-weight: 700; font-family: inherit;
}
.wzf a { display: block; color: var(--wzf-mut); font-size: .92rem; padding: 5px 0; text-decoration: none; }
.wzf a:hover { color: var(--wzf-fg); text-decoration: none; }

.wzf-brand { display: flex; align-items: center; gap: 10px; color: var(--wzf-fg); font-weight: 660; font-size: 1rem; padding: 0; }
.wzf-brand:hover { color: var(--wzf-fg); }
.wzf-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: #0b0f14 url(/logo-badge.png) center/cover no-repeat;
}
.wzf-lede { color: var(--wzf-mut); font-size: .9rem; margin: 12px 0 16px; max-width: 30ch; }
.wzf-cta {
  display: inline-flex !important; align-items: center; gap: .4em;
  background: var(--wzf-accent); color: #04211f !important; font-weight: 650; font-size: .9rem;
  padding: .62em 1.05em; border-radius: 10px;
}
.wzf-cta:hover { background: #63dccf; color: #04211f !important; }

.wzf-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--wzf-line);
  color: #5c6675; font-size: .85rem;
}
.wzf-bottom a { display: inline; color: #5c6675; padding: 0; }
.wzf-bottom a:hover { color: var(--wzf-fg); }

/* Breadcrumbs — free internal links, and they mirror the URL hierarchy so the
   BreadcrumbList markup on these pages has something visible behind it. */
.wz-crumbs {
  max-width: 1000px; margin: 0 auto; padding: 14px 22px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .84rem; color: #727d90;
}
.wz-crumbs a { color: #727d90; text-decoration: none; }
.wz-crumbs a:hover { text-decoration: underline; }
.wz-crumbs span { opacity: .55; padding: 0 6px; }