/* BowTie Risk — shared site styles (light, clean)
   Loaded after each page's own styles, so these values win. */

:root {
  /* Shared palette */
  --bg: #ffffff;
  --bg2: #f5f6f8;
  --bg3: #eef0f3;
  --bg-alt: #f5f6f8;
  --surface: #f5f6f8;
  --surface2: #eef0f3;
  --card: #ffffff;
  --border: #e3e6eb;
  --line: #e3e6eb;
  --text: #16181d;
  --muted: #5b616e;
  --accent: #0f766e;
  --amber: #0f766e;
  --amber-dim: #115e59;
  --accent-ink: #ffffff;
  --green: #15803d;
  --red: #c1121f;
  --radius: 14px;
  --gutter: 16px;
  --max: 1080px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Remove the old dark-theme texture and glows */
body::before,
.hero::before, .article-hero::before, .cta-section::before,
.hero-glow, .cta-glow { display: none !important; }

/* Keep every image in proportion (some pages set a fixed height attribute) */
img { max-width: 100%; height: auto; }

/* Softer image shadows on a light background */
.hero-image img, .figure img, .phone-figure img, .iphone-grid img, .screenshot img {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

/* The old fixed menu needed a large gap at the top; the new header sits in the page */
body:not(.home) .hero, .article-hero { padding-top: 4rem !important; }
@media (max-width: 640px) {
  body:not(.home) .hero, .article-hero { padding-top: 2.5rem !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .sh-bar {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .sh-logo {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em; white-space: nowrap;
}
.site-header .sh-logo img { width: 28px; height: 28px; border-radius: 6px; }
.site-header .sh-logo .sh-risk { color: var(--accent); }
.site-header .sh-nav {
  position: static; display: flex; align-items: center; gap: 22px;
  padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 15px;
}
.site-header .sh-nav a { color: var(--text); text-decoration: none; }
.site-header .sh-nav a:hover { color: var(--accent); }
.site-header .sh-nav a.sh-btn {
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 16px; border-radius: 999px; font-weight: 600;
}
.site-header .sh-nav a.sh-btn:hover { opacity: 0.9; color: var(--accent-ink); }

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 48px 0 32px;
  font-size: 15px; line-height: 1.5;
}
.site-foot .sf-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.site-foot .sf-cols {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.site-foot h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { padding: 4px 0; }
.site-foot a { color: var(--text); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.site-foot .sf-legal { margin: 36px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- One content width on every page, lined up with the header logo ---------- */
.section, .related-guides, .wrap, .hero-image, .figure.wide,
body:not(.home) main > section:not([class]):not(:has(.wrap)),
body:not(.home) > section:not([class]):not(:has(.wrap)), body:not(.home) > div:not([class]):not(:has(.wrap)),
[style*="max-width: 1100px"], [style*="max-width:1100px"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
/* Keep running text at a comfortable reading length inside the wider sections */
.section > p, .section > .lead, .section > .prose,
body:not(.home) main > section:not([class]) > p,
body:not(.home) > section:not([class]) > p { max-width: 46rem; }
.section > p.trademark { max-width: none; }

/* ---------- No divider lines between sections: spacing does the separating ---------- */
.section, .related-guides,
body:not(.home) main > section, body:not(.home) main > div,
body:not(.home) > section, body:not(.home) > div:not([class]) {
  border-top: none !important;
  border-bottom: none !important;
}