/* Halaman depan A2 · Bingkai Penuh v2. Anatomi: docs/HANDOFF-2026-09-23-HOME-A2.md bagian 2.
   Nilai tanpa token = nilai prototipe docs/design/home-a2, dideklarasikan sekali di sini (izin
   owner 23 Sep 2026). Warna hanya token. Mobile-first, satu breakpoint: 1024 px. */
:root[data-page="landing"] {
  /* kerangka */
  --home-a2-header-h: 64px;
  --home-a2-gutter: var(--space-6);
  --home-a2-col-gap: var(--space-6);
  --home-a2-focus-ring: 2px;
  --home-a2-focus-offset: 3px;
  --home-a2-serif: Georgia, 'Times New Roman', serif;  /* sama dengan --ae-serif di album-experience.css */
  --home-a2-mono-sm: 12px;
  --home-a2-lh-kicker: 1.4;
  --home-a2-lh-mono: 1.3;

  /* header */
  --home-a2-header-gap: var(--space-5);
  --home-a2-brand-gap: 10px;
  --home-a2-mark: 28px;
  --home-a2-logo-max: 190px;
  --home-a2-name-size: var(--text-h2);
  --home-a2-by-size: 8.5px;
  --home-a2-nav-gap: var(--space-2);
  --home-a2-signin-pad: 18px;

  /* hero */
  /* HP/tablet: foto memenuhi layar, panel file di dalam foto. svh = tinggi stabil saat bar browser muncul/hilang. */
  --home-a2-hero-h: 100svh;
  --home-a2-hero-head-gap: 14px;
  --home-a2-hero-head-top: 28px;
  --home-a2-hero-top: clamp(var(--space-10), 5vw, var(--space-13));
  --home-a2-kicker-gap: clamp(var(--space-6), 2vw, var(--space-8));
  --home-a2-h1-size: 39px;
  --home-a2-h1-weight: var(--fw-semibold);
  --home-a2-h1-lh: .96;
  --home-a2-h1-ls: -.03em;
  --home-a2-aside-gap: var(--space-7);
  --home-a2-lede-size: var(--text-md);
  --home-a2-lede-lh: var(--lh-normal);
  --home-a2-cta-h: 56px;
  --home-a2-cta-pad: 28px;
  --home-a2-cta-row-gap: 14px;
  --home-a2-note-size: var(--text-sm);

  /* panel viewer */
  --home-a2-panel-pad: 10px;
  --home-a2-panel-pad-start: 14px;
  --home-a2-viewer-gap: var(--space-4);
  --home-a2-viewer-file-gap: 10px;
  --home-a2-viewer-size: var(--home-a2-mono-sm);
  --home-a2-viewer-ls: .02em;
  --home-a2-chip-h: var(--field-h);
  --home-a2-chip-pad: var(--space-5);
  --home-a2-chip-size: var(--text-sm);

  /* judul dan isi section */
  --home-a2-h2-size: var(--text-h1);
  --home-a2-h2-lh: 1.06;
  --home-a2-h2-ls: -.025em;
  --home-a2-body-size: var(--text-md);
  --home-a2-body-lh: 1.6;
  --home-a2-stack-h2: var(--space-5);
  --home-a2-stack-body: var(--space-6);
  --home-a2-stack-body-drive: var(--space-6);
  --home-a2-stack-p: var(--space-4);
  --home-a2-stack-cta: 28px;
  --home-a2-section-top: var(--space-13);

  /* Client Selection */
  --home-a2-select-top: 88px;
  --home-a2-select-gap: 36px;
  --home-a2-steps-top: 0;
  --home-a2-step-num-w: 22px;
  --home-a2-step-gap: 18px;
  --home-a2-step-pad: var(--space-6);
  --home-a2-step-num-top: 3px;
  --home-a2-step-num-size: var(--home-a2-mono-sm);
  --home-a2-step-size: var(--text-md);
  --home-a2-step-lh: var(--lh-normal);

  /* Three ways to view */
  --home-a2-modes-gap: var(--space-10);
  --home-a2-fig-gap: 18px;
  --home-a2-caption-gap: 6px;
  --home-a2-h3-size: 22px;
  --home-a2-h3-lh: 1.15;
  --home-a2-mode-text-size: var(--text-md);
  --home-a2-mode-text-lh: 1.55;
  --home-a2-grid-gap: var(--space-4);
  --home-a2-grid-pad: var(--space-5);
  --home-a2-grid-title-size: var(--text-sm);
  --home-a2-grid-lh: 1.2;
  --home-a2-mosaic-gap: 5px;
  --home-a2-mag-gap: 5px;
  --home-a2-mag-title-size: 12px;
  --home-a2-mag-title-lh: 1.15;
  --home-a2-story-top: 0;
  --home-a2-story-gap: 10px;
  --home-a2-story-frame: 188px;
  --home-a2-story-card-gap: var(--space-3);
  --home-a2-story-caption-size: var(--text-2xs);
  --home-a2-story-action-pad: var(--space-4);
  --home-a2-progress-h: 3px;

  /* From your Drive */
  --home-a2-drive-photo-gap: 56px;
  --home-a2-drive-photo-h: 420px;

  /* footer */
  --home-a2-footer-gap: var(--space-4);
  --home-a2-footer-pad-top: var(--space-7);
  --home-a2-footer-pad-bottom: 28px;
  --home-a2-footer-size: 12px;
  --home-a2-footer-lh: 1.45;
}

@media (min-width: 1024px) {
  :root[data-page="landing"] {
    --home-a2-header-h: clamp(76px, 6.4vw, 104px);
    --home-a2-gutter: clamp(var(--space-9), 7vw, var(--space-14));
    --home-a2-col-gap: clamp(var(--space-6), 2vw, 36px);

    --home-a2-header-gap: var(--space-8);
    --home-a2-brand-gap: var(--space-4);
    --home-a2-mark: var(--space-8);
    --home-a2-name-size: 22px;
    --home-a2-by-size: 9.5px;
    --home-a2-nav-gap: clamp(var(--space-2), .8vw, var(--space-5));
    --home-a2-signin-pad: var(--space-6);

    /* Desktop layar penuh, panel file di dalam foto; 560 px = batas bawah lama untuk jendela pendek. */
    --home-a2-hero-h: max(560px, 100svh);  /* 560 px = batas bawah lama untuk jendela pendek */
    --home-a2-h1-size: clamp(50px, 5.2vw, 108px);
    --home-a2-aside-gap: clamp(var(--space-7), 2.2vw, 36px);
    --home-a2-lede-size: clamp(17px, 1.3vw, 21px);
    --home-a2-lede-lh: 1.55;
    --home-a2-lede-w: 22.6875rem;  /* 363 px pada root 16 px; width, bukan max-width (bagian 2.5) */
    --home-a2-note-size: var(--text-h4);

    --home-a2-panel-pad: clamp(var(--space-6), 1.4vw, 28px);
    --home-a2-panel-pad-start: clamp(var(--space-7), 1.7vw, var(--space-8));
    --home-a2-viewer-gap: clamp(36px, 3vw, 56px);
    --home-a2-viewer-file-gap: var(--space-5);
    --home-a2-viewer-size: clamp(var(--text-xs), .85vw, var(--text-md));
    --home-a2-viewer-ls: .04em;
    --home-a2-chip-h: clamp(var(--field-h), 3.2vw, 56px);
    --home-a2-chip-pad: clamp(var(--space-6), 1.5vw, 28px);
    --home-a2-chip-size: clamp(var(--text-sm), .95vw, 17px);

    --home-a2-h2-size: clamp(38px, 3.9vw, 68px);
    --home-a2-h2-lh: var(--lh-tight);
    --home-a2-body-size: clamp(var(--text-md), 1.2vw, 19px);
    --home-a2-stack-h2: var(--space-7);
    --home-a2-stack-body: var(--space-8);
    --home-a2-stack-body-drive: 28px;
    --home-a2-stack-p: 14px;
    --home-a2-stack-cta: 36px;
    --home-a2-section-top: clamp(136px, 12.5vw, 220px);

    --home-a2-select-top: clamp(112px, 11vw, 200px);
    --home-a2-steps-top: clamp(var(--space-9), 3.6vw, 56px);
    --home-a2-step-num-w: 28px;
    --home-a2-step-gap: clamp(var(--space-6), 2vw, var(--space-8));
    --home-a2-step-pad: clamp(var(--space-7), 2.2vw, 34px);
    --home-a2-step-num-top: .35em;
    --home-a2-step-num-size: var(--text-xs);
    --home-a2-step-size: clamp(var(--text-md), 1.45vw, 23px);
    --home-a2-step-lh: 1.42;

    --home-a2-modes-gap: clamp(var(--space-11), 6.5vw, 112px);
    --home-a2-fig-gap: 28px;
    --home-a2-caption-gap: var(--space-3);
    --home-a2-h3-size: clamp(22px, 1.8vw, 30px);
    --home-a2-mode-text-size: clamp(var(--text-md), 1.15vw, var(--text-lg));
    --home-a2-grid-gap: clamp(var(--space-4), 1.2vw, var(--space-6));
    --home-a2-grid-pad: clamp(18px, 1.8vw, var(--space-8));
    --home-a2-grid-title-size: clamp(var(--text-sm), 1.1vw, 17px);
    --home-a2-mosaic-gap: 6px;
    --home-a2-mag-gap: clamp(6px, .8vw, var(--space-4));
    --home-a2-mag-title-size: clamp(var(--text-xs), 1.25vw, 22px);
    --home-a2-story-top: clamp(0px, 2vw, var(--space-9));
    --home-a2-story-gap: clamp(10px, 1vw, var(--space-5));
    --home-a2-story-frame: 40%;
    --home-a2-story-card-gap: clamp(6px, .8vw, var(--space-4));
    --home-a2-story-caption-size: clamp(var(--text-2xs), .9vw, 15px);
    --home-a2-story-action-pad: 14px;

    --home-a2-footer-gap: 14px;
    --home-a2-footer-pad-top: clamp(28px, 2.6vw, var(--space-9));
    --home-a2-footer-pad-bottom: clamp(28px, 2.6vw, var(--space-9));
    --home-a2-footer-size: var(--text-sm);
    --home-a2-footer-lh: 1.4;
  }
}

/* ---- kerangka ---- */
.page-main > .home-a2 { max-width: none; margin-inline: 0; }  /* app.css .page-main > * memotong di 1360 px */
.home-a2 {
  overflow-x: clip;
  background: var(--vs-white);
  color: var(--vs-black);
}
:where(.home-a2) figure { margin: 0; }
.home-a2 strong { font-weight: var(--fw-semibold); }
.home-a2-cover,
.home-a2-grid__img,
.home-a2-story__img {
  object-fit: cover;
  object-position: var(--home-a2-pos, 50% 50%);
}
/* Cincin bawaan base.css hampir tak terlihat di atas foto. */
.home-a2-header a:focus-visible,
.home-a2 a:focus-visible {
  outline: var(--home-a2-focus-ring) solid var(--vs-black);
  outline-offset: var(--home-a2-focus-offset);
  box-shadow: none;
}

/* ---- header (di atas foto hero, tidak sticky) ---- */
.home-a2-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--home-a2-header-gap);
  height: var(--home-a2-header-h);
  padding-inline: var(--home-a2-gutter);
  color: var(--vs-black);
}
.home-a2-brand {
  display: flex;
  align-items: center;
  gap: var(--home-a2-brand-gap);
  min-height: var(--field-h);
  color: var(--vs-black);
}
.home-a2-brand__mark {
  width: var(--home-a2-mark);
  height: var(--home-a2-mark);
}
.home-a2-brand__logo {
  height: var(--home-a2-mark);
  width: auto;
  max-width: var(--home-a2-logo-max);
  object-fit: contain;
}
.home-a2-brand__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-a2-brand__name {
  font-weight: var(--fw-bold);
  font-size: var(--home-a2-name-size);
  line-height: 1;
}
/* span, bukan <small>: font-size smaller bawaan UA dan line-height induk tidak ikut. */
.home-a2-brand__by {
  font-weight: var(--fw-semibold);
  font-size: var(--home-a2-by-size);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.home-a2-nav {
  display: flex;
  align-items: center;
  gap: var(--home-a2-nav-gap);
}
.home-a2-nav__link { display: none; }
.vs-btn.home-a2-signin {
  min-height: var(--field-h);
  padding: 0 var(--home-a2-signin-pad);
  border: 1px solid var(--vs-black);
  border-radius: var(--radius-xs);
  background: var(--vs-white);
  color: var(--vs-black);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
}
.vs-btn.home-a2-signin:hover { background: var(--surface-1); }

/* ---- teks bersama ---- */
.home-a2-kicker {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--home-a2-mono-sm);
  line-height: var(--home-a2-lh-kicker);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.home-a2-kicker--ink { color: var(--vs-black); }
.home-a2-h2 {
  margin-top: var(--home-a2-stack-h2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--home-a2-h2-size);
  line-height: var(--home-a2-h2-lh);
  letter-spacing: var(--home-a2-h2-ls);
  color: var(--vs-black);
}
.home-a2-h2__muted { color: var(--text-muted); }
.home-a2-body {
  max-width: 30em;
  font-size: var(--home-a2-body-size);
  line-height: var(--home-a2-body-lh);
  color: var(--text-muted);
}
.home-a2-h2 + .home-a2-body { margin-top: var(--home-a2-stack-body); }
.home-a2-body + .home-a2-body { margin-top: var(--home-a2-stack-p); }
.home-a2-body--balance { text-wrap: balance; }
.home-a2-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--home-a2-h3-size);
  line-height: var(--home-a2-h3-lh);
  letter-spacing: var(--ls-normal);
  color: var(--vs-black);
}
.home-a2-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vs-btn.home-a2-cta {
  min-height: var(--home-a2-cta-h);
  padding-inline: var(--home-a2-cta-pad);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.home-a2-note {
  font-size: var(--home-a2-note-size);
  font-style: italic;
  line-height: var(--home-a2-lh-kicker);
  text-align: center;
  color: var(--text-muted);
}

/* ---- hero: satu DOM, dua susunan (HP: foto, panel, teks; desktop: teks di atas foto) ---- */
.home-a2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "aside";
  margin-top: calc(-1 * var(--home-a2-header-h));
}
.home-a2-hero__photo {
  grid-area: photo;
  height: var(--home-a2-hero-h);
  background: var(--line-100);
}
.home-a2-hero__img {
  width: 100%;
  height: 100%;
}
.home-a2-hero__copy { display: contents; }
.home-a2-hero__head {
  grid-area: photo;
  align-self: start;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-hero-head-gap);
  padding: calc(var(--home-a2-header-h) + var(--home-a2-hero-head-top)) var(--home-a2-gutter) 0;
}
.home-a2-hero__title {
  font-family: var(--font-display);
  font-weight: var(--home-a2-h1-weight);
  font-size: var(--home-a2-h1-size);
  line-height: var(--home-a2-h1-lh);
  letter-spacing: var(--home-a2-h1-ls);
  color: var(--vs-black);
}
.home-a2-hero__aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-aside-gap);
  padding: var(--space-7) var(--home-a2-gutter) 0;
}
.home-a2-hero__lede {
  max-width: 30em;
  font-size: var(--home-a2-lede-size);
  line-height: var(--home-a2-lede-lh);
  color: var(--vs-black);
}
/* Tepi bawah foto membelah panel tepat di tengah tinggi chip. */
/* Di dalam foto, bawah; jarak ke tepi bawah layar = gutter + area aman (home indicator iPhone). */
.home-a2-viewer {
  grid-area: photo;
  align-self: end;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--home-a2-viewer-gap);
  margin: 0 var(--home-a2-gutter) calc(var(--home-a2-gutter) + env(safe-area-inset-bottom));
  padding: var(--home-a2-panel-pad) var(--home-a2-panel-pad) var(--home-a2-panel-pad) var(--home-a2-panel-pad-start);
  background: var(--vs-white);
  border: 1px solid var(--line-200);
}
/* Penghitung turun ke baris kedua di layar sempit (360/375) alih-alih menabrak chip. */
.home-a2-viewer__file {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--home-a2-viewer-file-gap);
  row-gap: var(--space-1);
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--home-a2-viewer-size);
  line-height: var(--home-a2-lh-mono);
  letter-spacing: var(--home-a2-viewer-ls);
}
.home-a2-viewer__name { white-space: nowrap; }
.home-a2-viewer__count { white-space: nowrap; color: var(--text-muted); }
.home-a2-viewer__chips {
  display: flex;
  gap: var(--space-3);
}
.home-a2-viewer__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--home-a2-chip-h);
  padding: 0 var(--home-a2-chip-pad);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-xs);
  background: var(--vs-white);
  font-weight: var(--fw-semibold);
  font-size: var(--home-a2-chip-size);
  line-height: 1;
}
.home-a2-viewer__chip--on {
  border-color: var(--vs-yellow);
  background: var(--vs-yellow);
}
/* Cadangan pita polos di belakang teks hero ($homeHero['band']), hanya dengan izin owner. */
.home-a2-hero--band .home-a2-hero__head {
  padding-bottom: var(--space-7);
  background: var(--vs-white);
}

/* ---- Client Selection ---- */
.home-a2-select {
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-select-gap);
  padding: var(--home-a2-select-top) var(--home-a2-gutter) 0;
}
.home-a2-select__intro {
  display: flex;
  flex-direction: column;
}
.home-a2-steps {
  margin: 0;
  padding: var(--home-a2-steps-top) 0 0;
  list-style: none;
}
.home-a2-steps__item {
  display: grid;
  grid-template-columns: var(--home-a2-step-num-w) minmax(0, 1fr);
  column-gap: var(--home-a2-step-gap);
  padding: var(--home-a2-step-pad) 0;
  border-top: 1px solid var(--line-200);
}
.home-a2-steps__item:last-child { border-bottom: 1px solid var(--line-200); }
.home-a2-steps__num {
  padding-top: var(--home-a2-step-num-top);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--home-a2-step-num-size);
  line-height: var(--home-a2-lh-mono);
  color: var(--text-muted);
}
.home-a2-steps__text {
  font-size: var(--home-a2-step-size);
  line-height: var(--home-a2-step-lh);
  color: var(--vs-black);
}

/* ---- Three ways to view ---- */
.home-a2-modes {
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-modes-gap);
  padding: var(--home-a2-section-top) var(--home-a2-gutter) 0;
}
.home-a2-modes__head {
  display: flex;
  flex-direction: column;
}
.home-a2-modes__pair {
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-modes-gap);
}
.home-a2-mode {
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-fig-gap);
}
.home-a2-mode--magazine,
.home-a2-mode--story { margin-inline: calc(-1 * var(--home-a2-gutter)); }
.home-a2-mode--magazine .home-a2-mode__caption,
.home-a2-mode--story .home-a2-mode__caption { padding-inline: var(--home-a2-gutter); }
.home-a2-mode__caption {
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-caption-gap);
}
.home-a2-mode__kicker { margin-bottom: var(--space-2); }
.home-a2-mode__text {
  font-size: var(--home-a2-mode-text-size);
  line-height: var(--home-a2-mode-text-lh);
  color: var(--text-muted);
}

/* Grid: baris ke-4 sengaja terpotong, kesan album berlanjut. */
.home-a2-grid {
  aspect-ratio: 6 / 7;
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-grid-gap);
  padding: var(--home-a2-grid-pad);
  background: var(--surface-1);
  overflow: hidden;
}
.home-a2-grid__head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-4);
  line-height: var(--home-a2-grid-lh);
}
.home-a2-grid__title {
  font-weight: var(--fw-semibold);
  font-size: var(--home-a2-grid-title-size);
  color: var(--vs-black);
}
.home-a2-grid__count {
  font-family: var(--font-mono);
  font-size: var(--home-a2-mono-sm);
  color: var(--text-muted);
}
.home-a2-grid__rows {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-mosaic-gap);
}
/* flex-grow = rasio foto (1.5 lanskap, 0.667 potret) supaya tiap baris rata kiri-kanan. */
.home-a2-grid__row {
  display: flex;
  gap: var(--home-a2-mosaic-gap);
}
.home-a2-grid__row--a { aspect-ratio: 3.667 / 1; }
.home-a2-grid__row--b,
.home-a2-grid__row--d { aspect-ratio: 2.834 / 1; }
.home-a2-grid__row--c { aspect-ratio: 3 / 1; }
.home-a2-grid__img {
  width: 0;
  min-width: 0;
  height: 100%;
}
.home-a2-grid__img--land { flex: 1.5 1 0; }
.home-a2-grid__img--port { flex: .667 1 0; }

/* Magazine: kesan kertas dari hairline dan beda nada, tanpa bayangan. */
.home-a2-mag {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
}
.home-a2-mag__spread {
  width: 84%;
  aspect-ratio: 3 / 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface-0);
  border: 1px solid var(--line-200);
}
.home-a2-mag__left {
  min-height: 0;
  overflow: hidden;
}
.home-a2-mag__left img,
.home-a2-mag__big img,
.home-a2-mag__pair img {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.home-a2-mag__right {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--home-a2-mag-gap);
  padding: 9%;
  border-left: 1px solid var(--line-200);
}
.home-a2-mag__title {
  flex: none;
  font-family: var(--home-a2-serif);
  font-size: var(--home-a2-mag-title-size);
  line-height: var(--home-a2-mag-title-lh);
  color: var(--vs-black);
}
.home-a2-mag__big {
  flex: 1.15 1 0;
  min-height: 0;
}
.home-a2-mag__pair {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--home-a2-mag-gap);
}

/* Story: meniru layar Story (bilah progres, kartu 9:16, aksi) di panel tinta. */
.home-a2-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-a2-story-gap);
  padding: var(--space-8) 0 var(--space-4);
  background: var(--vs-black);
}
.home-a2-story__frame {
  width: var(--home-a2-story-frame);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-a2-story__progress {
  flex: none;
  display: flex;
  gap: var(--space-2);
  height: var(--home-a2-progress-h);
}
.home-a2-story__seg {
  flex: 1;
  background: var(--text-muted);
}
.home-a2-story__seg--seen { background: var(--vs-white); }
.home-a2-story__card {
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-a2-story-card-gap);
  padding: 12% 16%;
  background: var(--surface-0);
}
.home-a2-story__img {
  flex: none;
  width: 80%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.home-a2-story__caption {
  flex: none;
  margin-top: var(--space-2);
  font-family: var(--home-a2-serif);
  font-style: italic;
  font-size: var(--home-a2-story-caption-size);
  line-height: var(--home-a2-lh-mono);
  white-space: nowrap;
  color: var(--vs-black);
}
.home-a2-story__actions {
  display: flex;
  gap: var(--space-3);
}
.home-a2-story__action {
  display: inline-flex;
  align-items: center;
  height: var(--field-h);
  padding: 0 var(--home-a2-story-action-pad);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--vs-white);
}

/* ---- From your Drive ---- */
.home-a2-drive {
  display: flex;
  flex-direction: column;
  padding: var(--home-a2-section-top) 0 0;
}
.home-a2-drive__text {
  display: flex;
  flex-direction: column;
  padding: 0 var(--home-a2-gutter);
}
.home-a2-drive .home-a2-h2 + .home-a2-body { margin-top: var(--home-a2-stack-body-drive); }
.home-a2-drive__text .home-a2-cta-row { margin-top: var(--home-a2-stack-cta); }
.home-a2-drive__photo {
  margin-top: var(--home-a2-drive-photo-gap);
  height: var(--home-a2-drive-photo-h);
  background: var(--line-100);
}
.home-a2-drive__photo img {
  width: 100%;
  height: 100%;
}

/* ---- footer ---- */
.home-a2-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--home-a2-footer-gap);
  padding: var(--home-a2-footer-pad-top) var(--home-a2-gutter) var(--home-a2-footer-pad-bottom);
  border-top: 1px solid var(--line-200);
  background: var(--vs-white);
}
.home-a2-footer__mark {
  width: var(--space-7);
  height: var(--space-7);
}
.home-a2-footer__text {
  font-size: var(--home-a2-footer-size);
  line-height: var(--home-a2-footer-lh);
  color: var(--text-muted);
}

/* HP/tablet: semua isi hero di dalam foto. Baris: kepala (judul) · teks + CTA · ruang lentur · panel file.
   Hero min 100svh; di layar pendek (HP miring) hero memanjang, isi tidak saling tindih. */
@media (max-width: 1023px) {
  .home-a2-hero { grid-template-areas: none; grid-template-rows: auto auto minmax(var(--space-7), 1fr) auto; min-height: var(--home-a2-hero-h); }
  .home-a2-hero__photo { grid-row: 1 / -1; grid-column: 1; height: auto; }
  .home-a2-hero__head { grid-area: auto; grid-row: 1; grid-column: 1; }
  /* Lebar blok teks = lebar lede (30em), jadi CTA tablet tidak membentang selebar layar. */
  .home-a2-hero__aside { grid-area: auto; grid-row: 2; grid-column: 1; position: relative; max-width: calc(30em + 2 * var(--home-a2-gutter)); }
  .home-a2-viewer { grid-area: auto; grid-row: 4; grid-column: 1; }
  .home-a2-note--hero { color: var(--vs-black); }
}

/* ---- desktop: artboard A2-Desktop mulai 1024 px ---- */
@media (min-width: 1024px) {
  .home-a2-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--field-h);
    padding: 0 var(--space-4);
    font-size: var(--text-h4);
    font-weight: var(--fw-medium);
    color: var(--vs-black);
  }
  .home-a2-nav__link:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
  }
  .vs-btn.home-a2-signin { margin-left: var(--space-4); }

  .home-a2-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--home-a2-cta-row-gap) var(--space-7);
  }
  .home-a2-note { text-align: start; }
  .home-a2-note--hero { color: var(--vs-black); }

  .home-a2-hero { grid-template-areas: "photo"; }
  .home-a2-hero__copy {
    grid-area: photo;
    align-self: start;
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
    align-items: start;
    padding: calc(var(--home-a2-header-h) + var(--home-a2-hero-top)) var(--home-a2-gutter) 0;
  }
  .home-a2-hero__head { display: contents; }
  .home-a2-hero .home-a2-kicker {
    grid-column: 1 / 13;
    grid-row: 1;
    margin-bottom: var(--home-a2-kicker-gap);
  }
  .home-a2-hero__title {
    grid-column: 1 / 8;
    grid-row: 2;
  }
  .home-a2-hero__aside {
    grid-column: 8 / 13;
    grid-row: 2;
    padding: 0;
  }
  .home-a2-hero__lede { width: var(--home-a2-lede-w); }
  /* Panel duduk di dalam foto, kiri bawah, sejajar tepi kiri teks; jarak bawah = jarak atas kicker. */
  .home-a2-viewer {
    grid-area: photo;
    align-self: end;
    justify-self: start;
    grid-template-columns: auto auto;
    margin: 0 0 var(--home-a2-hero-top) var(--home-a2-gutter);
  }
  .home-a2-hero--band .home-a2-hero__copy {
    padding-bottom: var(--home-a2-hero-top);
    background: var(--vs-white);
  }

  .home-a2-select {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
    align-items: start;
  }
  .home-a2-select__intro { grid-column: 1 / 7; }
  .home-a2-steps { grid-column: 8 / 13; }
  /* nowrap hanya di desktop: di 360 teks langkah 03 meluber keluar layar. */
  .home-a2-steps__text { white-space: nowrap; }

  .home-a2-modes__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
  }
  .home-a2-modes__head > * { grid-column: 1 / 8; }
  .home-a2-modes__pair {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
    align-items: end;
  }
  .home-a2-mode--grid { grid-column: 1 / 6; }
  .home-a2-mode--magazine {
    grid-column: 7 / 13;
    margin: 0 calc(-1 * var(--home-a2-gutter)) 0 0;
  }
  .home-a2-mode--magazine .home-a2-mode__caption { padding: 0 var(--home-a2-gutter) 0 0; }
  .home-a2-mag { aspect-ratio: 3 / 2; }
  .home-a2-mag__spread { width: 72%; }
  .home-a2-mode--story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
    align-items: center;
    margin: var(--home-a2-story-top) 0 0;
  }
  .home-a2-story {
    grid-column: 1 / 6;
    margin-left: calc(-1 * var(--home-a2-gutter));
    aspect-ratio: 1 / 1;
    padding: 0;
  }
  .home-a2-mode--story .home-a2-mode__caption {
    grid-column: 7 / 11;
    align-self: end;
    padding: 0;
  }

  .home-a2-drive {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--home-a2-col-gap);
    align-items: center;
    padding: var(--home-a2-section-top) var(--home-a2-gutter) 0;
  }
  .home-a2-drive__text {
    grid-column: 1 / 8;
    align-items: flex-start;
    padding: 0;
  }
  .home-a2-drive__photo {
    grid-column: 8 / 13;
    margin: 0 calc(-1 * var(--home-a2-gutter)) 0 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .home-a2-footer {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }
}