/* MIST — the one page allowed its own sub-palette. Same bones (Poppins, wedges, dots), cooled down. */
.mist {
  --m-bg: #e6eef2;      /* misty grey-blue */
  --m-bg-2: #d5e2e8;
  --m-ink: #1c2a33;
  --m-blue: #3c5f82;    /* fog blue */
  --m-teal: #33d3cb;    /* the deck's teal, kept: MIST is an advertiser card */
  --m-pink: #ff1493;    /* the deck's pink, kept */
  --m-dot: #dfe8ec;
  --m-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.7' viewBox='0 0 16 27.7'%3E%3Cg fill='%23dfe8ec'%3E%3Ccircle cx='8' cy='6.93' r='6.5'/%3E%3Ccircle cx='0' cy='20.78' r='6.5'/%3E%3Ccircle cx='16' cy='20.78' r='6.5'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--m-bg) var(--m-dots); background-size: 16px auto; color: var(--m-ink);
  margin-top: -1px;
}
.mist h1, .mist h2, .mist h3 { color: var(--m-blue); }
.mist a { color: var(--m-blue); }
.mist .btn { background: var(--m-blue); }
.mist .btn:hover { background: #2c4762; }
.mist .btn-ghost { background: transparent; color: var(--m-blue); box-shadow: inset 0 0 0 3px var(--m-blue); }
.mist .btn-ghost:hover { background: var(--m-blue); color: #fff; }

.mist-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem); text-align: center; }
.mist-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(2rem, 8.2vw, 7.5rem); z-index: -1; background: var(--trim-top-teal); background-size: 100% 100%; }
.mist-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(1.9rem, 7.7vw, 7rem); z-index: -1; background: var(--trim-bot-teal); background-size: 100% 100%; }
.mist-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--m-blue); margin-bottom: 1.5rem; }
.mist-wordmark { font-weight: 900; font-size: clamp(5rem, 22vw, 14rem); line-height: 0.85; letter-spacing: -0.04em; margin: 0; color: var(--m-blue);
  background: linear-gradient(180deg, var(--m-blue) 0%, #6d8fae 55%, #b8cbd8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mist-tag { font-weight: 900; text-transform: uppercase; color: var(--m-pink); font-size: clamp(1.25rem, 3.5vw, 2rem); letter-spacing: -0.01em; margin: 0.5rem 0 1rem; }
.mist-line { font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.4; max-width: 34ch; margin-inline: auto; }
.mist-points { text-align: left; max-width: 38rem; margin: 2rem auto 0; padding: 0; list-style: none; counter-reset: pt; }
.mist-points li { position: relative; padding: 0.9rem 1rem 0.9rem 3.4rem; background: rgba(255,255,255,0.55); border-radius: 8px; counter-increment: pt; }
.mist-points li + li { margin-top: 0.5rem; }
.mist-points li::before { content: counter(pt); position: absolute; left: 0.9rem; top: 0.75rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--m-blue); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 0.95rem; }
.mist-points strong { color: #cc1076; font-weight: 900; } /* body-size accent: 5.4:1 on the card */

.mist-section { padding: clamp(2rem, 6vw, 4rem) 0; }
.mist-section--alt { background: var(--m-bg-2); }
.mist-section h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.mist-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mist-card { background: rgba(255,255,255,0.6); border-radius: 10px; padding: 1.25rem 1.25rem 1rem; border-top: 5px solid var(--m-teal); }
.mist-card h3 { font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.mist-card p { margin: 0; }
.mist-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.25rem; margin: 0; max-width: 46rem; }
.mist-dl dt { font-weight: 900; text-transform: uppercase; color: var(--m-blue); letter-spacing: -0.01em; }
.mist-dl dd { margin: 0; }
@media (max-width: 30rem) { .mist-dl { grid-template-columns: 1fr; } .mist-dl dd { margin-bottom: 0.5rem; } }
.mist-quote { margin: 0; text-align: center; max-width: 40rem; margin-inline: auto; }
.mist-quote p { font-weight: 900; font-size: clamp(1.4rem, 3.5vw, 2.4rem); line-height: 1.2; color: var(--m-blue); letter-spacing: -0.01em; }
.mist-quote footer { font-size: 0.9rem; opacity: 0.85; }
.mist-dont { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mist-dont li { background: #fff; border: 3px solid var(--m-pink); color: var(--m-ink); padding: 0.5rem 0.9rem; font-weight: 900; text-decoration: line-through; text-decoration-color: var(--m-pink); text-decoration-thickness: 3px; }
.mist-legal { padding: 1.5rem 0 2.5rem; font-size: 0.8rem; opacity: 0.8; }
.mist-legal p { margin: 0; max-width: 60rem; }