/* PhishClean brand layer: one typeface, one type scale and one icon style
   for every page. Each page links this after its own <style> block (and
   before /blog/article.css on articles), so same-specificity rules here win
   over the page and article.css still wins over this. Fonts: Inter for text,
   IBM Plex Mono for code, both from Google Fonts. */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand-navy: #1b2a47;
  --brand-navy-tint: #eef2f9;
  --brand-navy-line: #dfe6f2;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
code, kbd, samp, pre { font-family: var(--mono); }

/* ── Type scale ───────────────────────────────────────────────────────── */
h1, h2 { text-wrap: balance; }
h1 { font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; }
h2 { font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; }
h3 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }
h4 { font-weight: 600; letter-spacing: -0.006em; }

.hero h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.038em; line-height: 1.04; }
.hero .subhead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; letter-spacing: -0.006em; }
.subtitle { font-size: 17px; line-height: 1.6; letter-spacing: -0.006em; }
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; color: #5b6b86; }
.section-title { font-size: clamp(28px, 3.3vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }

.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }
.card p { font-size: 15px; line-height: 1.65; }
.feature-item h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.008em; }
.feature-item p { font-size: 14px; line-height: 1.55; }

.btn, .cta-btn, .nav-cta { font-weight: 600; letter-spacing: -0.006em; }
.nav-logo { font-weight: 700; letter-spacing: -0.025em; }
.nav-links a { letter-spacing: -0.003em; }
footer p { letter-spacing: 0; }

/* ── Icons: line icons in a navy-tinted tile, no emoji ───────────────── */
.card-icon, .feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--brand-navy-tint); border: 1px solid var(--brand-navy-line);
  color: var(--brand-navy); font-size: 0; line-height: 0; margin-bottom: 16px;
}
.feature-icon { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 12px; }
.feature-icon svg { width: 18px; height: 18px; }

/* ── Primary nav button: brand navy ──────────────────────────────────── */
/* Same selector as article.css, which loads after this file, so articles
   keep their ink button and every other page gets navy over its own rule. */
.nav-links a.nav-cta { background: var(--brand-navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px -8px rgba(27,42,71,0.7); }
.nav-links a.nav-cta:hover { background: #26395f; color: #fff; }