/* ============================================================================
Balloon Gram — blog styles.
Design tokens, nav, buttons and footer are lifted from the main site so the
blog reads as the same product, not a bolt-on. Blog-specific rules follow.
========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Pairs with the width/height attributes on every ![]()
. Those attributes are
presentational hints, so without this an image whose CSS sets only a width
inherits the raw pixel height and stretches. */
img { height: auto; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: #fff; color: #2d2d2d; overflow-x: hidden; }
:root {
--pink: #FF6BA8;
--teal: #3EC9C0;
--yellow: #FFD95A;
--orange: #FF8C42;
--purple: #A78BFA;
--dark: #1e2a3a;
--soft: #FFF8F2;
--shadow: 0 8px 32px rgba(0,0,0,.10);
--radius: 20px;
}
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.btn {
display: inline-block; padding: 13px 28px; border-radius: 50px;
font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .95rem;
cursor: pointer; text-decoration: none; border: none;
transition: transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.btn-primary { background: var(--pink); color: #fff; }
.btn-outline { background: transparent; color: var(--pink); border: 2.5px solid var(--pink); }
.btn-white { background: #fff; color: var(--pink); }
/* ===== NAV (identical to main site) =====
Scoped to #mainNav — a bare `nav {}` selector previously matched
`