/* ---------- fonts ---------- */
@font-face {
  font-family: 'Canela';
  src: url('fonts/Canela-Black-Trial copy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adobe Garamond Pro';
  src: url('fonts/AGaramondPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adobe Garamond Pro';
  src: url('fonts/AGaramondPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('fonts/PPEditorialNew-Regular-BF644b214ff145f.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('fonts/PPEditorialNew-Italic-BF644b214fb0c0a.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0b1215;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }

html { scroll-behavior: smooth; }

/* ---------- frosted pill ---------- */
.pill-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pill-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  padding: 0 24px;
}
.nav-cta {
  pointer-events: auto;
  position: absolute;
  right: 20px;
  padding: 16px 24px;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-pill {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.nav-pill a {
  padding: 6px 14px;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.2s ease;
}
.nav-pill a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 105vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 24px 30px;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background: linear-gradient(to bottom, transparent 0%, rgba(11,18,21,0.6) 70%, #0b1215 100%);
  pointer-events: none;
  z-index: 2;
}
/* ---------- hero video background ---------- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(11, 18, 21, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- falling pattern ---------- */
.falling-pattern--hidden { display: none; }
.falling-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b1215;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 10%, #0b1215 90%);
          mask-image: radial-gradient(ellipse at center, transparent 10%, #0b1215 90%);
}
.falling-pattern-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: background-position;
  background-color: #0b1215;
  background-image:
    radial-gradient(4px 100px at 0px 235px, #fff, transparent),
    radial-gradient(4px 100px at 300px 235px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, #fff, transparent),
    radial-gradient(4px 100px at 300px 252px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, #fff, transparent),
    radial-gradient(4px 100px at 300px 150px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, #fff, transparent),
    radial-gradient(4px 100px at 300px 253px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, #fff, transparent),
    radial-gradient(4px 100px at 300px 204px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, #fff, transparent),
    radial-gradient(4px 100px at 300px 134px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, #fff, transparent),
    radial-gradient(4px 100px at 300px 179px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, #fff, transparent),
    radial-gradient(4px 100px at 300px 299px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, #fff, transparent),
    radial-gradient(4px 100px at 300px 215px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, #fff, transparent),
    radial-gradient(4px 100px at 300px 281px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, #fff, transparent),
    radial-gradient(4px 100px at 300px 158px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, #fff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, #fff, transparent),
    radial-gradient(4px 100px at 300px 210px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, #fff 100%, transparent 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: falling-pattern-scroll 150s linear infinite;
}
@keyframes falling-pattern-scroll {
  from {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 230.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}
.falling-pattern-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 3px, rgba(11,18,21,0.5) 3.5px);
  background-size: 10px 10px;
}
@media (prefers-reduced-motion: reduce) {
  .falling-pattern-layer { animation: none; }
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: -15vh;
}
.wordmark {
  width: clamp(135px, 23.5vw, 286px);
  height: auto;
}
/* ---------- h3 preset – editorial new subtext ---------- */
h3, .h3 {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: clamp(1.36rem, 2.24vw, 1.68rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* ---------- section heading ---------- */
.section-heading {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 56px;
}

/* ---------- network stats ---------- */
.network {
  padding: 30px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
}
.stat {
  text-align: center;
  padding: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-number {
  font-family: 'Adobe Garamond Pro', Georgia, serif;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* ---------- partners ticker ---------- */
.partners {
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ticker {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #0b1215 10%, #0b1215 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #0b1215 10%, #0b1215 90%, transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: ticker-scroll 50s linear infinite;
}
.ticker-item {
  height: clamp(46px, 6.6vw, 73px);
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.ticker-item:hover {
  opacity: 1;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- partnerships banner ---------- */
.banner {
  position: relative;
  padding: 140px 24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80, 80, 100, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, #0b1215 0%, #090d10 45%, #0b1215 100%);
  overflow: hidden;
  text-align: center;
}
/* smooth top-fade so banner blends seamlessly into the obsidian above */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, #0b1215 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.banner-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.banner-heading {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  line-height: 1;
}
.banner-sub {
  font-size: clamp(1.14rem, 1.88vw, 1.42rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

/* ---------- contact form ---------- */
.contact {
  padding: 120px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.form-row input,
.form-row textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}
.form-row textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form button {
  align-self: flex-start;
  margin-top: 8px;
  font-family: inherit;
}
.contact-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-status {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  margin-top: 4px;
}
.form-status-success { color: rgba(255, 255, 255, 0.7); }
.form-status-error { color: rgba(255, 100, 100, 0.85); }

/* ---------- contact standalone page ---------- */
.contact-page {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
}

/* ---------- simplified contact page ---------- */
.contact-page-simple {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 40px 80px;
  gap: 20px;
}
.contact-page-title {
  font-family: 'PP Editorial New', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.contact-page-email {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.contact-page-email a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.contact-page-email a:hover {
  border-bottom-color: #fff;
}

/* ---------- footer ---------- */
.footer {
  padding: 80px 40px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.footer-wordmark {
  width: 110px;
  height: auto;
}
.footer-nav {
  display: grid;
  grid-template-columns: minmax(140px, auto);
  gap: 48px 72px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 14px;
}
.footer-col-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
}
.footer-col a {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  width: fit-content;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
}
.footer-copy {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 720px) {
  .footer { padding: 56px 24px 32px; gap: 40px; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ---------- simple content pages (legal / recruiting) ---------- */
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 160px 28px 100px;
}
.content-page h1 {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.05;
  margin-bottom: 12px;
}
.content-page .content-eyebrow {
  font-family: 'Space Mono', 'Poppins', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}
.content-page .content-updated {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 48px;
}
.content-page h2 {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 40px 0 12px;
  color: #fff;
}
.content-page p,
.content-page li {
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin: 0 0 14px;
}
.content-page ul { padding-left: 20px; margin-bottom: 20px; }
.content-page a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
  text-underline-offset: 3px;
}
.content-page a:hover { text-decoration-color: #fff; }

.content-empty {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 24px 80px;
  gap: 16px;
}
.content-empty .content-eyebrow { margin-bottom: 0; }
.content-empty h1 {
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.05;
  margin: 0 0 8px;
}
.content-empty p {
  font-family: 'Poppins', sans-serif;
  color: rgba(255,255,255,0.55);
  max-width: 440px;
  margin: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .nav { top: 12px; padding: 0 16px; }
  .nav-cta { display: none; }
  .nav-pill {
    padding: 6px 8px;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
  }
  .nav-pill a { padding: 5px 10px; font-size: 0.78rem; }

  .hero {
    min-height: 110vh;
    padding: 80px 20px 80px;
  }
  .hero-video-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .wordmark { width: clamp(144px, 45.6vw, 240px); }
  .hero-content .pill-btn {
    margin-top: 48px;
  }


  .network { padding: 30px 20px; }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stat { padding: 24px 16px; }
  .stat-number { margin-bottom: 6px; }

  .partners { padding: 40px 0; }
  .ticker-track { gap: 48px; }

  .banner { padding: 80px 20px; }
  .banner-heading { font-size: 3rem; }
  .banner-inner { gap: 10px; }
  .banner-sub { font-size: 0.8rem; }

  .contact { padding: 80px 20px; }
  .contact-page { padding-top: 100px; }

  .footer { padding: 48px 20px 32px; }
}

/* ---------- impersonation warning alert ---------- */
.alert {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 200;
  width: min(400px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 16px 18px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.alert.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.alert[hidden] { display: none; }

.alert-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 1px;
}
.alert-icon--warning { color: #f5c518; }

.alert-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.alert-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0;
}
.alert-body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}
.alert-body strong {
  font-weight: 500;
  color: #fff;
}

.alert-close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}
.alert-close:hover,
.alert-close:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.06);
  outline: none;
}

@media (max-width: 640px) {
  .alert {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}