.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.social-feed-item {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.social-feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-feed-platform {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 20px;
}
.social-feed-empty {
  border: 1px dashed #DADFE6;
  border-radius: 14px;
  padding: 70px 30px;
  text-align: center;
  color: #8A93A6;
  font-size: 15px;
}

/* ---- Section Builder (Fase 2 Bagian B) ---- */
/* Mirrors .page-hero-inner.left in style.css, right-aligned instead. */
.page-hero-inner.right {
  text-align: right;
  max-width: 1100px;
}
.page-hero-inner.right p {
  margin-left: auto;
  margin-right: 0;
  max-width: 600px;
}
.section-header-badge {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
  display: inline-block;
}
/* cards_grid: card badge showing an uploaded icon instead of a number */
.purpose-num.purpose-num-icon {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.purpose-num.purpose-num-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* social_links: icon + text / icon-only display modes */
.follow-link-icon {
  display: inline-flex;
  align-items: center;
}
.follow-link-icon svg,
.follow-link-icon img {
  display: block;
}
.follow-link.follow-link-icononly {
  padding: 13px;
}

/* ---- Hero: optical alignment nudge (Fase 2) ----
   The eyebrow is small all-caps with 0.18em tracking; that trailing space makes
   the block read as inset next to the huge headline even though both start at
   the same x. Pull it left by ~one tracking step so the strokes line up. */
.hero-grid .eyebrow { margin-left: -2px; }

/* ---- Header: search bar fills logo->nav gap, nav flush to the right margin ---- */
.header-inner { justify-content: flex-start; gap: 16px; }
.header-inner .desktop-nav { margin-left: 0; }
.header-inner .desktop-nav .nav-btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
/* Hamburger lives here but is hidden on desktop — drop the wrapper too so its
   trailing flex gap doesn't hold the nav 16px short of the right edge. */
.header-inner .header-actions { display: none; }
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;          /* grow to fill the space up to the nav, shrink when
                             more tabs need the room */
  min-width: 150px;
  max-width: 620px;
  margin-left: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line, #E7E7EA);
  border-radius: 999px;
  background: #F6F7F9;
  cursor: text;           /* whole pill reads as a text field */
}
.header-search input { cursor: text; }
.header-search:focus-within { border-color: #9aa3b2; background: #fff; }
.header-search svg { flex-shrink: 0; }
.header-search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--navy, #212E4E);
}
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Below this width there isn't room for logo + search + 7 tabs — collapse to
   the hamburger menu (which already lists every tab). */
@media (max-width: 1120px) {
  .header-search { display: none; }
  .desktop-nav { display: none; }
  .header-inner .header-actions { display: flex; }
  .hamburger { display: flex; }
  .header-inner { justify-content: space-between; }
}
.footer-logo a { display: inline-block; }

/* Footer disclaimer column (replaces the old "Learn" category list) */
.footer-disclaimer { color: #9AA5BC; font-size: 13px; line-height: 1.65; max-width: 300px; }