/* =====================================================================
   VF MARKET — LANDING (phase 13, design D2 L1–L4, template "Landing.dc.html")
   One template (views/index.ejs), one token set: body.vf-landing--current maps the --l-* tokens to the store's
   --vf-* tokens, so the landing follows the global theme and light / dark (html.dark-mode). Round 4 removed the
   retro / brutalist / minimal sets (the public page looked like another shop; retro also overrode light/dark).
   Literal colours live ONLY in the --l-* token blocks below; every rule uses tokens.
   Self-contained: replaces the ui.css section "PHASE 11 SCOPE 5 — LANDING".
   ===================================================================== */

/* ---------- Layout tokens (phase 14; phone < 768, tablet 768–1023, desktop >= 1024) ---------- */
body.vf-landing{
  --l-pad: 16px; --l-nav-h: 64px; --l-wrap: 1120px; --l-hero-top: 48px; --l-sec-gap: 72px;
  --l-h1: 32px; --l-h2: 24px; --l-lead: 16px; --l-cols: 3; --l-card-cols: 1; --l-card-pad: 20px;
  --l-prompt: none; --l-bar: none; --l-bg-img: none;
}
@media (min-width: 768px) { body.vf-landing{ --l-pad: 24px; --l-h1: 44px; --l-h2: 28px; --l-card-cols: 3; --l-sec-gap: 88px; --l-hero-top: 72px; } }
@media (min-width: 1024px) { body.vf-landing{ --l-pad: 32px; --l-h1: 52px; --l-h2: 32px; --l-lead: 18px; --l-cols: 6; --l-card-pad: 28px; --l-sec-gap: 112px; --l-hero-top: 96px; } }

/* ---------- L1 current (default): the design-system tokens ---------- */
body.vf-landing--current{
  --l-bg: var(--vf-surface-1); --l-surface: var(--vf-surface-2); --l-text: var(--vf-text-1); --l-text2: var(--vf-text-2);
  --l-accent: var(--vf-accent); --l-on-accent: var(--vf-on-accent); --l-accent-text: var(--vf-accent-text);
  --l-wm: var(--vf-accent-text); --l-glow: var(--vf-glow); --l-tile: var(--vf-accent-subtle);
  --l-r: 16px; --l-r-sm: 12px; --l-r-btn: 12px; --l-r-tile: 12px; --l-r-num: 999px;
  --l-card-bd: 1px solid transparent; --l-card-sh: var(--vf-e2); --l-cat-sh: var(--vf-e1);
  --l-btn-bd: 0; --l-btn-sh: 0 1px 2px rgba(17, 16, 40, .12);
  --l-btn2-bg: var(--vf-surface-2); --l-btn2-bd: 1px solid var(--vf-border-strong);
  --l-num-bg: var(--vf-accent); --l-num-fg: var(--vf-on-accent); --l-num-bd: 0;
  --l-nav-bd: 1px solid var(--vf-border); --l-foot-bd: 1px solid var(--vf-border);
  /* phase 16 */
  --l-dot: color-mix(in srgb, var(--vf-text-1) 13%, transparent); --l-dot-gap: 22px;
  --l-wash: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--vf-accent) 12%, transparent), transparent 70%);
  --l-ic-mode: hue;   /* service / trust icons tinted by category hue (theme-mixed) */
  --l-band-bg: var(--vf-surface-2); --l-band-solid: var(--vf-surface-2); --l-band-bd: 1px solid var(--vf-border);
  --l-end-bg: linear-gradient(135deg, var(--vf-accent) 0%, color-mix(in srgb, var(--vf-accent) 70%, #000) 100%);
  --l-end-fg: var(--vf-on-accent); --l-end-sub: var(--l-end-fg);
  --l-end-btn-bg: var(--vf-on-accent); --l-end-btn-fg: var(--vf-accent); --l-end-bd: 0;
  --l-line: var(--vf-border-strong);
}
html.dark-mode body.vf-landing--current{ --l-dot: color-mix(in srgb, var(--vf-text-1) 11%, transparent);
  --l-card-bd: 1px solid var(--vf-border); --l-card-sh: none; --l-cat-sh: none; --l-btn2-bg: transparent;
}
/* Default global theme in dark: the drawing keeps the light indigo on the buttons and step numbers. */
html.dark-mode:not([data-vf-theme]) body.vf-landing--current{
  --l-accent: #4B3FD6; --l-on-accent: #FFFFFF; --l-num-bg: #4B3FD6; --l-num-fg: #FFFFFF; --l-glow: 75, 63, 214;
}


/* ---------- Page ---------- */
body.vf-landing{
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background-color: var(--l-bg); background-image: var(--l-bg-img); color: var(--l-text); font-family: var(--vf-font);
}
.vf-landing h1, .vf-landing h2, .vf-landing h3, .vf-landing p, .vf-landing ol, .vf-landing ul{ margin: 0; }
html{ scroll-padding-top: calc(var(--l-nav-h, 64px) + 16px); }

/* ---------- Nav: sticky, translucent, wordmark · links (>= 1024) · switch · Masuk · menu ---------- */
.vf-landing__nav{
  position: sticky; top: 0; z-index: var(--rs-z-nav, 40); flex: none; height: var(--l-nav-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 var(--l-pad); padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--l-bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--l-nav-bd);
}
.vf-landing__brand{ flex: 0 1 auto; min-width: 0; min-height: 48px; margin-right: auto; display: inline-flex; align-items: center; overflow: hidden; padding: 0 4px 0 0; text-decoration: none; color: var(--l-text); }
.vf-landing__brand .rs-wordmark{ max-width: 100%; overflow: hidden; color: var(--l-text); }
.vf-landing__brand .rs-wordmark__head{ color: var(--l-text); }
html body .vf-landing__brand .rs-wordmark__accent{ color: var(--l-wm); }
.vf-landing__links{ display: none; }
@media (min-width: 1024px) {
  .vf-landing__links{ display: flex; align-items: center; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
  .vf-landing__links a{ min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--l-r-btn); color: var(--l-text2); font: 500 16px/24px var(--vf-font); text-decoration: none; }
  .vf-landing__links a:hover{ color: var(--l-text); }
}
.vf-landing__navr{ flex: none; display: flex; align-items: center; gap: 8px; }
.vf-landing .vf-theme-pill{ border: var(--l-btn2-bd); background: var(--l-surface); color: var(--l-text); }
.vf-landing .vf-theme-pill__track{ background: color-mix(in srgb, var(--l-text) 10%, transparent); box-shadow: none; }
html.dark-mode .vf-landing .vf-theme-pill__track{ background: var(--l-accent); }
@media (max-width: 479.98px) { .vf-landing__theme{ padding: 0 4px; } .vf-landing__theme .vf-theme-pill__label{ display: none; } }
.vf-landing__menubtn{ flex: none; width: 48px; height: 48px; margin-right: -4px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vf-landing .vf-burger{ border: var(--l-btn2-bd); background: var(--l-surface); border-radius: var(--l-r-btn); }
.vf-landing .vf-burger > span{ background: var(--l-text); }
.vf-landing__menubtn[aria-expanded="true"] .vf-burger > span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.vf-landing__menubtn[aria-expanded="true"] .vf-burger > span:nth-child(2){ opacity: 0; }
.vf-landing__menubtn[aria-expanded="true"] .vf-burger > span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
/* Clean dropdown under the menu button (scale .95 + fade in 200 ms, out 200 ms). */
/* placed by public/js/vf-dd.js (position: fixed, Floating UI); only the look is here */
.vf-landing__menu.vf-dd__menu{
  width: min(260px, calc(100vw - 2 * var(--l-pad))); min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 8px; border-radius: var(--l-r); background: var(--l-surface); border: var(--l-card-bd);
  box-shadow: var(--vf-e3); transform-origin: top right;
}
.vf-landing__menu[hidden]{ display: none; }
.vf-landing__menu a{ min-height: 48px; padding: 0 12px; display: flex; align-items: center; border-radius: var(--l-r-sm); color: var(--l-text); font: 500 16px/24px var(--vf-font); text-decoration: none; }
.vf-landing__menu a:hover{ background: color-mix(in srgb, var(--l-text) 6%, transparent); }
.vf-landing__menu .vf-landing__menu-cta{ margin-top: 4px; justify-content: center; background: var(--l-accent); color: var(--l-on-accent); font-weight: 600; border-radius: var(--l-r-btn); }
.vf-landing__menu .vf-landing__menu-cta:hover{ background: var(--l-accent); filter: brightness(1.06); }

/* ---------- Buttons ---------- */
.vf-landing__btn{ box-sizing: border-box; height: 52px; min-width: 0; padding: 0 28px; border-radius: var(--l-r-btn); background: var(--l-accent); color: var(--l-on-accent); border: var(--l-btn-bd); box-shadow: var(--l-btn-sh); display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 600 16px/24px var(--vf-font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--vf-dur, 140ms) var(--vf-ease, ease-out); }
.vf-landing__btn:hover{ color: var(--l-on-accent); }
@media (hover: hover) and (pointer: fine) { .vf-landing__btn:hover{ transform: translateY(-2px); } .vf-landing__btn:hover .rs-icon{ transform: translateX(3px); } }
.vf-landing__btn .rs-icon{ transition: transform var(--vf-dur, 140ms) var(--vf-ease, ease-out); }
.vf-landing__btn--2{ background: var(--l-btn2-bg); color: var(--l-text); border: var(--l-btn2-bd); box-shadow: none; }
.vf-landing__btn--2:hover{ color: var(--l-text); }
.vf-landing__btn--sm{ flex: none; position: relative; height: 40px; min-height: 0; padding: 0 16px; font-size: 14px; }
.vf-landing__btn--sm::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
@media (max-width: 359.98px) { .vf-landing__btn--sm{ padding: 0 12px; } }

/* ---------- Background (phase 16, owner item 2): static dot grid / graph paper, painted once, fading out under the
   hero; it scrolls with the page (no fixed layer, no frame loop). Reference: 21st.dev "Background patterns: one paint,
   no frame loop" + Dot Pattern. Retro keeps its scanlines; brutalist draws graph paper. ---------- */
body.vf-landing{ position: relative; isolation: isolate; }
.vf-landing__bg{
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(1100px, 140vh); pointer-events: none;
  background-image: var(--l-wash), radial-gradient(var(--l-dot, transparent) 1.1px, transparent 1.6px);
  background-size: 100% 100%, var(--l-dot-gap, 22px) var(--l-dot-gap, 22px);
  background-position: 0 0, center top;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}


/* ---------- Main ---------- */
.vf-landing__main{ flex: 1 0 auto; width: 100%; max-width: var(--l-wrap); margin: 0 auto; box-sizing: border-box; padding: var(--l-hero-top) var(--l-pad) 0; display: flex; flex-direction: column; gap: var(--l-sec-gap); }
.vf-landing__main--rest{ flex: none; padding-top: 0; }

/* Hero: centred — badge → focus headline (Outfit 800; Fugaz One only for the store-name wordmark) → lead → 2 CTAs → chips */
.vf-landing__hero{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; min-width: 0; }
.vf-landing__prompt{ display: var(--l-prompt); font: 500 14px/20px var(--vf-font-mono); color: var(--l-accent-text); }
.vf-landing__badge{ display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; box-sizing: border-box; padding: 0 16px 0 8px; border-radius: 999px; border: var(--l-card-bd); background: var(--l-surface); box-shadow: var(--l-cat-sh); color: var(--l-text); font: 600 14px/20px var(--vf-font-num); flex-wrap: wrap; justify-content: center; }
.vf-landing__badge .rs-icon{ color: var(--l-accent-text); }
.vf-landing__sep{ color: var(--l-text2); }
.vf-landing__hero h1{ max-width: 18ch; font: 600 var(--l-h1)/1.12 var(--vf-font); letter-spacing: -0.03em; color: var(--l-text); text-wrap: balance; overflow-wrap: anywhere; }
.vf-landing__hl{ color: var(--l-accent-text); }
.vf-landing__lead{ max-width: 52ch; font: 400 var(--l-lead)/1.6 var(--vf-font); color: var(--l-text2); text-wrap: pretty; }
.vf-landing__cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 4px; }
.vf-landing__cta .vf-landing__btn{ flex: 1 1 200px; max-width: 280px; }
@media (min-width: 768px) { .vf-landing__cta .vf-landing__btn{ flex: 0 1 auto; min-width: 220px; } }

.vf-focus{ position: relative; display: flex; flex-direction: column; align-items: center; gap: .04em; }
.vf-focus__line{ display: block; }

/* Trust chips under the CTAs */
.vf-landing__trust{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.vf-landing__trust li{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--l-surface); border: var(--l-card-bd); box-shadow: var(--l-cat-sh); color: var(--l-text); font: 600 14px/20px var(--vf-font); }
.vf-landing__ti{ flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }

/* Icon tiles: current theme = category hue mixed into the theme (stays in palette in every global theme);
   retro / brutalist / minimal = the theme's own tile colours. */
.vf-landing__ti, .vf-landing__svcic, .vf-landing__whyic{ background: var(--l-tile); color: var(--l-accent-text); }
body.vf-landing--current :is(.vf-landing__ti, .vf-landing__svcic, .vf-landing__whyic){
  background: color-mix(in oklch, oklch(0.94 0.045 var(--h, 260)) 70%, var(--vf-accent-subtle));
  color: color-mix(in oklch, oklch(0.47 0.15 var(--h, 260)) 70%, var(--vf-accent-text));
}
html.dark-mode body.vf-landing--current :is(.vf-landing__ti, .vf-landing__svcic, .vf-landing__whyic){
  background: color-mix(in oklch, oklch(0.3 0.06 var(--h, 260)) 70%, var(--vf-accent-subtle));
  color: color-mix(in oklch, oklch(0.84 0.11 var(--h, 260)) 70%, var(--vf-accent-text));
}

/* Section head: eyebrow + title + one-line sub, centred */
.vf-landing__sec{ display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.vf-landing__head{ display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vf-landing__eyebrow{ font: 600 12px/16px var(--vf-font-num); letter-spacing: .12em; text-transform: uppercase; color: var(--l-accent-text); }
.vf-landing h2{ font: 600 var(--l-h2)/1.2 var(--vf-font); letter-spacing: -0.02em; color: var(--l-text); text-wrap: balance; }
.vf-landing__head p:not(.vf-landing__eyebrow){ max-width: 56ch; font: 400 15px/1.55 var(--vf-font); color: var(--l-text2); text-wrap: pretty; }
@media (min-width: 1024px) { .vf-landing__head p:not(.vf-landing__eyebrow){ font-size: 18px; } .vf-landing__hero h1{ max-width: 22ch; } }
/* Layanan: service cards (whole card is the link) — 1 col phone, 2 tablet, 3 desktop; equal heights */
.vf-landing__svc{ list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 600px) { .vf-landing__svc{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vf-landing__svc{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.vf-landing__svc > li{ display: flex; min-width: 0; }
.vf-landing__svccard{
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: var(--l-card-pad); display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 4px;
  background: var(--l-surface); border: var(--l-card-bd); border-radius: var(--l-r); box-shadow: var(--l-card-sh); color: var(--l-text); text-decoration: none;
  transition: transform var(--vf-dur, 140ms) var(--vf-ease, ease-out);
}
@media (hover: hover) and (pointer: fine) { .vf-landing__svccard:hover{ transform: translateY(-3px); color: var(--l-text); } .vf-landing__svccard:hover .vf-landing__svcgo .rs-icon{ transform: translateX(3px); } }
.vf-landing__svcic{ grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: var(--l-r-tile); display: flex; align-items: center; justify-content: center; }
.vf-landing__svcname{ font: 600 18px/24px var(--vf-font); color: var(--l-text); overflow-wrap: anywhere; }
.vf-landing__svctext{ font: 400 14px/20px var(--vf-font); color: var(--l-text2); text-wrap: pretty; }
.vf-landing__svcgo{ display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 14px/20px var(--vf-font); color: var(--l-accent-text); }
.vf-landing__svcgo .rs-icon{ transition: transform var(--vf-dur, 140ms) var(--vf-ease, ease-out); }
@media (min-width: 1024px) { .vf-landing__svccard{ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: 8px; } .vf-landing__svcic{ grid-row: auto; width: 52px; height: 52px; margin-bottom: 8px; } .vf-landing__svcname{ font-size: 18px; } }

/* Running band (concept: marquee): two identical lists slide left; transform only; paused off-screen / on hover */
.vf-landing__band{ position: relative; margin: var(--l-sec-gap) 0; padding: 16px 0; overflow: hidden; background: var(--l-band-bg); color: var(--l-band-fg, var(--l-text)); border-top: var(--l-band-bd); border-bottom: var(--l-band-bd); contain: paint; }
/* Edge fade = two static overlays in the band colour (a mask would repaint the band on every animation frame). */
.vf-landing__band::before, .vf-landing__band::after{ content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.vf-landing__band::before{ left: 0; background: linear-gradient(90deg, var(--l-band-solid, var(--l-bg)), transparent); }
.vf-landing__band::after{ right: 0; background: linear-gradient(-90deg, var(--l-band-solid, var(--l-bg)), transparent); }
.vf-landing__track{ display: flex; width: max-content; }
.vf-landing__run{ list-style: none; margin: 0; padding: 0 12px; display: flex; gap: 12px; flex: none; }
.vf-landing__run li{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: var(--l-card-bd); background: var(--l-surface); color: var(--l-text); font: 600 14px/20px var(--vf-font); white-space: nowrap; }

.vf-landing__run .rs-icon{ color: var(--l-accent-text); }

@media (prefers-reduced-motion: no-preference) {
  .vf-landing__band.is-on:hover .vf-landing__track{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .vf-landing__band::before, .vf-landing__band::after{ content: none; } .vf-landing__track{ width: auto; } .vf-landing__run[aria-hidden]{ display: none; } .vf-landing__run{ flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 8px; } }

/* Keunggulan: six fact tiles — 1 col phone, 2 tablet, 3 desktop */
.vf-landing__why{ list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 600px) { .vf-landing__why{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vf-landing__why{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.vf-landing__why li{ min-width: 0; box-sizing: border-box; padding: 20px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; border: var(--l-card-bd); border-radius: var(--l-r); background: color-mix(in srgb, var(--l-surface) 70%, transparent); }

.vf-landing__whyic{ grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.vf-landing__why h3{ font: 600 16px/24px var(--vf-font); color: var(--l-text); }
.vf-landing__why p{ font: 400 14px/20px var(--vf-font); color: var(--l-text2); text-wrap: pretty; }

/* Cara order: four numbered steps on a line (phone: vertical line on the left; >= 768: horizontal line) */
.vf-landing__bar{ display: var(--l-bar); height: 32px; align-items: center; gap: 8px; padding: 0 12px; margin-bottom: -16px; border: var(--l-card-bd); border-radius: var(--l-r) var(--l-r) 0 0; font: var(--vf-t-mono-sm); color: var(--l-text2); }
.vf-landing__bar span{ flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--l-dot-1); }
.vf-landing__bar span:nth-child(2){ background: var(--l-dot-2); }
.vf-landing__bar span:nth-child(3){ background: var(--l-dot-3); }
.vf-landing__bar b{ margin-left: 8px; font-weight: 500; }
.vf-landing__steps{ list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.vf-landing__steps::before{ content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--l-line); }
.vf-landing__steps li{ position: relative; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; }
.vf-landing__num{ grid-row: 1 / span 2; position: relative; z-index: 1; box-sizing: border-box; width: 48px; height: 48px; border-radius: var(--l-r-num); background: var(--l-num-bg); color: var(--l-num-fg); border: var(--l-num-bd); display: flex; align-items: center; justify-content: center; font: 600 18px/1 var(--vf-font-num); }

.vf-landing__steps h3{ font: 600 18px/24px var(--vf-font); color: var(--l-text); align-self: end; }
.vf-landing__steps p{ font: 400 14px/20px var(--vf-font); color: var(--l-text2); align-self: start; }
@media (min-width: 768px) {
  .vf-landing__steps{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .vf-landing__steps::before{ left: 12.5%; right: 12.5%; top: 27px; bottom: auto; width: auto; height: 2px; }
  .vf-landing__steps li{ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; justify-items: center; text-align: center; row-gap: 8px; }
  .vf-landing__steps h3, .vf-landing__steps p{ align-self: start; }
  .vf-landing__num{ grid-row: auto; width: 56px; height: 56px; margin-bottom: 8px; font-size: 20px; }
}


/* Closing call to action */
.vf-landing__end{ margin-top: 0; padding: 40px 20px; border-radius: calc(var(--l-r) + 8px); background: var(--l-end-bg); color: var(--l-end-fg); border: var(--l-end-bd); box-shadow: var(--l-end-sh, none); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vf-landing__end .vf-landing__eyebrow{ color: var(--l-end-sub); }
.vf-landing__end h2{ color: var(--l-end-fg); max-width: 20ch; }
.vf-landing__end > p:not(.vf-landing__eyebrow){ max-width: 44ch; font: 400 16px/1.55 var(--vf-font); color: var(--l-end-sub); }
.vf-landing__end .vf-landing__cta{ margin-top: 12px; }
.vf-landing__btn--inv{ background: var(--l-end-btn-bg); color: var(--l-end-btn-fg); border: 0; box-shadow: none; }
.vf-landing__btn--inv:hover{ color: var(--l-end-btn-fg); }
.vf-landing__btn--ghost{ background: transparent; color: var(--l-end-fg); border: 1px solid color-mix(in srgb, var(--l-end-fg) 40%, transparent); box-shadow: none; }
.vf-landing__btn--ghost:hover{ color: var(--l-end-fg); }

@media (min-width: 768px) { .vf-landing__end{ padding: 56px 40px; } }

/* FAQ accordion on the landing tokens */
.vf-landing__faq{ width: 100%; max-width: 760px; margin: 0 auto; }
.vf-landing .vf-acc__item{ background: var(--l-surface); border: var(--l-card-bd); border-radius: var(--l-r-sm); }
.vf-landing .vf-acc__item[open]{ box-shadow: var(--l-cat-sh); }
.vf-landing .vf-acc__q{ color: var(--l-text); }
.vf-landing .vf-acc__chev{ background: color-mix(in srgb, var(--l-text) 7%, transparent); color: var(--l-text2); }
.vf-landing .vf-acc__item[open]:not(.is-acc-closing) > .vf-acc__q .vf-acc__chev{ background: var(--l-tile); color: var(--l-accent-text); }
.vf-landing .vf-acc__a p{ color: var(--l-text2); }
.vf-landing .vf-acc__a a{ color: var(--l-accent-text); }

/* ---------- Footer: wordmark + slim footer (partials/footer.ejs, slimFooter) ---------- */
.vf-landing__foot{ width: 100%; max-width: var(--l-wrap); margin: var(--l-sec-gap) auto 0; box-sizing: border-box; padding: 24px var(--l-pad) 0; border-top: var(--l-foot-bd); display: flex; justify-content: center; }
.vf-landing__brand--foot{ margin: 0; }
.vf-landing .rs-slimfoot{ flex: none; width: 100%; max-width: var(--l-wrap); margin: 4px auto 0; box-sizing: border-box; padding: 0 var(--l-pad) calc(16px + env(safe-area-inset-bottom, 0px)); background: none; border: 0; }
.vf-landing .rs-slimfoot__inner{ max-width: none; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; font: var(--vf-t-caption); color: var(--l-text2); text-align: center; }
.vf-landing .rs-slimfoot__copy{ padding: 0 8px; }
.vf-landing .rs-slimfoot__links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.vf-landing .rs-slimfoot__links a, .vf-landing .rs-slimfoot__help{ min-height: 48px; padding: 0 8px; display: inline-flex; align-items: center; background: none; border: 0; color: var(--l-text); font: inherit; text-decoration: none; cursor: pointer; }
.vf-landing .rs-slimfoot__links a:hover, .vf-landing .rs-slimfoot__help:hover{ color: var(--l-accent-text); }

.vf-landing__btn:focus-visible, .vf-landing__menubtn:focus-visible, .vf-landing__brand:focus-visible, .vf-landing__links a:focus-visible, .vf-landing__menu a:focus-visible,
.vf-landing__svccard:focus-visible, .vf-landing .rs-slimfoot__links a:focus-visible, .vf-landing .rs-slimfoot__help:focus-visible{ outline: 2px solid var(--l-accent-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vf-landing__btn, .vf-landing__btn .rs-icon, .vf-landing__svccard{ transform: none !important; }
}

/* Phase 16: "Efek suara" row in the landing menu */
.vf-landing__menurow{ min-height: 48px; margin-top: 4px; padding: 0 0 0 12px; display: flex; align-items: center; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--l-text) 10%, transparent); color: var(--l-text); font: 500 16px/24px var(--vf-font); }
.vf-landing__menurow > span{ flex: 1; min-width: 0; }
.vf-landing__menurow > .vf-landing__menurow-gap{ flex: none; }
.vf-landing__menurow > .rs-icon{ color: var(--l-text2); }
.vf-landing__menurow[hidden]{ display: none; }
.vf-landing .vf-sw[aria-checked="true"] .vf-sw__track{ background: var(--l-accent); }
.vf-landing__menu.vf-dd__menu.is-sheet{ width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* WP6A 6.2 (USR-LND-01) trust stats under the hero chips: real counts only; the number is server text (no JS needed). */
.vf-landing__stats{ margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 640px; }
@media (min-width: 600px) { .vf-landing__stats{ max-width: 360px; } }   /* round 4: two real counts, two columns everywhere */
.vf-landing__stats > div{ display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 8px 8px; border-radius: var(--l-r); background: var(--l-surface); border: var(--l-card-bd); box-shadow: var(--l-cat-sh); min-width: 0; }
.vf-landing__stats dt{ font: 500 14px/20px var(--vf-font); color: var(--l-text2); }
.vf-landing__stats dd{ margin: 0; font: 600 20px/28px var(--vf-font); color: var(--l-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* WP6A 6.2 (USR-LND-02) Produk pilihan: 2 columns on a phone, 3 on a tablet, 6 on a wide screen; equal heights;
   the logo box is fixed (48 px) so a late or failing image never moves the text. */
.vf-landing__prods{ list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .vf-landing__prods{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .vf-landing__prods{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.vf-landing__prods > li{ display: flex; min-width: 0; }
.vf-landing__prod{
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  background: var(--l-surface); border: var(--l-card-bd); border-radius: var(--l-r); box-shadow: var(--l-card-sh); color: var(--l-text); text-decoration: none;
  transition: transform var(--vf-dur, 140ms) var(--vf-ease, ease-out);
}
@media (hover: hover) and (pointer: fine) { .vf-landing__prod:hover{ transform: translateY(-3px); color: var(--l-text); } }
.vf-landing__prodimg{ flex: none; width: 48px; height: 48px; border-radius: var(--l-r-tile); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--l-tile); color: var(--l-accent-text); }
.vf-landing__prodimg img{ width: 48px; height: 48px; object-fit: cover; display: block; }
.vf-landing__prodimg img[hidden]{ display: none; }   /* a failed logo: the fallback icon takes the same box */
.vf-landing__prodimg > span{ display: inline-flex; }
.vf-landing__prodimg > span[hidden]{ display: none; }
.vf-landing__prodname{ font: 600 16px/24px var(--vf-font); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-landing__prodmeta{ font: 500 12px/16px var(--vf-font); color: var(--l-text2); }
.vf-landing__prodprice{ margin-top: auto; padding-top: 4px; font: 600 14px/20px var(--vf-font); color: var(--l-accent-text); font-variant-numeric: tabular-nums; }
.vf-landing__prodprice s{ font-weight: 500; color: var(--l-text2); }
.vf-landing__more{ margin: 20px 0 0; text-align: center; }
.vf-landing__prod:focus-visible{ outline: 2px solid var(--l-accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vf-landing__prod{ transform: none !important; } }