#pg dialog.sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 540px);
  max-width: none;
  max-height: 86vh;
  max-height: 86dvh;
  margin: 0 auto;
  padding: 0 20px;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--canvas);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 72px 84px;
}
#pg dialog.sheet::backdrop { background: rgb(2 6 23 / .54); }
#pg .filter-heading, #pg .filter-actions {
  position: sticky;
  z-index: 1;
  background: var(--canvas);
}
#pg .filter-heading {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
#pg .filter-heading h2 { margin: 0; font-size: 19px; }
#pg .filter-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
#pg .filter-actions { bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); }
#pg .filter-actions .apply { margin-top: 0; }
html:has(#pg dialog.sheet[open]) { overflow: hidden; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  #announcement, .top { view-transition-name: none; }
}

@media (max-width: 900px) {
  html { scrollbar-gutter: auto; scroll-padding-top: 76px; }
  #announcement { position: relative; min-height: 40px; }
  .top { top: 0; }
  .top .navrow { min-height: 64px; flex-wrap: nowrap; gap: 12px; padding-block: 8px; }
  .top .brand { flex: none; width: clamp(92px, 25vw, 112px); }
  .top .navtools { gap: 8px; margin-left: auto; }
  .top .navtools :is(.nav-login, .nav-signup) { min-height: 44px; padding-inline: 14px; font-size: 14px; }
  .top .navtools .nav-login {
    background: #fff;
    border: 1px solid #7793bd;
    border-radius: 12px;
    color: var(--ink, #020617);
  }
  .top .navtools .menubtn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--card, #fff);
  }
  .top .menubtn[aria-expanded="true"] { background: #e6efff; color: var(--primary); }
  .top #menu.open {
    position: absolute;
    inset: calc(100% + 6px) 0 auto;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    padding: 8px;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    background: var(--card, #fff);
    box-shadow: 0 18px 34px -14px rgb(2 6 23 / .32);
  }
  .top #menu .nav-links > a {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: 12px;
    border-radius: 8px;
    font-size: 15px;
    white-space: normal;
  }
  .top #menu .nav-links > a[aria-current="page"] { background: #edf3ff; }
  .top #menu .nav-links > a::after { display: none; }
  .top :focus-visible { outline: 2px solid var(--primary, #003399); outline-offset: 2px; }
  .hero:has(.hero-stats) {
    min-height: calc(100vh - var(--hdr-h, 65px) - var(--announcement-height, 40px));
    min-height: calc(100svh - var(--hdr-h, 65px) - var(--announcement-height, 40px));
  }
  #pg .fx-o, #pg .fx-clear, #pg .ac { min-height: 44px; }
  #pg .pager :is(.pb, .pn) { width: 44px; height: 44px; }
}

@media (max-width: 360px) {
  .top .navrow { gap: 8px; }
  .top .brand { width: 84px; }
  .top .navtools { gap: 6px; }
  .top .navtools :is(.nav-login, .nav-signup) { padding-inline: 10px; font-size: 13px; }
}

@media (max-width: 640px) {
  #announcement .announcement-arrow { background: #fff; color: var(--primary, #003399); }
  .hero-sky {
    background: radial-gradient(ellipse at 12% 25%, #ffffff8c, transparent 43%),
                radial-gradient(ellipse at 92% 50%, #ffffffb3, transparent 52%);
  }
  .hero-sky .cloud-canvas { display: none; }
  .hero:has(.hero-stats) { padding-block: 40px 36px; }
  .hero:has(.hero-stats) h1 { font-size: clamp(30px, 8vw, 42px); margin-bottom: 16px; }
  .hero:has(.hero-stats) .lead { line-height: 1.55; }
  .hero:has(.hero-stats) .actions { margin-top: 24px; }
  .hero .hero-stats { margin-top: 32px; }
  .hero .hero-stats .stat strong { font-size: clamp(21px, 6.8vw, 32px); }
  .hero .hero-stats .stat span { font-size: 12px; line-height: 1.35; }
  .trust { padding-top: 32px; }
  .trust .pmq-rows { gap: 12px; }
  .trust .pmq-set { gap: 12px; }
  .trust .pmq-rows:not(.is-static) .pmq-set { padding-inline-end: 12px; }
  .trust .pmq-set img { width: min(26vw, 108px); object-fit: contain; }
  .tm .tm-stage { touch-action: pan-y pinch-zoom; }
  .pcn .pcn-b { width: 44px; height: 44px; }
  .pcn .pcn-dots { flex-wrap: wrap; justify-content: center; gap: 0; }
  .pcn .pcn-d {
    display: grid;
    place-items: center;
    width: 24px;
    height: 32px;
    background: transparent;
  }
  .pcn .pcn-d::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #a4b4d0; }
  .pcn .pcn-d[aria-current="true"] { width: 24px; background: transparent; }
  .pcn .pcn-d[aria-current="true"]::before { width: 16px; background: var(--ink); }
  .sf .sf-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "brand brand" "program help" "program contact";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 22px 16px;
  }
  .sf .sf-brand { grid-area: brand; }
  .sf .sf-top > nav[aria-label="Program"] { grid-area: program; }
  .sf .sf-top > nav[aria-label="Bantuan"] { grid-area: help; }
  .sf .sf-contact { grid-area: contact; }
  .sf a { overflow-wrap: anywhere; }
  .sf .sf-top h3 { margin-bottom: 8px; }
  .sf :is(.sf-top > nav, .sf-contact) ul { gap: 2px; }
  .sf :is(.sf-top > nav, .sf-contact) li > a { display: inline-flex; align-items: center; min-height: 32px; }
  .sf .sf-top > nav li > a { min-height: 24px; line-height: 1.4; }
  .sf .sf-soc a { display: grid; place-items: center; width: 44px; height: 44px; }
  .sf .sf-bot { margin-top: 24px; padding-top: 16px; gap: 4px 16px; }
  .sf .sf-bot nav { flex-wrap: wrap; gap: 0 16px; }
  .sf .sf-bot a { display: inline-flex; align-items: center; min-height: 36px; }

  #pg .pg-body.wrap { width: calc(100% - 32px); }
  #pg .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #pg .card .cv { aspect-ratio: 2 / 1; }
  #pg .card .bd { padding: 16px; }
  #pg .card .bd h3 { margin-bottom: 12px; }
  #pg .chips { margin-bottom: 16px; }
  #pg .bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
  #pg .bar .sr { grid-column: 1 / -1; }
  #pg .bar .sr input, #bt .sr input { font-size: 16px; }
  #pg .bar .fb { order: 0; padding-inline: 12px; }
  #pg .bar .srt { order: 1; min-width: 0; }
  #pg .srt-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #pg .srt details { width: 100%; }
  #pg .srt-b { min-width: 0; width: 100%; padding-inline: 12px; text-align: left; }

  .detail-content .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-content .hero .cover { min-width: 0; min-height: 0; width: 100%; }
  .detail-content .hero .title { font-size: clamp(28px, 8vw, 38px); }
  .detail-content .hero .btn, .comparison .pick { min-height: 44px; }
  .comparison .switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .comparison .switch button { min-height: 44px; padding-inline: 4px; }
  .comparison .pc li { font-size: 14px; }

  #bt .bt-hero { padding-block: 36px 28px; }
  #bt .bt-hero h1 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 20px; }
  #bt .bt-cards { gap: 12px; }
  #bt .bt-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 16px;
  }
  #bt .bt-ct p { max-width: none; }
  #bt .bt-cn { grid-column: 1; margin-top: 10px; }
  #bt .bt-cn::after { opacity: 1; transform: none; }
  #bt .bt-ico { position: static; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 48px; height: 48px; }
  #bt .bt-ico svg, #bt .bt-ico img { width: 30px; height: 30px; }
}

@media (max-width: 640px) and (max-height: 640px) {
  .hero:has(.hero-stats) { padding-block: 28px 28px; }
  .hero .hero-stats { margin-top: 24px; }
}