/* ─── Header Styles (widths/markup unchanged) ───────────────────── */

/* Ensure header/menu sits above everything; dropdown even higher */
.site-header { position: sticky; top: 0; z-index: 3000; }
.dropdown-menu { z-index: 4000; } /* always above sections */

.site-header .navbar.bg-body-tertiary {
  background-color: #111111 !important;
}
.site-header .navbar {
  --bs-navbar-color: rgba(255,255,255,.9);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.35);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  min-height: 88px;
}

.navbar .dropdown-menu.show { display: block; }

.dropdown-menu {
  background-color: #111111;
  color: #ffffff;
  border: 0;
}
.dropdown-item { color: rgba(255,255,255,.9); }
.dropdown-item:hover,
.dropdown-item:focus {
  color: #ffffff;
  background-color: #1a1a1a;
}
.dropdown-divider { border-top-color: #2a2a2a; }

/* Desktop view */
@media (min-width: 992px) {
  .container { max-width: 100%; }

  .site-header { margin: 16px auto 0; }
  .site-header .navbar {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    overflow: visible;
    min-height: 88px;
    position: relative;
    z-index: 100;
  }

  .site-header .container {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
  }

  .navbar .dropdown-menu {
    position: absolute;
    display: none;
    padding-top: .5rem;
    padding-bottom: .5rem;
    z-index: 4000;
  }
  .navbar .dropdown-menu.show { display: block; }
}

/* Mobile view */
@media (max-width: 991.98px) {
  .site-header { margin: 0; }
  .site-header .navbar { min-height: 96px; }

  .navbar-collapse { text-align: center; }
  .navbar .navbar-nav {
    width: 100%;
    align-items: center !important;
    justify-content: center;
  }
  .navbar .nav-link { width: 100%; }

  .navbar-toggler { width: auto; padding: .5rem .75rem; }

  .navbar .dropdown-menu {
    position: static;
    width: 100%;
    margin-top: 0;
    box-shadow: none;
    border: 0;
    display: block;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .2s ease, padding .2s ease;
  }
  .navbar .dropdown-menu.show {
    max-height: 500px;
    opacity: 1;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

/* Logo placeholder */
.brand-logo {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent), #8ea2ff);
  display: inline-block;
}

/* Links & active state */
.navbar .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
.navbar .nav-link.active { font-weight: 600; }

/* BTN: Get a Quote — purple theme */
.site-header .btn-quote{
  --quote-bg: var(--accent);
  --quote-bg-hover: var(--accent-600);
  --quote-text: #ffffff;

  display: grid !important;
  place-items: center !important;
  box-sizing: border-box;
  height: 48px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  text-align: center;
  white-space: nowrap;

  background-color: var(--quote-bg);
  color: var(--quote-text);
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;

  box-shadow: 0 6px 18px rgba(108,99,255,0.25);
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease, color .2s ease;
}
.site-header .btn-quote:hover,
.site-header .btn-quote:focus{
  background-color: var(--quote-bg-hover);
  box-shadow: 0 8px 22px rgba(108,99,255,0.35);
}
.site-header .btn-quote:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px var(--accent-ring), 0 8px 22px rgba(108,99,255,0.35);
}
@media (max-width: 991.98px){
  .site-header .btn-quote{ width:100%; margin-top:.5rem; }
}

/* ─── Shared headings / layout (initial) ───── */
.section-heading{
  width:1170px; margin:0 auto 8px; color:#fff; font-size:32px; font-weight:800;
  text-align:center;
}
.section-lead{
  width:1170px; margin:0 auto 16px; color:var(--text-400);
  text-align:center;
}



/* =========================================================
   /resources/mv3-guide/ — Manifest V3 Guide
   All styles are scoped to .guide-main to avoid affecting
   other pages, header, or footer.
   ========================================================= */

.guide-main {
  --text: #e9ecff;
  --muted: #a9b0d6;
  --heading: #ffffff;
  --accent: #7b6cff;
  --accent-2: #9a8cff;
  --accent-3: #594fe0;

  --panel-top: #1b2140;
  --panel-bot: #10152c;
  --panel-ring: rgba(255,255,255,.07);
  --panel-glow: rgba(121,108,255,.20);

  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-1: 0 14px 40px rgba(0,0,0,.35);
  --shadow-2: 0 10px 26px rgba(0,0,0,.28);

  color: var(--text);
}

/* Container */
.guide-main .wrap {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Center labels and headings per requirement */
.guide-main .section-label,
.guide-main .section-lead,
.guide-main h1,
.guide-main h2,
.guide-main h3 { text-align: center; }

/* Typography */
.guide-main h1 {
  color: var(--heading);
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(2.2rem, 2.6rem + 1vw, 3rem);
  margin: 0 0 10px 0;
}
.guide-main h2 {
  color: var(--heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  margin: 0 0 12px 0;
}
.guide-main h3 {
  color: var(--heading);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.25rem);
  margin: 0 0 8px 0;
}
.guide-main p { color: var(--text); }
.guide-main .muted { color: var(--muted); }
.guide-main .big { font-size: 1.08rem; }

/* Links with no underline */
.guide-main a { color: var(--accent-2); text-decoration: none; }
.guide-main a:hover { color: #d7d1ff; }

/* Buttons */
.guide-main .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-weight: 700; border-radius: 14px;
  padding: 12px 18px; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.guide-main .btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-3));
  border-color: rgba(255,255,255,.08);
}
.guide-main .btn-primary:hover { transform: translateY(-1px); }
.guide-main .btn-ghost {
  color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.guide-main .btn-ghost:hover { background: rgba(255,255,255,.11); }
.guide-main .cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* Hero */
.guide-main .guide-hero { padding: clamp(28px, 4vw, 40px) 0 clamp(20px, 3.5vw, 34px); }
.guide-main .guide-hero .hero-card {
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg, #1c2144 0%, #131731 100%);
  border: 1px solid var(--panel-ring);
  border-radius: 30px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-1);
}
.guide-main .section-label {
  display: inline-block;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.guide-main .section-lead { color: var(--text); margin: 2px 0 10px; }

/* Chips */
.guide-main .chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.guide-main .chip {
  background: rgba(123,108,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  color: #dddfff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .9rem; font-weight: 700;
}

/* Panel wrapper for every content section after hero */
.guide-main section.panel .wrap {
  background:
    radial-gradient(80% 120% at 85% 0%, var(--panel-glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bot) 100%);
  border: 1px solid var(--panel-ring);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: var(--shadow-1);
}
.guide-main section.panel { padding-block: clamp(18px, 3vw, 28px); }

/* TOC */
.guide-main .toc-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 720px) {
  .guide-main .toc-grid { grid-template-columns: 1fr; }
}
.guide-main .toc { list-style: none; margin: 0; padding: 0; }
.guide-main .toc li { padding: 6px 0; }
.guide-main .toc a { display: inline-block; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }

/* Snippets */
.guide-main .snippet-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 860px) {
  .guide-main .snippet-grid { grid-template-columns: 1fr; }
}
.guide-main .snippet {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 16px 16px 18px;
}
.guide-main .steps { margin: 8px 0 0 18px; }

/* Callouts */
.guide-main .callouts { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .guide-main .callouts { grid-template-columns: 1fr; } }
.guide-main .callout {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
}
.guide-main .callout.bad { background: rgba(255,86,86,.12); border-color: rgba(255,86,86,.28); }
.guide-main .callout.good { background: rgba(95,227,151,.12); border-color: rgba(95,227,151,.28); }

/* Code inline */
.guide-main code {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}

/* Helpers */
.guide-main .center { text-align: center; }



/* ─── Footer (widths/markup unchanged) ────────────────────── */
.footer-section{
  width:1170px; margin:50px auto 0; padding:40px; border-radius:20px; box-sizing:border-box; color:#fff;
  background:linear-gradient(180deg, var(--bg-800) 0%, var(--bg-700) 100%);
}
.footer-container{
  display:grid;
  grid-template-columns:250px 1fr 220px 220px;
  align-items:flex-start; justify-content:space-between; gap:40px; text-align:left;
}
.footer-logo__img{ width:40px; height:40px; border-radius:8px; }
.footer-logo__text{ font-size:24px; font-weight:500; margin:0; line-height:1; }
.footer-logo__tiger{ color:#fff; }
.footer-logo__pay{ color:var(--accent); }

.footer-about__text{ font-size:14px; line-height:1.6; margin:0 0 24px; color:var(--text-300); }
.footer-social{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-social a{
  --accent:var(--accent);
  position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff; text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:0 0 0 0 rgba(108,99,255,0); overflow:visible; will-change:transform;
}
.footer-social a i{ font-size:18px; line-height:1; z-index:1; transition:transform .2s ease; }
.footer-social a::before{
  content:""; position:absolute; inset:-4px; border-radius:inherit;
  background: radial-gradient(circle, rgba(108,99,255,.45) 0%, rgba(108,99,255,0) 60%);
  opacity:0; transform:scale(.8); pointer-events:none;
}
@keyframes socialPulse{ 0%{opacity:.55; transform:scale(.9);} 100%{opacity:0; transform:scale(1.7);} }
.footer-social a:hover, .footer-social a:focus-visible{
  background:var(--accent); color:#fff; transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 24px rgba(108,99,255,.35); outline:none;
}
.footer-social a:hover i, .footer-social a:focus-visible i{ transform:scale(1.08); }
.footer-social a:hover::before, .footer-social a:focus-visible::before{ animation:socialPulse .9s ease-out forwards; }

.footer-col__heading{ font-size:18px; font-weight:700; margin:0 0 16px; color:#fff; }
.footer-col__list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-col__list a{ text-decoration:none; color:#fff; font-size:16px; transition: color .2s ease, transform .2s ease; }
.footer-col__list a:hover{ color:var(--accent); transform:translateX(3px); }

.footer-base{ width:1170px; margin:0 auto 50px; padding-top:16px; border-top:1px solid var(--accent); text-align:center; box-sizing:border-box; }
.footer-base p{ font-size:14px; color:#fff; margin:0; }

/* Responsive footer width behavior retained */
@media (max-width:991.98px){
  .footer-section{ width:100%; margin:40px 0 0; border-radius:0; }
  .footer-container{ grid-template-columns:1fr; gap:24px; }
  .footer-base{ width:100%; margin:0 0 32px; }
}



/* =========================================================
   /resources/mv3-guide/blocked-request-model-dnr-vs-webrequest/
   Page-specific styles (scoped)
   ========================================================= */
.mv3-dnr-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-dnr-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center labels & headings for this page only */
.mv3-dnr-page .section-label,
.mv3-dnr-page h1,.mv3-dnr-page h2,.mv3-dnr-page h3,
.mv3-dnr-page .lead{ text-align:center; }

/* Remove underline on links (page only) */
.mv3-dnr-page a{color:var(--accent-2);text-decoration:none}
.mv3-dnr-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-dnr-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-dnr-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-dnr-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-dnr-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-dnr-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.mv3-dnr-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-dnr-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists */
.mv3-dnr-page .bullets{max-width:920px;margin:6px auto 0}
.mv3-dnr-page .bullets li{margin:6px 0}

/* CTA band */
.mv3-dnr-page .cta{padding-block:clamp(20px,4vw,36px)}
.mv3-dnr-page .cta-card{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#2a2f58 0%, #171b38 100%);
  border:1px solid var(--ring);border-radius:28px;padding:18px 20px;box-shadow:var(--shadow-1)
}
.mv3-dnr-page .cta-text{flex:1 1 460px}
.mv3-dnr-page .cta-text h2{margin:0 0 6px;color:#fff;font-weight:800}
.mv3-dnr-page .cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mv3-dnr-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-dnr-page .btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.mv3-dnr-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-dnr-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-dnr-page .btn-ghost:hover{background:rgba(255,255,255,.11)}


/* =========================================================
   /resources/mv3-guide/service-workers-promises/
   Page-specific styles (scoped to avoid affecting other pages)
   ========================================================= */
.mv3-sw-promises-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-sw-promises-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center labels and headings on this page only (per your global requirement) */
.mv3-sw-promises-page .section-label,
.mv3-sw-promises-page h1,
.mv3-sw-promises-page h2,
.mv3-sw-promises-page h3,
.mv3-sw-promises-page .lead{ text-align:center; }

/* Remove underlines on links on this page only */
.mv3-sw-promises-page a{color:var(--accent-2);text-decoration:none}
.mv3-sw-promises-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-sw-promises-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-sw-promises-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-sw-promises-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-sw-promises-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-sw-promises-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.mv3-sw-promises-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-sw-promises-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists */
.mv3-sw-promises-page .bullets{max-width:920px;margin:6px auto 0}
.mv3-sw-promises-page .bullets li{margin:6px 0}

/* CTA band */
.mv3-sw-promises-page .cta{padding-block:clamp(20px,4vw,36px)}
.mv3-sw-promises-page .cta-card{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#2a2f58 0%, #171b38 100%);
  border:1px solid var(--ring);border-radius:28px;padding:18px 20px;box-shadow:var(--shadow-1)
}
.mv3-sw-promises-page .cta-text{flex:1 1 460px}
.mv3-sw-promises-page .cta-text h2{margin:0 0 6px;color:#fff;font-weight:800;text-align:center}
.mv3-sw-promises-page .cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mv3-sw-promises-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-sw-promises-page .btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.mv3-sw-promises-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-sw-promises-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-sw-promises-page .btn-ghost:hover{background:rgba(255,255,255,.11)}


/* =========================================================
   /resources/mv3-guide/alarms-and-schedulers/
   Page-specific styles (scoped so other pages are unchanged)
   ========================================================= */
.mv3-alarms-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-alarms-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center labels and headings on this page only */
.mv3-alarms-page .section-label,
.mv3-alarms-page h1,
.mv3-alarms-page h2,
.mv3-alarms-page h3,
.mv3-alarms-page .lead{ text-align:center; }

/* Remove link underlines on this page */
.mv3-alarms-page a{color:var(--accent-2);text-decoration:none}
.mv3-alarms-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-alarms-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-alarms-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-alarms-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-alarms-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-alarms-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.mv3-alarms-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-alarms-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists */
.mv3-alarms-page .bullets{max-width:920px;margin:6px auto 0}
.mv3-alarms-page .bullets li{margin:6px 0}

/* CTA band */
.mv3-alarms-page .cta{padding-block:clamp(20px,4vw,36px)}
.mv3-alarms-page .cta-card{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#2a2f58 0%, #171b38 100%);
  border:1px solid var(--ring);border-radius:28px;padding:18px 20px;box-shadow:var(--shadow-1)
}
.mv3-alarms-page .cta-text{flex:1 1 460px}
.mv3-alarms-page .cta-text h2{margin:0 0 6px;color:#fff;font-weight:800;text-align:center}
.mv3-alarms-page .cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mv3-alarms-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-alarms-page .btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.mv3-alarms-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-alarms-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-alarms-page .btn-ghost:hover{background:rgba(255,255,255,.11)}



/* =========================================================
   /resources/mv3-guide/storage-quotas/
   Page-specific styles (scoped so other pages are unchanged)
   ========================================================= */
.mv3-storage-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-storage-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center labels and headings on this page only */
.mv3-storage-page .section-label,
.mv3-storage-page h1,
.mv3-storage-page h2,
.mv3-storage-page h3,
.mv3-storage-page .lead{ text-align:center; }

/* Remove link underlines on this page */
.mv3-storage-page a{color:var(--accent-2);text-decoration:none}
.mv3-storage-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-storage-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-storage-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-storage-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-storage-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-storage-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.mv3-storage-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-storage-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists & helpers */
.mv3-storage-page .bullets{max-width:920px;margin:6px auto 0;padding-left:1.1rem}
.mv3-storage-page .bullets li{margin:6px 0}
.mv3-storage-page .center-narrow{max-width:780px;margin:8px auto 0;text-align:center}

/* CTA buttons inside panels */
.mv3-storage-page .quick-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.mv3-storage-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-storage-page .btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.mv3-storage-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-storage-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-storage-page .btn-ghost:hover{ba



/* =========================================================
   /resources/mv3-guide/offscreen-document/
   Page-specific styles (scoped to avoid changing others)
   ========================================================= */
.mv3-offscreen-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-offscreen-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the label and headings on this page only */
.mv3-offscreen-page .section-label,
.mv3-offscreen-page h1,
.mv3-offscreen-page h2,
.mv3-offscreen-page h3,
.mv3-offscreen-page .lead{ text-align:center; }

/* Remove link underlines on this page only */
.mv3-offscreen-page a{color:var(--accent-2);text-decoration:none}
.mv3-offscreen-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-offscreen-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-offscreen-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-offscreen-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-offscreen-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-offscreen-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Content panels */
.mv3-offscreen-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-offscreen-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists */
.mv3-offscreen-page .bullets{max-width:920px;margin:6px auto 0;padding-left:1.1rem}
.mv3-offscreen-page .bullets li{margin:6px 0}

/* CTA buttons within panels */
.mv3-offscreen-page .quick-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.mv3-offscreen-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-offscreen-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.mv3-offscreen-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-offscreen-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-offscreen-page .btn-ghost:hover{background:rgba(255,255,255,.11)}



/* =========================================================
   /resources/mv3-guide/runtime-messaging-patterns/
   Page-specific styles (scoped; won't affect other pages)
   ========================================================= */
.mv3-messaging-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-messaging-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the label, headings, and subhead just on this page */
.mv3-messaging-page .section-label,
.mv3-messaging-page h1,
.mv3-messaging-page h2,
.mv3-messaging-page h3,
.mv3-messaging-page .lead{ text-align:center; }

/* Remove link underlines on this page only */
.mv3-messaging-page a{color:var(--accent-2);text-decoration:none}
.mv3-messaging-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-messaging-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-messaging-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-messaging-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-messaging-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-messaging-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Content panels */
.mv3-messaging-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-messaging-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Lists & code */
.mv3-messaging-page .bullets{max-width:920px;margin:6px auto 0;padding-left:1.1rem}
.mv3-messaging-page .bullets li{margin:6px 0}
.mv3-messaging-page .code-block{
  margin:12px auto 0;max-width:920px;
  background:#0d1124;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:14px 16px;overflow:auto;color:#e8eaff
}

/* CTA buttons within panels */
.mv3-messaging-page .quick-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.mv3-messaging-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-messaging-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.mv3-messaging-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-messaging-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-messaging-page .btn-ghost:hover{background:rgba(255,255,255,.11)}



/* =========================================================
   /resources/mv3-guide/migration-checklist/
   Page-specific styles (scoped; won't affect other pages)
   ========================================================= */
.mv3-migration-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.mv3-migration-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the label, headings, and subhead just on this page */
.mv3-migration-page .section-label,
.mv3-migration-page h1,
.mv3-migration-page h2,
.mv3-migration-page h3,
.mv3-migration-page .lead{ text-align:center; }

/* Remove link underlines on this page only */
.mv3-migration-page a{color:var(--accent-2);text-decoration:none}
.mv3-migration-page a:hover{color:#d7d1ff}

/* Hero */
.mv3-migration-page .hero{padding:clamp(28px,4vw,40px) 0}
.mv3-migration-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.mv3-migration-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.mv3-migration-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.mv3-migration-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Content panels */
.mv3-migration-page .panel{padding-block:clamp(18px,3vw,28px)}
.mv3-migration-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Steps list */
.mv3-migration-page .steps{
  counter-reset: step; list-style:none; padding:0; margin:10px auto 0; max-width:860px
}
.mv3-migration-page .steps li{
  counter-increment: step; position:relative;
  padding:14px 16px 14px 56px; margin:8px 0;
  background:#0d1124; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#e8eaff
}
.mv3-migration-page .steps li::before{
  content: counter(step);
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  color:#fff; font-weight:800; font-size:.95rem; box-shadow:var(--shadow-2)
}

/* Deliverables & CTAs */
.mv3-migration-page .deliverables{max-width:820px;margin:6px auto 0;text-align:center}
.mv3-migration-page .quick-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.mv3-migration-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:14px;padding:12px 18px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer;color:#fff
}
.mv3-migration-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.mv3-migration-page .btn-primary:hover{transform:translateY(-1px)}
.mv3-migration-page .btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mv3-migration-page .btn-ghost:hover{background:rgba(255,255,255,.11)}