/* Monkey404 interactive hero drop-in. All selectors are prefixed to avoid touching the rest of the site. */
:root{
  --m404-ink:#041216;
  --m404-ink2:#071d22;
  --m404-green:#2bd883;
  --m404-lime:#a6ff54;
  --m404-mist:#f3f8f2;
  --m404-paper:#ffe86a;
  --m404-pink:#ff719b;
  --m404-blue:#9fe8ff;
  --m404-orange:#ffb458;
  --m404-danger:#ff3d42;
  --m404-glass:rgba(3,16,20,.62);
  --m404-border:rgba(43,216,131,.28);
}
.m404-hero,
.m404-hero *{box-sizing:border-box}
.m404-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:#061315;
  color:var(--m404-mist);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.m404-scene-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .85s ease, transform 1.2s ease;
  will-change:opacity, transform;
}
.m404-scene-layer.is-active{opacity:1; transform:scale(1)}
.m404-scene-layer[data-scene="1"]{background-image:url('./assets/hero-state-1.webp')}
.m404-scene-layer[data-scene="2"]{background-image:url('./assets/hero-state-2.webp')}
.m404-scene-layer[data-scene="3"]{background-image:url('./assets/hero-state-3.webp')}
.m404-scene-layer[data-scene="4"]{background-image:url('./assets/hero-state-4.webp')}
.m404-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 64% 28%, rgba(43,216,131,.12), transparent 35%),
    linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.38) 38%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.35) 100%);
}
.m404-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(0deg, rgba(4,18,22,.90) 0%, transparent 24%, transparent 72%, rgba(4,18,22,.55) 100%);
}
.m404-topbar{
  position:absolute;
  z-index:10;
  top:22px;
  left:clamp(18px,3.2vw,56px);
  right:clamp(18px,3.2vw,56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.m404-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  font-weight:850;
  letter-spacing:.2px;
  font-size:clamp(22px,2.2vw,34px);
  text-shadow:0 8px 30px rgba(0,0,0,.55);
}
.m404-brand img{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(43,216,131,.28))}
.m404-brand span:last-child{color:var(--m404-green)}
.m404-nav-pill{display:flex; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--m404-border); border-radius:999px; background:rgba(3,16,20,.52); backdrop-filter:blur(12px); box-shadow:0 12px 34px rgba(0,0,0,.25)}
.m404-nav-pill button,.m404-nav-pill a{font:inherit; color:var(--m404-mist); background:transparent; border:0; text-decoration:none; cursor:pointer; opacity:.92; white-space:nowrap}
.m404-nav-pill .m404-tiny{font-size:13px; color:rgba(243,248,242,.74)}
.m404-copy{position:absolute; z-index:30; left:clamp(18px,5vw,86px); top:50%; transform:translateY(-46%); width:min(620px, calc(100% - 36px))}
.m404-state-kicker{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--m404-border); border-radius:999px; background:rgba(3,16,20,.55); color:var(--m404-lime); font-weight:800; letter-spacing:.14em; font-size:12px; text-transform:uppercase; box-shadow:0 12px 30px rgba(0,0,0,.22)}
.m404-headline{margin:18px 0 12px; font-size:clamp(44px,6.8vw,104px); line-height:.92; letter-spacing:-.07em; font-weight:920; text-shadow:0 12px 34px rgba(0,0,0,.5); max-width:700px}
.m404-headline .m404-accent{color:var(--m404-green)}
.m404-sub{font-size:clamp(17px,1.65vw,24px); line-height:1.38; max-width:580px; color:rgba(243,248,242,.9); text-shadow:0 6px 20px rgba(0,0,0,.45)}
.m404-interaction-hint{position:relative; z-index:35; margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.m404-hint-chip{display:inline-flex; align-items:center; gap:8px; padding:10px 13px; background:rgba(3,16,20,.58); border:1px solid rgba(255,255,255,.12); border-radius:999px; backdrop-filter:blur(12px); color:rgba(243,248,242,.88); font-size:14px}
.m404-hint-icon{width:22px; height:22px; display:grid; place-items:center; color:var(--m404-lime)}
.m404-actions{position:relative; z-index:36; margin-top:28px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.m404-btn{appearance:none; border:0; border-radius:18px; padding:16px 22px; font-weight:850; font-size:16px; cursor:pointer; transition:transform .2s ease, filter .2s ease, background .2s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.m404-btn:hover{transform:translateY(-2px)}
.m404-btn-primary{background:linear-gradient(135deg, var(--m404-green), #9cff56); color:#051417; box-shadow:0 18px 40px rgba(43,216,131,.28)}
.m404-btn-ghost{background:rgba(3,16,20,.58); color:var(--m404-mist); border:1px solid var(--m404-border); backdrop-filter:blur(12px)}
.m404-hud{position:absolute; z-index:18; right:clamp(18px,4vw,70px); bottom:clamp(20px,4vw,70px); width:min(380px, calc(100% - 36px)); padding:18px; border:1px solid var(--m404-border); background:rgba(3,16,20,.62); backdrop-filter:blur(14px); border-radius:26px; box-shadow:0 18px 60px rgba(0,0,0,.38)}
.m404-hud-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px}
.m404-hud-title{font-weight:850; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--m404-lime)}
.m404-hud-label{font-size:13px; color:rgba(243,248,242,.72)}
.m404-meter{height:16px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.m404-meter-fill{height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, var(--m404-green), var(--m404-paper), var(--m404-orange), var(--m404-danger)); transition:width .45s ease}
.m404-state-dots{display:flex; gap:8px; margin-top:12px}
.m404-dot{width:10px; height:10px; border-radius:99px; background:rgba(255,255,255,.22); transition:background .3s ease, transform .3s ease}
.m404-dot.is-active{background:var(--m404-lime); transform:scale(1.35)}
.m404-shake-button{display:none!important}
.m404-mobile-only{display:none!important}
.m404-desktop-only{display:inline-flex!important}
body.m404-coarse-pointer .m404-desktop-only{display:none!important}
body.m404-coarse-pointer .m404-mobile-only{display:inline-flex!important}
.m404-postit-layer{position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none}
.m404-postit{position:absolute; width:70px; min-height:55px; padding:9px 8px; border-radius:3px; color:#152024; font-weight:850; font-size:11px; line-height:1.05; display:grid; place-items:center; text-align:center; box-shadow:0 12px 28px rgba(0,0,0,.2); will-change:transform, opacity; animation:m404FlyNote var(--dur, 1.6s) cubic-bezier(.15,.8,.24,1) forwards; transform-origin:center}
.m404-postit::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.36), transparent 42%); pointer-events:none}
@keyframes m404FlyNote{0%{opacity:0; transform:translate(var(--x0), var(--y0)) rotate(var(--r0)) scale(.65)}12%{opacity:1}100%{opacity:0; transform:translate(var(--x1), var(--y1)) rotate(var(--r1)) scale(1.1)}}
.m404-monkey-hotspot{position:absolute; z-index:11; right:5%; top:24%; width:28%; height:54%; border:0; background:transparent; cursor:pointer; border-radius:40%}
.m404-monkey-hotspot::before{content:""; position:absolute; inset:10%; border-radius:50%; border:2px solid rgba(166,255,84,0); transform:scale(.8); transition:border-color .25s ease, transform .25s ease}
.m404-monkey-hotspot:hover::before{border-color:rgba(166,255,84,.36); transform:scale(1); box-shadow:0 0 60px rgba(43,216,131,.18)}
.m404-monkey-hotspot.is-clicked::before{animation:m404MonkeyPulse .55s ease-out}
@keyframes m404MonkeyPulse{0%{border-color:rgba(166,255,84,.8); transform:scale(.8)}100%{border-color:rgba(166,255,84,0); transform:scale(1.35)}}
.m404-stress-marks{position:absolute; z-index:7; left:39%; top:22%; width:120px; height:120px; opacity:0; transition:opacity .4s ease; pointer-events:none}
.m404-stress-marks.is-active{opacity:1; animation:m404StressBob .55s infinite alternate ease-in-out}
.m404-stress-marks span{position:absolute; width:7px; height:42px; border-radius:999px; background:var(--m404-danger); box-shadow:0 0 18px rgba(255,61,66,.55)}
.m404-stress-marks span:nth-child(1){left:20px; top:10px; transform:rotate(-26deg)}
.m404-stress-marks span:nth-child(2){left:58px; top:0; transform:rotate(3deg)}
.m404-stress-marks span:nth-child(3){left:94px; top:14px; transform:rotate(25deg)}
@keyframes m404StressBob{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.04)}}
.m404-hero.is-shaking{animation:m404PageShake .35s linear both}
@keyframes m404PageShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,-3px)}80%{transform:translate(3px,2px)}}
.m404-scroll-cue{position:absolute; z-index:10; left:50%; bottom:18px; transform:translateX(-50%); font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:rgba(243,248,242,.64); display:flex; flex-direction:column; align-items:center; gap:8px}
.m404-scroll-cue span:last-child{width:2px; height:28px; background:linear-gradient(var(--m404-lime), transparent); animation:m404Cue 1.2s infinite ease-in-out}
@keyframes m404Cue{0%{transform:scaleY(.3); opacity:.25}50%{transform:scaleY(1); opacity:1}100%{transform:scaleY(.3); opacity:.25}}
@media (max-width:900px){
  .m404-hero{min-height:100svh; height:100svh}
  .m404-topbar{top:14px}.m404-nav-pill{display:none}.m404-brand{font-size:24px}.m404-brand img{width:36px;height:36px}
  .m404-copy{z-index:22; top:45%; left:18px; right:18px; width:auto; transform:translateY(-50%)}
  .m404-headline{font-size:clamp(38px,11.5vw,70px); max-width:470px}
  .m404-sub{font-size:16px; max-width:400px}
  .m404-hud{z-index:19; top:12px; right:14px; left:14px; bottom:auto; width:auto; padding:11px 12px; border-radius:19px}
  .m404-hud-row{margin-bottom:7px}
  .m404-hud-title{font-size:11px}
  .m404-hud-label{font-size:12px}
  .m404-meter{height:11px}
  .m404-state-dots{margin-top:8px}
  .m404-scroll-cue{display:none}
  .m404-desktop-only{display:none!important}
  .m404-mobile-only{display:inline-flex!important}
  .m404-monkey-hotspot{display:none!important}
  .m404-stress-marks{left:47%; top:20%; transform:scale(.8)}
  .m404-hint-chip{font-size:12px}.m404-actions{gap:10px}.m404-btn{padding:14px 16px}
  .m404-mobile-chaos-hint{font-size:14px; padding:13px 15px; font-weight:900; color:#061315; background:linear-gradient(135deg,var(--m404-green),var(--m404-lime)); border-color:rgba(166,255,84,.52); box-shadow:0 14px 36px rgba(43,216,131,.26); animation:m404MobileHintPulse 1.65s ease-in-out infinite}
  .m404-mobile-chaos-hint .m404-hint-icon{color:#061315}
}

@media (pointer:coarse){
  .m404-desktop-only{display:none!important}
  .m404-mobile-only{display:inline-flex!important}
  .m404-monkey-hotspot{display:none!important}
}

@keyframes m404MobileHintPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){
  .m404-scene-layer,.m404-meter-fill,.m404-btn,.m404-dot{transition:none!important}.m404-postit{animation:none!important; opacity:0}.m404-hero.is-shaking,.m404-stress-marks.is-active{animation:none!important}
}


/* Mobile navigation shell for the live site. Desktop navigation remains unchanged. */
.m404-mobile-shell{display:none}
@media (min-width:901px){
  .m404-mobile-shell{display:none!important}
}
@media (max-width:900px){
  body.m404-has-mobile-menu{padding-bottom:86px}
  .m404-existing-header-mobile-managed{display:none!important}
  .m404-existing-nav-hidden-mobile{display:none!important}
  .m404-mobile-shell{display:block; position:relative; z-index:99998; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
  .m404-mobile-bottom-menu{
    position:fixed;
    z-index:99999;
    left:12px;
    right:12px;
    bottom:12px;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:10px;
    padding:9px;
    border-radius:26px;
    border:1px solid rgba(43,216,131,.30);
    background:rgba(4,18,22,.82);
    backdrop-filter:blur(18px);
    box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .m404-mobile-menu-toggle,
  .m404-mobile-treehouse-link{
    appearance:none;
    min-height:54px;
    border:0;
    border-radius:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    font:inherit;
    font-weight:950;
    letter-spacing:-.02em;
    cursor:pointer;
  }
  .m404-mobile-menu-toggle{background:rgba(255,255,255,.07); color:var(--m404-mist); border:1px solid rgba(255,255,255,.11)}
  .m404-mobile-menu-toggle span{font-size:21px; line-height:1}
  .m404-mobile-treehouse-link{background:linear-gradient(135deg,var(--m404-green),var(--m404-lime)); color:#061315; box-shadow:0 12px 34px rgba(43,216,131,.28)}
  .m404-mobile-treehouse-link span{font-size:11px; text-transform:uppercase; letter-spacing:.14em; opacity:.78}
  .m404-mobile-treehouse-link strong{font-size:17px}
  .m404-mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:99996;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(6px);
  }
  .m404-mobile-drawer{
    position:fixed;
    z-index:99997;
    left:12px;
    right:12px;
    bottom:88px;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(43,216,131,.30);
    background:linear-gradient(180deg,rgba(7,29,34,.98),rgba(3,16,20,.98));
    box-shadow:0 28px 90px rgba(0,0,0,.52);
    color:var(--m404-mist);
    transform-origin:bottom center;
    animation:m404DrawerIn .22s ease-out both;
  }
  @keyframes m404DrawerIn{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:translateY(0) scale(1)}}
  .m404-drawer-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 18px 12px}
  .m404-drawer-head strong{font-size:22px; letter-spacing:-.04em}
  .m404-drawer-head strong span{color:var(--m404-green)}
  .m404-mobile-close{appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; width:42px; height:42px; border-radius:15px; font-size:24px; line-height:1; cursor:pointer}
  .m404-drawer-links{display:grid; gap:8px; padding:0 14px 14px}
  .m404-drawer-links a{display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:13px 14px; border-radius:17px; color:rgba(243,248,242,.88); text-decoration:none; font-weight:850; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07)}
  .m404-drawer-links a::after{content:"›"; color:var(--m404-green); font-size:22px; line-height:1}
  .m404-drawer-treehouse{margin:0 14px 14px; min-height:58px; display:flex; align-items:center; justify-content:center; border-radius:20px; background:linear-gradient(135deg,var(--m404-green),var(--m404-lime)); color:#061315; text-decoration:none; font-weight:1000; box-shadow:0 16px 42px rgba(43,216,131,.26)}
  body.m404-menu-open{overflow:hidden}
}
@media (max-width:430px){
  .m404-mobile-bottom-menu{grid-template-columns:.74fr 1.26fr; left:10px; right:10px; bottom:10px}
  .m404-mobile-menu-toggle strong{font-size:14px}
  .m404-mobile-treehouse-link strong{font-size:16px}
  .m404-hud{
    display:block;
    top:10px;
    left:10px;
    right:10px;
    bottom:auto;
    width:auto;
    padding:9px 10px;
    border-radius:17px;
    background:rgba(3,16,20,.78);
    backdrop-filter:blur(16px);
  }
  .m404-hud-row{margin-bottom:6px}
  .m404-hud-title{font-size:10px; letter-spacing:.10em}
  .m404-hud-label{display:none}
  .m404-hud-row strong{font-size:13px}
  .m404-meter{height:10px}
  .m404-state-dots{margin-top:8px; gap:6px}
  .m404-dot{width:7px; height:7px}
}



/* Old-style product overview inserted directly below the interactive hero. */
.m404-old-style,
.m404-old-style *{box-sizing:border-box}
.m404-old-style{
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:clamp(48px,7vw,112px) clamp(18px,6vw,92px);
  background:
    radial-gradient(circle at 16% 0%, rgba(43,216,131,.20), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(166,255,84,.12), transparent 31%),
    linear-gradient(180deg, #041216 0%, #071d22 56%, #041216 100%);
  color:var(--m404-mist);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border-top:1px solid rgba(43,216,131,.18);
  border-bottom:1px solid rgba(43,216,131,.12);
}
.m404-old-style::before{
  content:"";
  position:absolute;
  inset:auto -12% 0 -12%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(166,255,84,.62), transparent);
  opacity:.58;
}
.m404-old-style-inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.88fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.m404-old-eyebrow{
  margin:0 0 15px;
  color:var(--m404-lime);
  font-size:clamp(12px,1.1vw,15px);
  line-height:1.2;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.m404-old-copy-block h2{
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(44px,6.4vw,86px);
  line-height:.92;
  letter-spacing:-.07em;
  max-width:760px;
}
.m404-old-lead{
  margin:0;
  max-width:790px;
  color:rgba(243,248,242,.86);
  font-size:clamp(18px,1.85vw,25px);
  line-height:1.42;
  font-weight:650;
  letter-spacing:-.02em;
}
.m404-old-tagline{
  margin:20px 0 0;
  color:rgba(243,248,242,.72);
  font-size:clamp(16px,1.5vw,20px);
  font-weight:820;
}
.m404-old-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.m404-old-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:15px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  border:1px solid var(--m404-border);
  color:var(--m404-mist);
  background:rgba(3,16,20,.55);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease;
}
.m404-old-btn:hover{transform:translateY(-2px); background:rgba(43,216,131,.10)}
.m404-old-btn-primary{
  color:#051417;
  background:linear-gradient(135deg, var(--m404-green), var(--m404-lime));
  border-color:rgba(166,255,84,.42);
  box-shadow:0 18px 48px rgba(43,216,131,.22);
}
.m404-old-audience{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.m404-old-audience span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(243,248,242,.12);
  background:rgba(255,255,255,.045);
  color:rgba(243,248,242,.78);
  font-size:13px;
  font-weight:850;
}
.m404-treehouse-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(43,216,131,.28);
  border-radius:32px;
  padding:22px;
  background:
    radial-gradient(circle at 80% 0%, rgba(166,255,84,.16), transparent 28%),
    linear-gradient(180deg, rgba(7,29,34,.88), rgba(3,16,20,.76));
  box-shadow:0 28px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.m404-treehouse-card::after{
  content:"";
  position:absolute;
  inset:-30% auto auto -24%;
  width:70%;
  height:70%;
  border-radius:50%;
  background:rgba(43,216,131,.10);
  filter:blur(38px);
  pointer-events:none;
}
.m404-treehouse-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid rgba(243,248,242,.10);
}
.m404-treehouse-top img{
  width:48px;
  height:48px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(43,216,131,.24));
}
.m404-treehouse-top strong{
  display:block;
  color:#fff;
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.m404-treehouse-top span{
  display:block;
  margin-top:4px;
  color:rgba(243,248,242,.62);
  font-size:13px;
  font-weight:750;
}
.m404-treehouse-top em{
  justify-self:end;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(166,255,84,.12);
  color:var(--m404-lime);
  border:1px solid rgba(166,255,84,.22);
  font-style:normal;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.m404-treehouse-stats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.m404-treehouse-stats div{
  min-height:94px;
  padding:15px;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(243,248,242,.10);
}
.m404-treehouse-stats div:nth-child(5){grid-column:span 2; min-height:78px}
.m404-treehouse-stats strong{
  display:block;
  color:#fff;
  font-size:clamp(17px,1.4vw,22px);
  line-height:1.05;
  letter-spacing:-.03em;
}
.m404-treehouse-stats span{
  display:block;
  margin-top:10px;
  color:rgba(166,255,84,.76);
  font-size:13px;
  font-weight:820;
}
.m404-treehouse-tabs{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:17px;
  padding-top:17px;
  border-top:1px solid rgba(243,248,242,.10);
}
.m404-treehouse-tabs span{
  padding:8px 10px;
  border-radius:999px;
  color:rgba(243,248,242,.72);
  background:rgba(4,18,22,.58);
  border:1px solid rgba(43,216,131,.18);
  font-size:12px;
  font-weight:850;
}
@media(max-width:980px){
  .m404-old-style-inner{grid-template-columns:1fr}
  .m404-treehouse-card{max-width:680px}
}
@media(max-width:620px){
  .m404-old-style{padding:44px 18px 62px}
  .m404-old-copy-block h2{font-size:clamp(40px,12vw,62px)}
  .m404-old-lead{font-size:17px}
  .m404-old-actions{gap:10px}.m404-old-btn{flex:1 1 100%; min-height:50px}
  .m404-treehouse-top{grid-template-columns:auto 1fr}.m404-treehouse-top em{grid-column:1 / -1; justify-self:start}
  .m404-treehouse-stats{grid-template-columns:1fr}.m404-treehouse-stats div:nth-child(5){grid-column:auto}
}

/* Coarse pointer devices should get the tap/shake message even when viewport is wide, such as tablets. */
body.m404-coarse-pointer .m404-interaction-hint .m404-mobile-chaos-hint{font-weight:950}
body.m404-coarse-pointer .m404-monkey-hotspot{cursor:pointer}

/* Keep the CTA buttons above every invisible interactive hotspot. */
.m404-actions a, .m404-actions button{position:relative; z-index:40}


@media (max-width:380px){
  .m404-copy{top:48%}
  .m404-state-kicker{font-size:10px; padding:7px 10px}
  .m404-headline{font-size:clamp(34px,10.5vw,48px)}
  .m404-sub{font-size:14px}
  .m404-interaction-hint{margin-top:16px}
  .m404-actions{margin-top:18px}
}