/* A flowing phone layout keeps hero copy, theme controls and cards separate. */
@media (max-width: 760px) {
  #beranda.hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    min-height: 100svh;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  #beranda .hero-backdrop {
    object-position: 60% center;
    transform: none;
    scale: none;
    translate: none;
  }
  #beranda.hero::after,
  #beranda.hero.daytime::after {
    background: linear-gradient(180deg, rgba(6, 20, 28, .72) 0%, rgba(6, 20, 28, .48) 48%, rgba(6, 20, 28, .26) 100%);
  }
  #beranda .hero-content {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 20px;
  }
  #beranda h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-weight: 500;
  }
  #beranda h1 > span { max-width: none; }
  #beranda .hero-summary {
    max-width: 36ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #fffdf8;
  }
  #beranda .hero-button {
    min-height: 52px;
    max-width: 100%;
    margin-top: 24px;
    padding: 14px 22px;
    font-size: 14px;
    line-height: 1.35;
  }
  #beranda .time-toggle {
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: 20px;
    bottom: auto;
    left: auto;
    flex-direction: row;
    padding: 4px;
    gap: 2px;
    border-radius: 99px;
  }
  #beranda .time-toggle button { width: 44px; height: 44px; }
  #beranda .unit-card,
  #beranda .project-card {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 600px;
    min-height: 0;
    margin: 0 auto;
    padding: 18px;
    border-radius: 20px;
    background: rgba(249, 247, 239, .94);
  }
  #beranda .unit-card { align-items: center; gap: 14px; }
  #beranda .unit-card-copy { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 8px; }
  #beranda .unit-card-copy .card-kicker { grid-column: 1 / -1; }
  #beranda .unit-card-copy strong { margin-top: 6px; font-size: 38px; line-height: 1; }
  #beranda .unit-label { padding-bottom: 3px; font-size: 11px; }
  #beranda .unit-breakdown { gap: 9px; }
  #beranda .unit-breakdown span { font-size: 12px; }
  #beranda .unit-breakdown svg { width: 18px; height: 18px; }
  #beranda .project-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 10px; }
  #beranda .project-icon { width: 36px; height: 36px; }
  #beranda .project-card > div { min-width: 0; }
  #beranda .project-card > button { width: 44px; height: 44px; }
  #beranda .card-kicker { font-size: 9px; line-height: 1.5; letter-spacing: .07em; }
  #beranda .project-card h2 { font-size: 18px; line-height: 1.25; margin: 4px 0 6px; }
  #beranda .project-card p { font-size: 11px; line-height: 1.4; }
  #beranda .selling-points-scroller { padding-top: 12px; }
  #beranda .selling-points-rail .project-selling-points li { width: 150px; flex-basis: 150px; }
  #beranda .info-popover {
    position: fixed;
    top: max(80px, env(safe-area-inset-top, 0px));
    right: 20px;
    left: 20px;
    width: auto;
    max-height: calc(100svh - 110px);
    overflow-y: auto;
    z-index: 60;
  }
}
@media (max-width: 420px) {
  #beranda .hero-button { width: 100%; justify-content: space-between; }
}
@media (max-width: 360px) {
  #beranda.hero { padding-inline: 16px; }
  #beranda .time-toggle { right: 16px; }
  #beranda h1 { font-size: 32px; }
  #beranda .unit-card,
  #beranda .project-card { padding: 16px; }
  #beranda .unit-breakdown span { font-size: 11px; }
}