/* =====================================================================
   SI PATRIOT DAMPAK — presentation layer
   ---------------------------------------------------------------------
   Third build. The first was a catalogue. The second fixed density but
   still started the story too late: the reader met "perubahan dimulai
   dari cara kerja" before ever seeing which way of working was the
   problem, so the solution appeared out of nowhere.

   This build adds the missing first act and rebuilds the two sections
   that read as tables: Luaran becomes an explorable feature, and the
   causal section becomes a path instead of three columns.

   Dampak is deliberately the longest page on the site. Its scope merges
   what used to be Solusi, Luaran, Dampak and part of Profil. The length
   comes from the story developing, not from more cards.

   Every number is a TARGET from the proposal. Nothing is a claim of
   achievement.
   ===================================================================== */

.dp {
  --pos: #2E7D32;
  --pos-soft: rgba(46,125,50,.10);
  --warn: #8A5200;
  --warn-soft: rgba(178,106,0,.10);
  --sage: #EEF1EA;
  --sand: #F3F0E8;
  --sky-1: #CFE0EC;
  --sky-2: #E7EFE9;
  --panel: #FFFFFF;
  --ink-panel: #16281A;
  background: var(--warm-white);
}


/* ---------- Inline icons ----------
   Replaces the Tabler webfont. The font came from a third party CDN and a
   failed request degraded every glyph to .notdef, which renders as an
   empty box. These carry no network dependency, inherit currentColor, and
   scale with the surrounding text by default. */
.ic {
  width: 1em; height: 1em; flex-shrink: 0;
  display: inline-block; vertical-align: -0.145em;
}
/* Buttons size their arrow relative to the label rather than inheriting a
   stray font-size from a parent. */
.btn-primary .ic, .btn-ghost .ic, .dp-more .ic, .dp-read__go .ic { width: 15px; height: 15px; }

.dp-wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.dp-sec { padding-block: clamp(60px, 7.5vw, 104px); }
.dp-eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.web .dp-h2 {
  margin-top: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.14;
  letter-spacing: -0.025em; color: var(--ink); max-width: 19ch; text-wrap: balance;
}
.web .dp-lead { margin-top: 14px; max-width: 52ch; font-size: var(--text-lead); line-height: 1.68; color: var(--ink-soft); }

/* =====================================================================
   01 HERO
   The oversized DAMPAK word is gone. It had grown into a second headline
   competing with the real one. Depth now comes from layering instead:
   sky beyond the shell, a landscape with a horizon, a gradient that
   deepens toward the copy, and translucent panels sitting on the image.
   ===================================================================== */
.dp-hero {
  padding: clamp(14px, 2vw, 26px) var(--gutter) clamp(28px, 4vw, 52px);
  background: linear-gradient(180deg, var(--sky-1) 0%, #DCE8EC 44%, var(--sky-2) 80%, var(--warm-white) 100%);
}
.dp-hero__shell {
  position: relative; overflow: hidden;
  border-radius: clamp(20px, 2.6vw, 34px);
  max-width: var(--container); margin-inline: auto;
  min-height: clamp(540px, 60vw, 680px);
  display: flex; align-items: flex-end;
  background: var(--ink-panel);
  box-shadow: 0 30px 80px rgba(20,40,26,.22);
}
.dp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.dp-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,22,14,.10) 0%, rgba(12,22,14,.18) 34%, rgba(12,22,14,.66) 74%, rgba(12,22,14,.9) 100%);
}
.dp-hero__grid {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 3vw, 48px); align-items: end;
  padding: clamp(26px, 3.4vw, 48px);
}
.dp-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill); padding: 6px 14px; backdrop-filter: blur(6px);
}
.web .dp-hero__title {
  margin-top: 18px; max-width: 14ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3.1vw, 4rem); line-height: 1.03;
  letter-spacing: -0.038em; color: #fff; text-wrap: balance;
}
.web .dp-hero__sub { margin-top: 16px; max-width: 44ch; font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,.86); }
.dp-hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.dp-proof { display: grid; gap: 10px; }
.dp-proof__label { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.dp-proof__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dp-proof__item {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius-md); padding: 14px 12px; backdrop-filter: blur(10px);
}
.dp-proof__val { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.dp-proof__cap { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.78); }

/* =====================================================================
   02 MASALAH — the act that was missing
   Documentary composition: one large image carrying the situation, then
   four problems each stated with the consequence that follows from it.
   Not a card grid: the consequence is what makes it a problem.
   ===================================================================== */
.dp-problem { background: var(--sand); }
.dp-problem__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.dp-problem__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--sage); }
.dp-problem__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-issues { margin-top: clamp(34px, 4vw, 58px); display: grid; gap: 0; }
.dp-issue {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 36px); align-items: start;
  padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--line);
}
.dp-issue:last-child { border-bottom: 1px solid var(--line); }
.dp-issue__n { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 3px; }
.web .dp-issue__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.32; color: var(--ink); }
.web .dp-issue__d { margin-top: 8px; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.dp-issue__so { display: flex; gap: 10px; padding-top: 3px; }
.dp-issue__so .ic { color: var(--warn); width: 17px; height: 17px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.web .dp-issue__so p { font-size: 14px; line-height: 1.62; color: var(--ink); }
.dp-issue__so b { font-family: var(--font-display); font-weight: 700; display: block; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }

/* =====================================================================
   03 SOLUSI — answers the question the problem section just raised
   ===================================================================== */
.dp-split { margin-top: clamp(30px, 3.6vw, 48px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 3.2vw, 52px); align-items: center; }
.dp-split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; background: var(--sage); }
.dp-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-lead-in { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.web .dp-split__t { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }
.web .dp-split__d { margin-top: 14px; max-width: 48ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.dp-support { margin-top: clamp(28px, 3.2vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.dp-support__item { padding-top: 18px; border-top: 2px solid var(--line); transition: border-top-color var(--dur-fast) var(--ease-out); }
.dp-support__item:hover { border-top-color: var(--primary); }
.dp-support__item .ic { width: 21px; height: 21px; color: var(--primary); }
.web .dp-support__t { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.web .dp-support__d { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* =====================================================================
   04 LUARAN — explorable feature, not a catalogue
   One large stage whose image and copy change with the selected output.
   Every panel stays in the DOM and the first is open by default, so the
   content is fully readable without ever touching the control.
   ===================================================================== */
.dp-out { margin-top: clamp(30px, 3.6vw, 48px); }
.dp-out__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-out__tab {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 17px; cursor: pointer; min-height: 40px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dp-out__tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.dp-out__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.dp-out__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.dp-out__stage { margin-top: clamp(20px, 2.4vw, 30px); }
.dp-out__panel { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(24px, 3.2vw, 52px); align-items: center; }
.dp-out__panel[hidden] { display: none; }
.dp-out__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--sage); }
.dp-out__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-out__badge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-on-dark); background: rgba(16,40,26,.74);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-pill); padding: 5px 11px;
  backdrop-filter: blur(4px);
}
.web .dp-out__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); max-width: 17ch; }
.web .dp-out__d { margin-top: 14px; max-width: 46ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.dp-out__facts { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.dp-out__facts li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.dp-out__facts .ic { color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; align-self: flex-start; margin-top: 1px; }
.dp-more { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--primary-deep); text-decoration: none; border-bottom: 1px solid rgba(27,94,32,.3); padding-bottom: 2px; }
.dp-more:hover { border-bottom-color: var(--primary-deep); }

/* =====================================================================
   05 PATHWAY — causality read top to bottom, not three table columns
   Each stage sits on a vertical spine, so the eye follows the sequence
   rather than scanning a row.
   ===================================================================== */
.dp-path-sec { background: var(--ink-panel); color: #fff; }
.dp-path-sec .dp-eyebrow { color: rgba(255,255,255,.55); }
.web .dp-path-sec .dp-h2 { color: #fff; }
.web .dp-path-sec .dp-lead { color: rgba(255,255,255,.74); }
.dp-paths { margin-top: clamp(34px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.dp-track {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 28px);
}
.dp-track__head { display: flex; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.dp-track__head .ic { width: 22px; height: 22px; color: #A8DDA8; flex-shrink: 0; }
.web .dp-track__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; }
.dp-steps { margin-top: 20px; display: grid; gap: 0; }
.dp-step { position: relative; padding-left: 26px; padding-bottom: 22px; }
.dp-step:last-child { padding-bottom: 0; }
/* The spine and its node. This is what makes the sequence read as a
   consequence chain instead of a list. */
.dp-step::before {
  content: ''; position: absolute; left: 5px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: #A8DDA8;
}
.dp-step:not(:last-child)::after {
  content: ''; position: absolute; left: 8px; top: 15px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,.22);
  transform: scaleY(0); transform-origin: top;
  transition: transform 620ms var(--ease-out) 140ms;
}
.dp-track.is-in .dp-step:not(:last-child)::after { transform: scaleY(1); }
.dp-step__k { font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.web .dp-step__d { margin-top: 7px; font-size: 13.5px; line-height: 1.58; color: rgba(255,255,255,.84); }
.dp-step:last-child .dp-step__k { color: #A8DDA8; }
.dp-path-sec__note { margin-top: clamp(26px, 3vw, 38px); display: flex; gap: 11px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); }
.dp-path-sec__note .ic { color: rgba(255,255,255,.4); width: 17px; height: 17px; flex-shrink: 0; align-self: flex-start; margin-top: 1px; }

/* =====================================================================
   06 HUMAN
   ===================================================================== */
.dp-human__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 3.6vw, 60px); align-items: center; }
.dp-human__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--sage); }
.dp-human__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.web .dp-human__t { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.16; letter-spacing: -0.024em; color: var(--ink); max-width: 17ch; }
.web .dp-human__d { margin-top: 16px; max-width: 46ch; font-size: 15px; line-height: 1.72; color: var(--ink-soft); }
.dp-human__facts { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.dp-human__fact { padding-top: 14px; border-top: 1px solid var(--line); }
.dp-human__fact b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.web .dp-human__fact span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* =====================================================================
   07 TARGET — evidence, not a dashboard
   ===================================================================== */
.dp-target-grid { margin-top: clamp(30px, 3.6vw, 48px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.dp-target--lead {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3.2vw, 42px); display: flex; flex-direction: column; justify-content: center;
}
.dp-badge {
  align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warn);
  background: var(--warn-soft); border-radius: var(--radius-pill); padding: 4px 9px;
}
.dp-target__val {
  margin-top: 18px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 2.2rem + 4vw, 5.4rem); line-height: .88;
  letter-spacing: -0.045em; color: var(--primary-deep); font-variant-numeric: tabular-nums;
}
.web .dp-target__d { margin-top: 18px; max-width: 32ch; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.dp-target-side { display: grid; gap: clamp(10px, 1.2vw, 14px); }
.dp-target__min {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 19px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.dp-target__min:hover { border-color: rgba(20,21,15,.16); }
.dp-target__minval { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); line-height: 1; color: var(--primary-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.web .dp-target__mind { font-size: 13px; line-height: 1.52; color: var(--ink-soft); }
.dp-note {
  margin-top: clamp(20px, 2.4vw, 28px); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
}
.web .dp-note__t { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.web .dp-note__d { margin-top: 8px; max-width: 74ch; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* =====================================================================
   08 ARTIKEL bridge — the depth layer, kept to three
   ===================================================================== */
.dp-read { background: var(--sage); }
.dp-read__grid { margin-top: clamp(28px, 3.2vw, 42px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.dp-read__card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 26px); text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dp-read__card:hover { border-color: rgba(20,21,15,.16); transform: translateY(-2px); }
.dp-read__k { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--primary); }
.web .dp-read__t { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.32; color: var(--ink); }
.web .dp-read__d { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.dp-read__go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--primary-deep); }

/* =====================================================================
   09 CLOSING
   ===================================================================== */
.dp-close { position: relative; padding: clamp(64px, 8vw, 104px) 0 clamp(24px, 3vw, 40px); overflow: hidden; background: var(--ink-panel); }
.dp-close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-close__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,14,.76) 0%, rgba(12,22,14,.58) 42%, rgba(12,22,14,.72) 100%); }
.dp-close__msg { position: relative; z-index: 2; text-align: center; }
.web .dp-close__title {
  margin-inline: auto; max-width: 22ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem); line-height: 1.16;
  letter-spacing: -0.022em; color: #fff; text-wrap: balance;
}
.dp-close__facts { margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.dp-close__facts span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill); padding: 5px 13px; }
.dp-close__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dp-close .ph-panel { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px); }

/* =====================================================================
   MOTION
   Transform only. Opacity is never animated: a stalled transition leaves
   real content invisible while it still occupies layout and takes clicks.
   Learned three times on this site already.
   ===================================================================== */
.dp-reveal { transform: translateY(10px); }
.dp-reveal.is-in { transform: none; transition: transform 480ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .dp-reveal, .dp-reveal.is-in { transform: none; transition: none; }
  .dp-step:not(:last-child)::after,
  .dp-track.is-in .dp-step:not(:last-child)::after { transform: scaleY(1); transition: none; }
}

/* =====================================================================
   RESPONSIVE — recomposition, not shrinking
   ===================================================================== */
@media (max-width: 1024px) {
  .dp-hero__grid { grid-template-columns: 1fr; align-items: start; gap: 30px; }
  .dp-problem__top, .dp-split, .dp-out__panel, .dp-human__grid { grid-template-columns: 1fr; }
  .dp-problem__media, .dp-split__media, .dp-out__media { order: -1; aspect-ratio: 16/9; }
  .dp-human__media { aspect-ratio: 16/9; }
  .dp-paths { grid-template-columns: 1fr; }
  .dp-target-grid { grid-template-columns: 1fr; }
  .dp-read__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .dp-hero__shell { min-height: clamp(480px, 94vw, 600px); }
  /* Problem, consequence and number stack rather than sitting in three
     narrow columns that would break the sentence rhythm. */
  .dp-issue { grid-template-columns: 32px 1fr; gap: 12px 14px; }
  .dp-issue__so { grid-column: 2; padding-top: 12px; }
  .dp-support { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .dp-support, .dp-human__facts { grid-template-columns: 1fr; }
  .dp-hero__cta, .dp-close__actions { flex-direction: column; align-items: stretch; }
  .dp-hero__cta > a, .dp-close__actions > a { justify-content: center; }
  .dp-proof__row { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
  .dp-proof__item { padding: 11px 9px; }
  .dp-proof__cap { font-size: 10.5px; }
  .dp-target__min { grid-template-columns: 1fr; gap: 7px; }
  .dp-out__tabs { gap: 6px; }
  .dp-out__tab { font-size: 12.5px; padding: 9px 14px; }
}

/* =====================================================================
   MOBILE PASS — Dampak
   =====================================================================
   Audited at 320/360/390px against the live page. Three real defects,
   all fixed below without touching the desktop layout or the visual
   identity. */
@media (max-width: 767px) {
  /* 1. The outcome tabs wrapped onto two rows at 320px, which reads as a
        broken grid rather than a tab bar and moved the active pill away
        from the panel it controls. They become one horizontally scrolled
        row instead: an explicit mobile pattern, at full size, rather than
        shrinking the type until four labels squeeze onto one line. */
  .dp-out__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the gutter edges so the row visibly runs off-screen and
       reads as scrollable, instead of stopping short like a wrapped list. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 2px;
  }
  .dp-out__tabs::-webkit-scrollbar { display: none; }
  .dp-out__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* 40px was under the 44px minimum. */
    min-height: 44px;
    font-size: 13px;
    padding: 10px 16px;
  }

  /* 2. Tap targets measured below 44px. */
  .dp-more {
    min-height: 44px;
    padding-block: 10px 6px;
  }

}

/* The hero filled 97% of the viewport at 320px, so the page opened with
   nothing but the header visible and no hint that content followed.
   Trimming the vertical padding and the display type brings the first
   section into view without changing the composition. */
@media (max-width: 640px) {
  .dp-hero { padding-block: 10px 18px; }
  .dp-hero__shell { padding-block: 20px; }
  /* The display size is set for desktop width. At 320px it wrapped to four
     lines and, with the sub-copy and CTAs below it, pushed the first
     section entirely off-screen. 28px is still a display heading here, not
     body text. */
  .web .dp-hero__title { font-size: 28px; line-height: 1.1; margin-top: 12px; }
  .web .dp-hero__sub { margin-top: 12px; font-size: 15px; }
  .dp-hero__cta { margin-top: 14px; }
  .dp-hero__grid { gap: 18px; }
  .dp-proof__row { margin-top: 12px; }
}


/* Touch targets extend to tablet width for the same reason as the shared
   chrome: 768-1024px is a finger, not a mouse. Kept separate from the
   767px layout block above so the scrolling tab row stays phone-only. */
@media (max-width: 1024px) {
  .dp-hero__cta > a,
  .dp-close__actions > a,
  .dp-out__tab { min-height: 44px; }
  .dp-more { min-height: 44px; padding-block: 10px 6px; }

  /* Labels at 9px are below what most people read comfortably at arm's
     length, and a tablet is held at arm's length too. Raised to 11px,
     which keeps the eyebrow hierarchy (they stay smaller than body text)
     without turning them into decoration. */
  .dp-step__k,
  .dp-badge,
  .dp-proof__label,
  .dp-out__badge { font-size: 11px; }
  .dp-eyebrow,
  .dp-lead-in,
  .dp-proof__cap,
  .dp-read__k { font-size: 11.5px; }
  /* The "Akibatnya" lead-in inside each consequence block was 10px. */
  .dp-issue__so b { font-size: 11.5px; }
}