/* ============================================================================
   KLIKA landing page (2026-09-14)
   ============================================================================
   Loaded ONLY on "/". Afif's direction: dark hero, light body -- "humanis tapi
   tetap futuristik, karena lagi lagi ini untuk UMKM".

   The two halves are genuinely different colour systems, and that is the
   point, so the light half declares its own tokens rather than trying to bend
   the app's night palette into daylight. Bending it was the first instinct and
   it produces washed-out navy on grey, which reads as a bug.

   House rules that shaped this file: no coloured side-border lining to mark a
   category, no dark text on dark surfaces, no emoji standing in for icons.
   ============================================================================ */

.landing {
  /* Daylight half, SECOND palette (2026-09-14). The first was warm cream, and
     Afif called the result: "transisi dari biru ke background terang ini masih
     patah banget... dan perbedaan warnanya agak jauh sih, mungkin jangan cream
     kali ya, kaya biru muda dengan aksen 3D gitu".

     He is right on both counts, and they are the same count. Cream and navy
     are opposite temperatures, so no length of gradient could join them --
     every intermediate step is a muddy grey, which is what a seam between two
     hostile hues actually looks like. A pale BLUE is the same family as the
     hero, so the two halves stop being two colours and become one colour at
     two brightnesses. The seam then has almost nothing to travel.

     Every value below is derived from the brand's own navy/royal/turquoise
     rather than picked by eye, which is why the page reads as one thing. */
  --lp-paper: #E7EEFB;
  --lp-paper-2: #FFFFFF;
  --lp-paper-3: #F3F7FE;
  --lp-ink: #081234;
  --lp-ink-2: #3F4D7A;
  --lp-ink-3: #68749C;
  --lp-line: #CFDBF3;
  --lp-accent: #0020D4;
  --lp-accent-soft: #DEE6FF;
  --lp-warm: #0A6E9E;
  --lp-warm-soft: #DAF0FA;

  /* Depth, the "aksen 3D" half of the same note. Three layered shadows rather
     than one: a tight contact shadow so a card looks seated, a mid shadow for
     body, and a wide tinted one so the light half has air under it. Tinted
     BLUE, never grey -- a grey shadow on a blue page is what makes a light
     section look like a screenshot pasted onto the page. */
  --lp-lift-1:
    0 1px 2px rgba(8, 18, 52, 0.05),
    0 6px 16px rgba(8, 18, 52, 0.06),
    0 18px 48px rgba(0, 32, 212, 0.07);
  --lp-lift-2:
    0 2px 4px rgba(8, 18, 52, 0.06),
    0 12px 28px rgba(8, 18, 52, 0.09),
    0 34px 80px rgba(0, 32, 212, 0.12);

  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* The page's one measure. Restored 2026-09-14 after a careless edit: swapping
   the colour tokens by replacing everything between two anchors quietly took
   this rule with it, and BOTH halves went full-bleed -- headings flush to the
   window edge, the third card sliced off. Nothing errored; the declaration
   simply stopped existing.

   Lesson worth keeping: replacing a RANGE of CSS between two markers deletes
   whatever else lived in that range. Replace declarations, not regions. */
.landing .lp-inner {
  width: min(1180px, 100% - 2 * var(--space-6));
  margin-inline: auto;
}

/* ---------- HERO (night) -------------------------------------------------- */

.lp-hero {
  position: relative;
  padding: clamp(var(--space-8), 9vh, 120px) 0 clamp(120px, 16vh, 190px);
  overflow: hidden;
}

/* The aurora is two soft radial washes, not an image: it scales to any
   viewport, weighs nothing, and cannot arrive late and pop. */
.lp-aurora {
  position: absolute;
  inset: -20% -10% 16% -10%;
  background:
    radial-gradient(60% 55% at 18% 8%, rgba(0, 32, 212, 0.42), transparent 62%),
    radial-gradient(52% 48% at 88% 0%, rgba(121, 20, 175, 0.30), transparent 60%),
    radial-gradient(46% 42% at 62% 46%, rgba(0, 207, 255, 0.16), transparent 66%);
  pointer-events: none;
}

.lp-aurora-soft { opacity: 0.72; }

.lp-hero-grid {
  position: relative;
  display: grid;
  /* The art takes the wider half now: the copy lost roughly half its
     words when it went formal, and the photographs are the argument. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-8);
  align-items: center;
}

.lp-eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--klika-turquoise);
  margin-bottom: var(--space-4);
}

.lp-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.5rem + 3.1vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
  max-width: 16ch;
}

.lp-grad {
  display: block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lede {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.lp-cta-center { justify-content: center; }

.lp-fineprint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  max-width: 46ch;
}

/* Three real renders on a slow float. Absolute rather than a grid because
   they OVERLAP on purpose: a neat row of three would read as a stock gallery,
   and the overlap is what makes it a scene. */
.lp-hero-art {
  position: relative;
  height: clamp(320px, 46vh, 520px);
}

.lp-art {
  position: absolute;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(2, 5, 20, 0.55);
  background: var(--surface-media);
}

.lp-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Five cards, composed as a loose scatter rather than a row (2026-09-14).
   Afif asked for more of them and to keep the 3D: "mungkin 5 foto kali yaa,
   dan tetep dibikin 3d gini gapapa, keren."

   Five overlapping cards in a 530x520 box is the point where guessing stops
   working, so the numbers below were measured rather than eyed: the harness
   checks that every card keeps at least 65% of itself visible AT THE WORST
   MOMENT of the float loop, not at rest. The taller column is on the left so
   the cluster leans toward the headline instead of away from it. */

/* A GRID, not a scatter (2026-09-14, third composition).

   The first two versions positioned five cards absolutely and tuned the
   percentages until a harness said nothing was too buried. That check passed
   and the result still looked wrong, which Afif said plainly: "penempatannya
   masih berantakan nih bro."

   He is right, and the harness was measuring the wrong property. "Not buried"
   is not the same as "composed". Five cards at five different sizes with five
   different gaps have no rhythm for the eye to find, so the arrangement reads
   as debris however carefully each individual overlap was tuned.

   So the cluster is a real three-column grid now: every card the same width,
   every gap the same, two stacked left, two stacked right, and one in the
   middle pushed to centre. The middle card is what keeps it from looking like
   a contact sheet -- it breaks the horizon line the four corners would
   otherwise draw.

   Depth did not come from the mess and does not leave with it: it comes from
   the layered shadows, the cursor tilt, and the float, all of which are
   untouched. */
.lp-hero-art {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  height: clamp(380px, 54vh, 580px);
  /* Room for the float. The cards drift +/-7px, so without this the bottom
     row hangs a few pixels outside its own box -- invisible on a dark hero,
     but it is the kind of small wrongness that makes a layout feel unsettled
     rather than placed. */
  padding: 8px 0;
}

.lp-art {
  position: static;          /* the grid places them now, not the offsets */
  width: 100%;
  height: 100%;
}

.lp-art-1 { grid-column: 1; grid-row: 1; }
.lp-art-3 { grid-column: 1; grid-row: 2; }
.lp-art-5 { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 62%; }
.lp-art-2 { grid-column: 3; grid-row: 1; }
.lp-art-4 { grid-column: 3; grid-row: 2; }

/* The seam. A gradient from the night background to the paper colour, so the
   two halves meet instead of colliding. */
.lp-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Short and weighted late. A long fade between a dark and a light colour is
     always grey in the middle, and 170px of grey reads as a rendering fault.
     Compressed to ~100px with the paper arriving fast, the same grey becomes a
     seam nobody looks at twice. */
  /* Longer than the cream version, not shorter. With hostile hues a long fade
     was a long smear; within one hue it is depth, and the eye reads it as the
     sky getting lighter rather than as two images meeting. */
  height: clamp(120px, 18vh, 260px);
  background: linear-gradient(180deg,
    rgba(5, 8, 31, 0) 0%,
    rgba(13, 30, 84, 0.55) 28%,
    rgba(116, 150, 214, 0.72) 62%,
    rgba(199, 217, 246, 0.94) 84%,
    var(--lp-paper) 100%);
  pointer-events: none;
}

/* ---------- DAYLIGHT ------------------------------------------------------ */

.lp-day {
  background: var(--lp-paper);
  color: var(--lp-ink);
  padding: clamp(var(--space-8), 10vh, 116px) 0;
}

.lp-day + .lp-day { padding-top: 0; }

.lp-kicker {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: var(--space-3);
}

.lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.lp-h2-light { color: var(--text-primary); max-width: 20ch; }

.lp-sub {
  font-size: var(--fs-lg);
  color: var(--lp-ink-2);
  max-width: 58ch;
  margin-bottom: var(--space-6);
}

/* EVERY heading in the daylight half is coloured explicitly, and this rule is
   not defensive tidiness: without it, nine <h3> elements inherited the app's
   own heading colour (#F4F7FF, built for a night background) and painted at a
   contrast ratio of 1.07 on cream. Invisible. They looked correct in the
   stylesheet, because the stylesheet never mentioned them.

   Found by measuring what the browser PAINTED rather than by reading the CSS,
   which is the only way this class of bug is ever found. A blanket selector
   beats nine per-component colours here: the next component added to this half
   inherits the fix instead of repeating the bug. */
.lp-day h1,
.lp-day h2,
.lp-day h3,
.lp-day h4,
.lp-day summary,
.lp-day b,
.lp-day strong { color: var(--lp-ink); }

.lp-day p,
.lp-day li,
.lp-day span { color: var(--lp-ink-2); }

/* The two that are deliberately NOT ink: a kicker leads its section in the
   accent, and a step number is the warm counterpoint. Declared after the
   blanket rule so they win without !important. */
.lp-day .lp-kicker { color: var(--lp-accent); }
.lp-day .lp-prob-n { color: var(--lp-warm); }
.lp-day .lp-step-no,
.lp-day .lp-feat-ic { color: var(--lp-accent); }

/* ---------- masalah ------------------------------------------------------- */

.lp-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.lp-prob {
  background: linear-gradient(180deg, var(--lp-paper-2), var(--lp-paper-3));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--lp-lift-1);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
}

.lp-prob:hover { transform: translateY(-4px); box-shadow: var(--lp-lift-2); }

/* `.lp-prob p` is one class PLUS one element (0,1,1) and beat a bare
   `.lp-prob-n` (0,1,0), so the number rendered at 15px instead of 32px. The
   selector is qualified rather than the font-size shouted with !important,
   because the collision is real and naming it is cheaper than overriding it. */
.lp-prob p.lp-prob-n {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--lp-warm);
  margin-bottom: var(--space-3);
}

.lp-prob h3 { font-size: var(--fs-h3); color: var(--lp-ink); margin-bottom: var(--space-2); }
.lp-prob p { color: var(--lp-ink-2); font-size: var(--fs-sm); }

/* ---------- langkah ------------------------------------------------------- */

.lp-steps-list { list-style: none; display: grid; gap: var(--space-5); margin: 0; padding: 0; }

.lp-steps-list li {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  background: linear-gradient(180deg, var(--lp-paper-2), var(--lp-paper-3));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--lp-lift-1);
}

.lp-step-no {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--lp-accent);
  flex: none;
  min-width: 2.4ch;
}

.lp-steps-list h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.lp-steps-list p { color: var(--lp-ink-2); font-size: var(--fs-sm); max-width: 64ch; }

/* ---------- fitur --------------------------------------------------------- */

.lp-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.lp-feat {
  position: relative;
  background: linear-gradient(180deg, var(--lp-paper-2), var(--lp-paper-3));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--lp-lift-1);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
  transform-style: preserve-3d;
}

.lp-feat:hover {
  transform: translateY(-5px);
  box-shadow: var(--lp-lift-2);
}

/* A tinted tile, not a coloured edge: the house rule forbids the lining
   accent, and an icon chip says "category" more clearly than a border ever
   did. */
.lp-feat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--lp-accent-soft);
  color: var(--lp-accent);
  margin-bottom: var(--space-4);
}

.lp-feat h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.lp-feat p { color: var(--lp-ink-2); font-size: var(--fs-sm); }

/* ---------- bukti --------------------------------------------------------- */

.lp-proof-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.lp-shot {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--lp-paper-2);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-lift-1);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
}

.lp-shot:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--lp-lift-2); }

.lp-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.lp-shot figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--lp-ink-2);
}

/* ---------- biaya --------------------------------------------------------- */

.lp-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.lp-cost-card {
  box-shadow: var(--lp-lift-1);
  background: linear-gradient(180deg, var(--lp-paper-2), var(--lp-paper-3));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.lp-cost-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--lp-ink-2);
}

.lp-cost-row svg { flex: none; margin-top: 2px; color: var(--lp-accent); }
.lp-cost-row b { color: var(--lp-ink); }

/* ---------- faq ----------------------------------------------------------- */

.lp-faq-list { display: grid; gap: var(--space-3); max-width: 860px; }

.lp-faq-item {
  box-shadow: var(--lp-lift-1);
  background: var(--lp-paper-2);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--fs-lg);
  color: var(--lp-ink);
  list-style: none;
}

.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-mark { color: var(--lp-accent); transition: transform 180ms ease; flex: none; }
.lp-faq-item[open] .lp-faq-mark { transform: rotate(180deg); }
.lp-faq-item p { color: var(--lp-ink-2); font-size: var(--fs-sm); margin-top: var(--space-3); max-width: 68ch; }

/* ---------- penutup (night again) ----------------------------------------- */

.lp-close {
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
  padding: clamp(var(--space-8), 12vh, 140px) 0;
}

/* Mirrors the hero's seam, upside down, so daylight fades back into night
   instead of ending on a hard line. */
.lp-close::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(120px, 18vh, 260px);
  background: linear-gradient(180deg,
    var(--lp-paper) 0%,
    rgba(199, 217, 246, 0.94) 16%,
    rgba(116, 150, 214, 0.72) 38%,
    rgba(13, 30, 84, 0.55) 72%,
    rgba(5, 8, 31, 0) 100%);
  z-index: 1;
}

.lp-close-inner { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.lp-close-mark { margin-bottom: var(--space-5); }

/* ---------- small screens ------------------------------------------------- */

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  /* The art goes UNDER the copy on a phone, and shrinks: a hero image that
     pushes the headline off the first screen is a hero image that lost. */
  .lp-hero-art { height: clamp(260px, 42vh, 360px); order: 2; }
  .lp-h1 { max-width: none; }
  .lp-steps-list li { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 560px) {
  .landing .lp-inner { width: calc(100% - 2 * var(--space-4)); }
  .lp-cta-row .btn { width: 100%; justify-content: center; }
  .lp-proof-rail { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================================
   Depth and motion, second pass (2026-09-14)
   ============================================================================
   Afif: "kayanya perlu diperbanyak animasi yang out of the box yang keren deh,
   sekarang menurut gue masih terlalu flat, ga ada aksen futuristik yang
   kerennya."

   What was added, and what was deliberately not. Added: real depth (a 3D tilt
   the cursor drives, cards that arrive with perspective, a grid horizon under
   the hero, drifting light in the daylight half). Not added: anything that
   takes the scroll away from the reader, anything that moves while being read,
   and anything whose absence would leave a blank page. This is still a page
   somebody decides on, not a showreel.
   ============================================================================ */

/* The hero cluster tilts toward the cursor. Perspective on the PARENT so the
   three cards share one vanishing point -- perspective per card makes them
   read as three separate scenes rather than one. */
.lp-hero-art {
  perspective: 1100px;
  perspective-origin: 50% 40%;
}

.lp-art {
  transform-style: preserve-3d;
  will-change: transform;
}

/* A faint receding grid under the hero. The one unambiguously "futuristic"
   element on the page, kept very low contrast so it reads as depth rather
   than as decoration. Pure CSS: no image to load, no aspect to break. */
.lp-grid-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 207, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 207, 255, 0.13) 1px, transparent 1px);
  background-size: 68px 44px;
  transform: perspective(520px) rotateX(72deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, transparent 92%);
  opacity: 0.55;
}

/* Slow drifting light in the daylight half, so it is lit rather than flat.
   Two blobs at different speeds; one alone reads as a mistake in the
   background colour. */
.lp-day { position: relative; overflow: hidden; }

.lp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.55;
}

.lp-orb-a {
  width: 520px; height: 520px;
  top: -160px; right: -140px;
  background: radial-gradient(circle, rgba(0, 32, 212, 0.22), transparent 68%);
}

.lp-orb-b {
  width: 460px; height: 460px;
  bottom: -180px; left: -130px;
  background: radial-gradient(circle, rgba(0, 207, 255, 0.20), transparent 66%);
}

.lp-inner { position: relative; z-index: 1; }

/* A marquee of the real preset category names. Honest (these are the groups
   the app ships), and it gives the light half a moving element that nobody has
   to read to understand. */
.lp-marquee {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.lp-marquee-track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  will-change: transform;
}

.lp-marquee-chip {
  flex: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--lp-paper-2);
  border: 1px solid var(--lp-line);
  color: var(--lp-ink-2);
  font-size: var(--fs-2xs);
  white-space: nowrap;
  box-shadow: var(--lp-lift-1);
}

/* Humans. The proof rail's own row for organic, people-in-frame results --
   Afif: "terutama yang sample content dari organic result dimana ada talent
   atau ada manusianya bro. Inget ini kan mostly yang pake nantinya adalah UMKM
   jadi perlu dibikin lebih humanis lagi." Bigger than the product rail below
   it, because a face is what makes a stranger believe a tool is for them. */
.lp-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.lp-person {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lp-lift-1);
  background: var(--lp-paper-2);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
}

.lp-person:hover { transform: translateY(-6px); box-shadow: var(--lp-lift-2); }

.lp-person img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--lp-paper-3);
}

.lp-person figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  font-size: var(--fs-2xs);
  color: #FFFFFF;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 26, 0.86));
}

@media (max-width: 560px) {
  .lp-people { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .lp-grid-floor { display: none; }
}

/* Everything above is decoration. Under reduced motion the page keeps its
   depth (shadows, gradients, perspective are static) and loses only the
   things that move. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track { transform: none !important; }
  .lp-art { transform: none !important; }
}

/* Tablet band: force even rows (2026-09-14).

   At 1440 and 1200 the two rails already end flush -- 8 photos in rows of four,
   10 in rows of five, which is why those counts were chosen. In the tablet
   band the product rail resolved to three columns and left a single orphan on
   the last row, the exact raggedness Afif asked to remove ("biar rapi atas
   bawah").

   Forced to two columns there rather than widening the minimum track: a wider
   minimum would have pushed DESKTOP down to four columns and broken the thing
   that already worked, to fix a narrower one. */
/* Column counts are DECLARED per band, not left to auto-fill arithmetic.

   Afif asked for rails that end flush, and the counts he chose (8 people, 10
   products) do that against four and five columns. Leaving auto-fill to decide
   meant the column count changed with the window and the tidiness came and
   went: flush at 1440, three-plus-an-orphan at 1024, flush again at 768.

   Declaring it makes "rapi atas bawah" a property of the stylesheet instead of
   a coincidence of how many 210px tracks happen to fit. */
@media (min-width: 1024px) {
  .lp-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-proof-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 561px) and (max-width: 1023px) {
  .lp-people,
  .lp-proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .lp-people,
  .lp-proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}