:root {
  --brand: #893dff;
  --brand-hover: #9e77f3;
  --bg-light: #f4f0eb;
  --text: #111;
  --muted: #6c757d;
}

html, body { height: 100%; }
body {
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

.top-notice-banner {
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.top-notice-banner__inner {
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.top-notice-banner a[data-subscribe-link] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand) !important;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.top-notice-banner a[data-subscribe-link]:hover,
.top-notice-banner a[data-subscribe-link]:focus {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-hover) !important;
}

a:not(.btn) { text-decoration: none; color: inherit; }
a:not(.btn):hover { color: var(--brand-hover); }

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

/* Make Bootstrap primary match the brand (used on blog CTAs) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 137, 61, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
}
.btn-soft {
  background: var(--bg-light);
  border-color: var(--bg-light);
  color: var(--brand);
}
.btn-soft:hover, .btn-soft:focus { opacity: .9; color: var(--brand-hover); }

.bg-light-brown { background: var(--bg-light); }
.bg-brand { background: var(--brand); }
.bg-black { background: #000; }
.color-white { color: #fff; }
.color-gray { color: #93989e; }
.color-brand { color: var(--brand); }
.font-bold { font-weight: 600; }

.h-60 { height: 60px; }
.smooth-shadow {
  box-shadow:
    0px 0px 4.8px rgba(128, 140, 168, 0.077),
    0px 0px 15.4px rgba(128, 140, 168, 0.093),
    0px 0px 40px rgba(128, 140, 168, 0.105),
    0px 0px 102.8px rgba(128, 140, 168, 0.118),
    0px 0px 307px rgba(128, 140, 168, 0.15);
}

.image-feature {
  position: relative;
  width: min(400px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}
.image-feature img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Mobile: keep feature images inside the content column with a small right gutter */
@media (max-width: 575.98px) {
  .image-feature {
    width: calc(100% - 16px);
    margin-left: 0 !important;
    margin-right: calc(16px + env(safe-area-inset-right)) !important;
  }
}
.blur-text { filter: blur(4px); }

/* Simple responsive video wrapper */
.video-wrap {
  position: relative;
  width: min(640px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  border: 5px solid #fff;
  background: #000;
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-links a { font-size: 14px; color: #000; }
.nav-links a.active { color: var(--brand); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
}

@media (max-width: 991px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links[data-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 12px;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    z-index: 3000;
  }
  .nav-links[data-open="true"] a {
    width: 100%;
    padding: 10px 8px;
    border-radius: 10px;
  }
  .nav-links[data-open="true"] a:hover {
    background: rgba(0, 0, 0, 0.04);
  }
}

/* General image safety */
img { max-width: 100%; height: auto; display: block; }

/* "How to blur an image" cards */
.howto-card {
  overflow: hidden;
}
.howto-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  position: static !important;
}

/* Notices */
.notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  position: relative;
  padding-right: 38px; /* room for dismiss button */
}
.notice__content {
  padding-right: 2px;
}
.notice__dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.65);
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
}
.notice__dismiss:hover,
.notice__dismiss:focus {
  background: rgba(255, 255, 255, 0.85);
  color: rgba(0, 0, 0, 0.8);
}
.notice--success { background: rgba(37, 211, 102, 0.15); border: 1px solid rgba(37, 211, 102, 0.4); }
.notice--error { background: rgba(255, 61, 61, 0.12); border: 1px solid rgba(255, 61, 61, 0.35); }

/* Blog typography */
.prose { max-width: 860px; }
.prose h1 { font-size: clamp(28px, 4vw, 44px); margin: 22px 0 12px; }
.prose h2 { font-size: 22px; margin: 26px 0 12px; }
.prose h3 { font-size: 18px; margin: 18px 0 10px; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; }
.prose .lede { font-size: 18px; color: #333; }
.callout {
  background: var(--bg-light);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Blog post layout (columns + media) */
.article-hero {
  margin: 18px 0 22px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--bg-light);
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.article-hero figcaption,
.article-figure figcaption {
  font-size: 13px;
  color: #6b7280;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
}
.article-figure {
  margin: 18px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--bg-light);
}
.article-figure img { width: 100%; height: auto; display: block; }

.article-aside .aside-card {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 16px;
}
.article-aside .aside-card + .aside-card { margin-top: 14px; }
.article-aside .aside-title { font-weight: 600; margin: 0 0 10px; }
.article-aside ul { padding-left: 1.1rem; margin-bottom: 0; }
.article-aside li { margin: 6px 0; }
.article-aside a:not(.btn) { color: inherit; }
.article-aside a:not(.btn):hover { color: var(--brand-hover); }

@media (min-width: 992px) {
  .article-aside {
    position: sticky;
    top: 92px; /* below sticky notice banner + some breathing room */
  }
}

/* Blog cards (thumbnail grid) */
.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}
.blog-card__media { display: block; background: var(--bg-light); }
.blog-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 18px;
}
.blog-card__title:hover { color: var(--brand-hover); }

/* Legal pages */
body.legal-page {
  background: var(--bg-light);
}
body.legal-page .prose {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: clamp(18px, 3vw, 28px);
}
body.legal-page .prose h1 { margin-top: 0; }
body.legal-page .prose h2 {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.legal-page .prose ul { padding-left: 1.2rem; }

/* Footer */
.footer {
  padding: 36px 0;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--brand-hover); }