/* Responsive overrides for phone and small-tablet widths.
   Loaded after assets/styles.css on every page. */

@media (max-width: 768px) {
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

/* ── Global spacing / type tightening for phone widths ── */
.wrap,.wrap-wide{padding-left:20px;padding-right:20px}
.sec{padding:52px 0}
.hero{padding:44px 0 40px}
.hero-pill{display:block;text-align:center;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);padding:14px 22px;margin:24px auto 0;max-width:calc(100vw - 40px);border-radius:20px;gap:0}
.page-hero{padding:44px 0 44px}
.band{padding:52px 0}

/* ── Nav: hamburger + slide-down panel replaces hover dropdowns ── */
.nav{z-index:80}
.nav-inner{padding:12px 18px;gap:10px}
.brand{font-size:17px;gap:8px}
.logo-mark,.logo-mark svg{width:30px;height:30px}
.nav-cta{margin-left:auto;gap:0}
.nav-cta .btn{padding:9px 14px;font-size:13px;border-radius:10px}

.mobile-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;margin-left:10px;
  border:1.5px solid var(--border-soft);border-radius:10px;background:#fff;
  cursor:pointer;color:var(--navy);
}
.mobile-menu-btn svg{width:19px;height:19px;display:block}
.mobile-menu-btn .ic-close{display:none}
.nav.nav-open .mobile-menu-btn .ic-open{display:none}
.nav.nav-open .mobile-menu-btn .ic-close{display:block}

.nav-backdrop{display:none}
.nav.nav-open{backdrop-filter:none}
.nav.nav-open .nav-backdrop{
  display:block;position:fixed;left:0;right:0;bottom:0;top:0;
  background:rgba(20,43,78,.32);z-index:55;
  opacity:0;animation:navFade .22s ease forwards;
}
.nav-links{
  position:fixed;left:-100%;bottom:0;top:0;width:78vw;max-width:320px;
  flex-direction:column;align-items:stretch;gap:0;margin:0;
  background:#fff;overflow:hidden;padding:0;
  box-shadow:0 0 40px rgba(26,60,110,.22);
  border-right:1px solid var(--border-soft);
  z-index:60;
  visibility:hidden;
  transition:left .28s cubic-bezier(.3,.8,.4,1), visibility 0s linear .28s;
}
.nav-drawer-brand{
  flex:none;position:relative;z-index:5;
  display:flex;align-items:center;gap:9px;padding:14px 20px;margin-bottom:0;
  background:#fff;border-bottom:1px solid var(--border-soft);
  font-weight:800;font-size:17px;color:var(--navy);letter-spacing:-.02em;
}
.nav-drawer-brand .logo-mark,.nav-drawer-brand .logo-mark img{width:30px;height:30px}
.nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:28px;display:flex;flex-direction:column;align-items:stretch}
.nav.nav-open .nav-links{
  display:flex !important;
  left:0;
  visibility:visible;
  transition:left .28s cubic-bezier(.3,.8,.4,1), visibility 0s linear 0s;
}
@keyframes navFade{from{opacity:0}to{opacity:1}}
.nav.nav-open .nav-item{flex-direction:column;align-items:stretch;padding:0}
.nav.nav-open .nav-item>.nav-top{font-size:16.5px;font-weight:700;color:var(--navy);padding:15px 20px;border-bottom:1px solid var(--border-soft)}
.nav.nav-open .nav-item>.nav-top::after{display:none}
.nav.nav-open .nav-drop,.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{
  position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;min-width:0;
  box-shadow:none;border:none;border-radius:0;padding:4px 0 12px;display:flex;
}
.nav.nav-open .nav-drop a{font-size:14.5px;padding:11px 20px}
.nav.nav-open .nav-links>.nav-scroll>.nav-solo{font-size:16.5px;font-weight:700;color:var(--navy);padding:15px 20px;border-bottom:1px solid var(--border-soft)}

/* ── Grids: single column everywhere on phone ── */
.prob-grid,.cip-top,.feat-grid,.mv-grid,.contrast,.aud-grid,.price-grid,.founders-grid,.vlist,
.news-grid,.contact-grid,.post-featured,.stats-grid{grid-template-columns:1fr !important}
.post-featured .post-thumb{min-height:200px;border-right:none;border-bottom:1px solid var(--border-soft)}
.cip-top{gap:28px}
.cip-visual{margin-top:0 !important}
.mv-divider{display:none}
.fullname .acr{font-size:26px}
.fullname .exp{font-size:17px}

/* ── Roadmap: vertical timeline ── */
.roadmap{grid-template-columns:1fr !important;gap:0}
.roadmap::before{left:6px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
.rm-item{padding:6px 0 22px 30px}
.rm-item::before{top:8px;left:0}

/* ── Comparison table: horizontal scroll ── */
.cmp{overflow-x:auto}
.cmp table{min-width:600px}

/* ── Deal card / structured contract preview ── */
.cs-parties,.cs-row3,.cs-row2{grid-template-columns:1fr !important}
.cs-pct{grid-template-columns:repeat(2,1fr) !important}

/* ── Forms ── */
.ff-row{grid-template-columns:1fr !important}
.form-wrap{padding:26px 20px}
.modal{padding:14px}
.slot-grid{grid-template-columns:1fr 1fr !important}

/* ── Release timeline strip ── */
.release{flex-basis:230px}

/* ── Article pages ── */
.art-body p,.art-body li{font-size:16px}
.art-lede{font-size:17px}

/* ── CTA button rows: stack full-width for easy tapping ── */
.hero-cta,.final-cta,.ea-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn,.final-cta .btn,.ea-cta .btn,.hero-cta .btn-ghost,.final-cta .link-light,.ea-cta .link-light{width:100%;justify-content:center;text-align:center}

}