/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens (Figma → Landing-Page-bosAGEN) ─────────── */
:root {
  --primary:      #3f8be7;   /* Figma: Daftar Gratis bg / Masuk text / logo mark */
  --primary-dark: #2f78d1;   /* hover — same ~10% darkening bosOnline uses for its orange */
  --primary-wash: 184 212 246;   /* rgb channels — light tint of --primary (~37% over white), for the scrolled nav */
  --text:         #212b36;   /* --text/primary */
  --heading:      #202939;   /* Figma: Neutral Color/Dark/01 — hero headline */
  --body-text:    #605f5f;   /* Figma: hero description / checklist copy */
  --text-secondary: #637381; /* --text/secondary — inactive tabs, select arrows */
  --text-disabled:  #919eab; /* --text/disabled — input placeholders */
  --grey-20:      rgba(145,158,171,0.2);   /* --grey/20% — field & tab-group outline */
  --white:        #ffffff;
  --page-bg:      #f3f8ff;   /* Figma "bosAgen LP" 2352:26657 base rect (its line ornaments are skipped for now) */
  --gray-50:      #f9fafb;
  --gray-100:     #f3f4f6;
  --gray-700:     #374151;
  --font:         'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Figma button tokens */
  --btn-radius:   8px;       /* --button/radius */
  --btn-h:        48px;      /* all nav buttons */
  --btn-px-text:  10px;      /* --button/[text][large]--px */
  --btn-px-fill:  16px;      /* --button/[large]--px */
  --btn-gap:      8px;       /* --button/spacing */
  /* Figma spacing */
  --nav-px:       32px;      /* desktop: 80 (Figma px-80), set below */
  /* Every section wrapper: the content row plus its side padding. On the
     desktop tier that is Figma's 1440 = 80 + 1280 + 80 */
  --page-max:     calc(80rem + 2 * var(--nav-px));
}

/* ── Desktop tier: the 1440 composition, fitted to the window ──
   Above 1024 the page IS the 1440 Figma frame (80px gutter, 1280 row) and
   is shrunk uniformly to the window with `zoom` — nav included (user
   decision 2026-10-26). zoom re-lays out (crisp text, honest heights);
   media queries still see the real viewport. script.js (fitDesktop) sets
   --desk-zoom = min(1, clientWidth / 1440) exactly; the steps below are
   the no-JS fallback, each small enough not to overflow at its narrowest
   width. ≥1440 the scale stays 1 and the 1280 row centres. */
@media (min-width: 1025px) {
  :root { --nav-px: 80px; --desk-zoom: 0.70; }
  body  { zoom: var(--desk-zoom); }
}
@media (min-width: 1100px) { :root { --desk-zoom: 0.75; } }
@media (min-width: 1200px) { :root { --desk-zoom: 0.82; } }
@media (min-width: 1280px) { :root { --desk-zoom: 0.875; } }
@media (min-width: 1360px) { :root { --desk-zoom: 0.93; } }
@media (min-width: 1440px) { :root { --desk-zoom: 1; } }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* safety net for decorative elements that deliberately
                            bleed past their container in later sections */
}

/* ── Nav header ───────────────────────────────────────────── */
/* Figma node 2206:10980 — "Shape/Header" (2206:10981) is a plain white rect.
   bosonline.id puts a faint orange gradient here instead; bosAgen keeps
   Figma's plain white at the top of the page (user decision). */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page-bg);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Toggled by script.js once the page is scrolled past SCROLL_THRESHOLD — a
   barely-there translucent blue wash with a heavy frosted-glass blur, same
   mechanics as bosonline.id's header (there in orange). .nav-btn's text color
   is unaffected (already var(--text) unscrolled); .btn-masuk switches to match
   it below, rather than staying blue. */
.nav-header.is-scrolled {
  background: rgb(var(--primary-wash) / 29%);   /* bosonline.id: rgb(239 199 168 / 29%) */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(33, 43, 54, 0.12);
}

.nav-header.is-scrolled .btn-masuk {
  color: var(--text);
  border-color: var(--text);
}
.nav-header.is-scrolled .btn-masuk:hover {
  background: rgba(33, 43, 54, 0.06);
  border-color: var(--text);
}

/* Fixed-width container (bosonline.id: max-w-7xl = 1280px) */
.nav-wrapper {
  position: relative;
  max-width: var(--page-max);   /* 1440 on desktop: 80 + 1280 + 80 */
  margin: 0 auto;
}

/* Figma: flex items-center justify-between, content height driven by h-[48px] buttons */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;            /* matches bosonline.id: 20px top + 48px buttons + 20px bottom (bosAgen Figma frame is 80, user chose 88) */
  padding: 0 var(--nav-px);
}

/* ── Logo ─────────────────────────────────────────────────── */
/* Figma node 2210:6349 — 221×48 */
.nav-logo {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.logo {
  display: block;
  height: 48px;
  width: auto;
}

/* ── Desktop nav ──────────────────────────────────────────── */
/* Figma: flex gap-[24px] items-center  (center group, node 2206:11029) */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Nav button (text + optional chevron) ─────────────────── */
/* Figma: h-[48px] w-[108px] min-w-[64px] px-[10px] gap-[8px]
          rounded-[8px] font-bold text-[15px] leading-[26px] #212b36 */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  min-width: 64px;
  padding: 0 var(--btn-px-text);
  background: none;
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;        /* for <summary> */
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.nav-btn::-webkit-details-marker { display: none; }
.nav-btn:hover { background: rgba(33,43,54,.06); }

/* Figma: end icon size-[24px] */
.nav-chevron {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details[open] > .nav-btn .nav-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown menu ────────────────────────────────────────── */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
  white-space: nowrap;
}
details[open] > .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-700);
  text-decoration: none;
  transition: background 0.1s;
}
.dropdown-item:hover { background: var(--gray-50); }

/* ── Auth buttons (right group, node 2206:11034) ─────────── */
/* Figma: flex gap-[24px] items-center */
.desktop-auth {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* "Masuk" — outline style: transparent fill, blue border + text. Figma
   (2206:11035) draws it text-only, but bosonline.id's live button is outlined
   and this project mirrors that implementation; drop the border to go back
   to Figma's text-only look. Shared between the desktop nav (.desktop-auth)
   and the mobile drawer (.mobile-auth-row), so this one rule covers both —
   see the ≤820px note below on why .desktop-auth .btn-masuk is hidden there
   instead of a bare .btn-masuk selector. */
.btn-masuk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;    /* matches bosonline.id's own "Masuk" button width (measured ~77.56px) */
  height: var(--btn-h);
  padding: 0 calc(var(--btn-px-text) - 1px);   /* -1px compensates the border so text stays visually centered at the same inset */
  background: none;
  border: 1px solid var(--primary);
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-masuk:hover { background: rgba(63,139,231,.08); border-color: var(--primary-dark); }

/* "Daftar Gratis" — Figma 2206:11036: bg-#3f8be7 h-48px px-16px rounded-8px white text */
.btn-daftar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-px-fill);
  background: var(--primary);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-daftar:hover { background: var(--primary-dark); }

/* Daftar Gratis inside .nav-mobile-actions — visibility is controlled by that
   wrapper (display:none by default), so this is always inline-flex itself.
   Sized to the "medium" button (bosOnline Figma node 1319:38469, its <=768px
   spec); the mobile tier below shrinks it further to "small". */
.mobile-daftar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  background: var(--primary);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.mobile-daftar:hover { background: var(--primary-dark); }

/* ── Mobile actions group (<=900px) ──────────────────────── */
/* Daftar Gratis + the hamburger IconButton, grouped as ONE flex item of
   .nav-inner so justify-content:space-between only ever sees "logo" and
   "everything else" as the two ends, instead of spreading 3 separate items
   across the bar. */
.nav-mobile-actions {
  display: none;
  align-items: center;
  gap: 24px;             /* bosOnline Figma: gap-[24px] at 768 (node 1319:38467) */
  flex-shrink: 0;
}

/* ── Hamburger (IconButton) ──────────────────────────────── */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: background 0.15s;
}
.hamburger:hover { background: rgba(33,43,54,.06); }

.hamburger-icon {
  width: 24px;
  height: 24px;
}

/* ── Mobile drawer ────────────────────────────────────────── */
/* Overlays the page instead of pushing it down: .nav-header is already
   position:sticky, which is a valid containing block for an absolutely
   positioned child, so `top:100%` alone tracks the nav bar's real height at
   every tier (80px / 72px) with no hardcoded per-breakpoint offset needed.
   z-index only has to clear its sibling .nav-wrapper (both children of
   .nav-header, so this is a LOCAL stack — not the page's global 0-100
   scale); .mobile-menu-overlay below sits behind the whole header on the
   page's own scale (z-index:99 vs .nav-header's 100), so the header bar
   itself — hamburger included — stays undimmed and clickable to close. */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 12px 24px rgba(33,43,54,0.12);
  overflow-x: hidden;
  overflow-y: auto;   /* Produk/Blog expanded together can outgrow a short phone viewport */
  max-height: 0;
  transition: max-height 0.3s ease;
}
/* 500px comfortably fits every row plus one expanded submenu (Produk, the
   larger of the two, at ~180px) with margin; capped against dvh too so a
   landscape phone gets an internal scrollbar instead of running off-screen. */
.mobile-menu.open { max-height: min(500px, calc(100dvh - 96px)); }

/* Background scrim — dims the page behind the open drawer. Kept OUTSIDE
   .nav-header in the DOM (see index.html) specifically so script.js's
   "click outside .nav-header" handler closes the drawer on scrim clicks too,
   without any dedicated JS. Visibility is pure CSS: `:has()` lets the scrim
   react to the drawer's own .open class on a shared ancestor, so no
   class-toggling JS is needed here either. */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(15,23,32,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
body:has(.mobile-menu.open) .mobile-menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Shared by plain links (Cerita Agen) AND the Produk/Blog <summary>
   triggers — flex+space-between is a no-op for a plain text-only <a> and is
   what lets the chevron sit flush right on the summary rows. */
.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  list-style: none;     /* Firefox <summary> marker */
  transition: background 0.1s;
}
.mobile-link::-webkit-details-marker { display: none; }   /* Chrome/Safari <summary> marker */
.mobile-link:hover { background: var(--gray-50); }

.mobile-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.mobile-dropdown[open] > .mobile-link .mobile-chevron { transform: rotate(180deg); }

/* Child category list — same max-height trick as .mobile-menu itself:
   .mobile-submenu is forced to always lay out (overriding <details>' own
   UA default of display:none for its non-summary content when closed) so
   max-height can animate it, exactly like the desktop .dropdown-menu
   overrides the same native hidden state (there via opacity, here via
   height since this is in-flow, not an absolute-positioned popover). */
.mobile-submenu {
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-dropdown[open] > .mobile-submenu { max-height: 220px; }   /* fits Produk's 4 items */

.mobile-sublink {
  display: block;
  padding: 12px 24px 12px 40px;   /* indented under the parent label */
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}
.mobile-sublink:last-child { border-bottom: none; }   /* avoid doubling up with .mobile-link's own divider right after */
.mobile-sublink:hover { background: var(--gray-100); }

/* Grid, not flex, for the two buttons: minmax(0,1fr) tracks split the row by
   pure available space, ignoring each button's own border/padding — flex's
   flex:1 + flex-basis:0% looked equivalent but still seeded its growth math
   from each item's border-box (.btn-masuk's 1px border + smaller padding vs
   .btn-daftar's 0 border + larger padding), so they never actually landed on
   equal widths, just a fixed ~12px apart. */
.mobile-auth-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}

/* .btn-masuk's own fixed 78px (sized to mirror bosonline.id's desktop button)
   would otherwise win here too — override it back to auto so it fills its
   grid cell like .btn-daftar does. Height already matches .btn-daftar's at
   every tier via the shared unscoped .btn-daftar/.btn-masuk shrink in the
   ≤820 block below (.desktop-auth's own .btn-masuk is hidden by then, so
   that shrink only ever reaches this drawer instance). */
.mobile-auth-row .btn-masuk {
  width: auto;
}

/* ── Responsive ───────────────────────────────────────────── */
/* Four explicit bosAgen Figma frames drive the tiers, taken literally. All
   four frames are 80px tall (the >1024 desktop bar is 88px, matching
   bosonline.id — user decision):
     node 2352:32833 @1024  — full nav, unchanged sizes, px-40
     node 2355:9353  @820   — px-24, logo 40px; nav links stay "large" (48px
                              buttons); Masuk dropped, Daftar Gratis stays large
     node 2355:9615  @768   — nav links gone, hamburger appears; Daftar "medium"
                              (36px) + 40px hamburger, gap 24
     node 2355:9664  @375   — px-16, logo 31.76px; Daftar "small" (30px) +
                              36px hamburger, gap 8
   Padding lives on .nav-inner only (not .nav-wrapper) at every tier.

   The hamburger switch is therefore at 768 (the first frame that has one),
   NOT bosOnline's 900. Fit check at 769 (headless Chrome, this content): logo
   184 + nav 341 + Daftar 125 + 2×24 padding = 698px of 769 — comfortable even
   after a ~15px classic scrollbar. Re-measure if the nav copy changes. */

/* 1024 — px-[40px], everything else identical to desktop; bar is 80px tall */
@media (max-width: 1024px) {
  .nav-inner { padding: 0 40px; height: 80px; }
}

/* 820 tier — px-[24px], logo 40px (Figma 2355:9353 is the 820 frame). Nav
   buttons and Daftar Gratis intentionally keep their "large" 48px size.
   The tier STARTS at 900, not 820: the full-size nav with Masuk needs ~870px
   (logo 221 + nav 341 + auth 227 + 2×40 padding) and Figma has no frame in
   between, so at 821px it overflowed by 8px. 900 leaves 30px of margin.
   .btn-masuk is scoped to .desktop-auth specifically — that class is REUSED
   verbatim for the drawer's own "Masuk" link (.mobile-auth-row .btn-masuk),
   and an unscoped `.btn-masuk { display: none }` would silently delete Masuk
   from the drawer. */
@media (max-width: 900px) {
  .nav-inner { padding: 0 24px; }
  .logo      { height: 40px; }

  .desktop-auth .btn-masuk { display: none; }
}

/* 768 — hamburger + drawer takes over (Figma 2355:9615). The drawer's own
   buttons drop to "medium" here, scoped to .mobile-auth-row so they never
   touch the desktop buttons above. */
@media (max-width: 768px) {
  .desktop-nav,
  .desktop-auth       { display: none; }
  .nav-mobile-actions { display: flex; }
  .mobile-menu        { display: flex; }

  .mobile-auth-row .btn-masuk,
  .mobile-auth-row .btn-daftar {
    height: 36px;
    padding: 0 12px;      /* Figma: button/[medium]--px */
    font-size: 14px;
    line-height: 24px;
  }
}

/* Mobile, 375 reference width (Figma 2355:9664) — px-[16px], bar stays 80px.
   Same hamburger layout as 768, every size drops one more notch: logo
   shrinks again, Daftar Gratis goes from "medium" to "small", the hamburger
   from a 40px to a 36px circle, and the two sit closer together (gap 8 vs 24). */
@media (max-width: 767px) {
  .nav-inner { padding: 0 16px; }
  .logo      { height: 32px; }   /* Figma: 31.76px, native aspect */

  .nav-mobile-actions { gap: 8px; }

  .mobile-daftar {
    height: 30px;
    padding: 0 8px;       /* Figma: button/[small]--px */
    font-size: 13px;
    line-height: 22px;
  }

  .hamburger      { width: 36px; height: 36px; }
  .hamburger-icon { width: 20px; height: 20px; }
}

/* ── Utilities ────────────────────────────────────────────── */
/* Visually hidden but still read by screen readers / indexed (hero headline) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   Hero Section  (Figma node 2325:34402)
═══════════════════════════════════════════════════════════ */

/* Figma: pt-[16px] pb-[40px] at every tier. Background is the page's own
   --page-bg; Figma's "Vector 48" line ornament is skipped for now (user:
   ornaments come later). */
.hero-section {
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Same unpadded 1280 wrapper as .nav-wrapper — padding lives on .hero-inner */
.hero-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}

/* Figma: flex items-center justify-between. The gap is only a floor — the
   real spacing comes from space-between (see the "gap is a minimum" gotcha in
   CLAUDE.md), so each tier keeps it small. */
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 var(--nav-px);
}

/* ── Left content ───────────────────────────────────────── */
/* Figma 2325:34406: flex-col gap-[32px], title w-[564px].
   Desktop content does NOT shrink (flex-shrink 0, as in bosOnline's hero):
   the 56px "Aplikasi Usaha Agen" line can't wrap, so between 1280 and 1025 a
   shrinking column let the title run ~40px into the image. The image absorbs
   the squeeze instead. Tiers ≤1024 switch back to flex-shrink 1 with their
   own smaller basis. */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 0 0 564px;
  max-width: 564px;
  min-width: 0;
}

.hero-header { display: flex; flex-direction: column; }

/* Figma: Public Sans SemiBold 56px / 1.3 / -1.12px (-2%) #202939.
   Title frame 2325:34407 is flex-col gap-[8px] between the two lines. */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.hero-title-line { white-space: nowrap; }

/* ── Catchphrase rotator ──────────────────────────────────
   Phrase line + underline stacked (Figma 2325:34409). The swap is ported from
   bibit.id's hero word slider (.word-slide): the new phrase drops in from above
   with a small overshoot while the old one falls out below, 0.6s, built from
   transform + opacity only so it runs on the compositor and never forces a
   layout. The rotator keeps ONE width (the widest phrase) so nothing reflows
   during a swap; the underline follows the active phrase with a transform
   (--underline-scale, set by script.js) rather than by animating width. */
.hero-rotator {
  display: flex;
  flex-direction: column;
  width: max-content;
}

/* All phrases share one grid cell; overflow:hidden clips the ones entering
   from above / leaving below, so only the active phrase shows. The cell is one
   line tall (every phrase is nowrap). */
.hero-phrases {
  display: grid;
  overflow: hidden;
  /* The drop-in overshoots 20% below its resting line, which would clip the
     descenders (y, g) at that moment. The padding gives the clip box that
     room and the equal negative margin keeps the layout height unchanged. */
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
}
.hero-phrase {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;                    /* idle phrases are invisible */
}
.hero-phrase.is-active  { opacity: 1; }
/* script.js adds is-enter / is-leaving for one swap and removes them on
   animationend. The classes also promote the layer, only while it moves, so
   the resting text keeps its normal anti-aliasing. */
.hero-phrase.is-enter   { animation: hero-phrase-in 0.6s; will-change: transform, opacity; }
.hero-phrase.is-leaving { animation: hero-phrase-out 0.6s both; will-change: transform, opacity; }
@keyframes hero-phrase-in {
  0%   { opacity: 0; transform: translateY(-100%); }
  60%  { opacity: 1; transform: translateY(20%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hero-phrase-out {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(120%); }
  100% { opacity: 0; transform: translateY(100%); }
}

/* Figma 2325:34411: logical box h-[6.498px], full phrase width; the
   exported SVG bleeds past it by Figma's own insets (-33.67% / -0.4% /
   -36.29% / -0.41%), which is why underline.svg is 265.6×11.04, not
   263.5×6.5. Rendered at its real bleed box rather than cropped. */
.hero-underline {
  position: relative;
  display: block;
  height: 6.5px;
  width: 100%;
  /* Shrinks to the active phrase's width from the left edge; same 0.6s as the
     phrase swap. .no-anim (set by script.js) makes load / resize / font-ready
     measurements jump instead of animate. */
  transform: scaleX(var(--underline-scale, 1));
  transform-origin: 0 50%;
  transition: transform 0.6s ease;
}
.hero-rotator.no-anim .hero-underline { transition: none; }
.hero-underline-img {
  position: absolute;
  top: -33.67%;
  right: -0.4%;
  bottom: -36.29%;
  left: -0.41%;
  width: 100.81%;
  height: 169.96%;
  display: block;
}

/* ── Description + checklist ─────────────────────────────── */
/* Figma 2325:34412: flex-col gap-[16px]; body1 16/24 #605f5f */
.hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.hero-desc,
.hero-check {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

.hero-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}
/* Figma: flex gap-[8px] items-start, icon size-[24px] */
.hero-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hero-check-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── CTA ─────────────────────────────────────────────────── */
/* Figma 2325:34433: flex gap-[24px] */
.hero-cta {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* "Daftar Jadi Agen!" — components/button-large: h-48 px-16 15/26 bold */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  min-width: 64px;
  padding: 0 var(--btn-px-fill);
  background: var(--primary);
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.hero-btn:hover { background: var(--primary-dark); }

/* Google Play badge — Figma 2325:34435, 144×48. Every dimension is in em off
   a 12px base (the "GET IT ON" size), so a smaller tier only has to change
   font-size: 9px gives Figma's exact 0.75× 108×36 badge (node 2355:9734).
   Figma uses Product Sans for the label — not on Google Fonts, so Public
   Sans stands in. */
.hero-store {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 12em;              /* 144 */
  height: 4em;              /* 48 */
  font-size: 12px;
  background: #000;
  border: 0.1em solid #a6a6a6;   /* 1.2px */
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.hero-store:hover { box-shadow: 0 4px 12px rgba(33, 43, 54, 0.24); }

.hero-store-icon {
  position: absolute;
  left: 0.7em;              /* 8.4 */
  top: 0.7em;               /* 8.4 */
  width: 2.1em;             /* 25.2 */
  height: 2.4em;            /* 28.8 */
  display: block;
}
.hero-store-text {
  position: absolute;
  left: 3.5em;              /* 42 */
  top: 0.4em;               /* 4.8 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;               /* 3.6 */
}
.hero-store-label {
  font-family: var(--font);
  font-size: 1em;
  font-weight: 400;
  line-height: normal;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Figma renders path90 inside a -scale-y-100 wrapper — the exported SVG is
   the un-flipped path, so flip it back here. */
.hero-store-wordmark {
  display: block;
  width: 7.4em;             /* 88.8 */
  height: 1.5em;            /* 18 */
  transform: scaleY(-1);
}

/* ── Right image ────────────────────────────────────────── */
/* Figma 2325:34436: size-[600px]. One flattened 2400×2400 webp (4×), like
   bosOnline's hero — not Figma's ~15 separate illustration layers.
   max-width + aspect-ratio (not width+height) so it shrinks fluidly when the
   row gets tight between tiers; content keeps its width. */
.hero-image {
  flex: 0 1 540px;
  max-width: 540px;
  min-width: 0;
  aspect-ratio: 1 / 1;
}
.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Hero responsive ──────────────────────────────────────
   Four explicit bosAgen Figma frames, literal values per tier, same
   40/24/24/16 padding schedule as the nav:
     node 2355:9701  @1024 — content 456 / image 382, everything "medium"
     node 2355:10326 @820  — content 394 / image 336, checklist dropped
     node 2355:10431 @768  — content 339 / image 314
     node 2355:10536 @375  — stacks to a column, CTA button stretches
   flex-basis always matches max-width per tier, so when a scrollbar or
   rounding eats a few px both items shrink proportionally instead of the
   image absorbing it all (bosOnline hero lesson). */

/* 1024 */
@media (max-width: 1024px) {
  .hero-inner   { padding: 0 40px; gap: 24px; }

  .hero-content { flex: 0 1 456px; max-width: 456px; gap: 24px; }
  .hero-title   { font-size: 36px; }

  .hero-body,
  .hero-checklist { gap: 12px; }
  .hero-desc,
  .hero-check   { font-size: 14px; line-height: 22px; }   /* desktop/body2 */
  .hero-check-icon { width: 20px; height: 20px; }

  .hero-cta     { gap: 20px; }
  /* components/button-medium */
  .hero-btn     { height: 36px; padding: 0 12px; font-size: 14px; line-height: 24px; }
  .hero-store   { font-size: 9px; }   /* → 108×36 */

  .hero-image   { flex: 0 1 382px; max-width: 382px; }
}

/* 820 — title lines tighten to gap-4, checklist is gone (description only) */
@media (max-width: 820px) {
  .hero-inner     { padding: 0 24px; }
  .hero-content   { flex-basis: 394px; max-width: 394px; gap: 20px; }
  .hero-title     { font-size: 32px; gap: 4px; }
  .hero-checklist { display: none; }
  .hero-image     { flex-basis: 336px; max-width: 336px; }
}

/* 768 */
@media (max-width: 768px) {
  .hero-content { flex-basis: 339px; max-width: 339px; }
  .hero-image   { flex-basis: 314px; max-width: 314px; }
}

/* Mobile, 375 reference — the row stacks into a column (content, then the
   image). flex-basis is reset because in a column it would size HEIGHT, not
   width (flex-basis axis-flip gotcha). The image is full width as in Figma,
   but capped at its native 600px box so 500–767px phones don't blow it up. */
@media (max-width: 767px) {
  .hero-section { padding: 24px 0; }   /* user: 24px top & bottom on mobile */

  .hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 16px;
  }
  .hero-content { flex: 0 0 auto; max-width: none; }

  /* The 375 frame (2355:10536) brings the checklist BACK (hidden at 820/768):
     16px icons, 4px icon→text gap, 10px between rows and under the
     description. Rows wrap to two lines at this width, as in Figma. */
  .hero-body      { gap: 10px; }
  .hero-checklist { display: flex; gap: 10px; }
  .hero-check     { gap: 4px; }
  .hero-check-icon { width: 16px; height: 16px; }

  .hero-cta     { width: 100%; }
  .hero-btn     { flex: 1 0 0; }

  .hero-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   Interactive Section  (Figma node 2349:16870)
   Card = "header-interactive" component (2346:15411)
═══════════════════════════════════════════════════════════ */

/* Figma (assembled page): pt-[8px] pb-[40px] — sits right under the hero's
   own 40px bottom padding. Line ornaments ("Vector 48", "line-7") skipped. */
.interactive-section { padding: 8px 0 40px; }

.interactive-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.interactive-inner { padding: 0 var(--nav-px); }

/* Figma: bg-white p-[32px] gap-[24px] rounded-[8px], w-[1164px] centered */
.interactive-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1164px;
  margin: 0 auto;
  padding: 32px;
  /* Figma: white at 45% — the page background shows through; the white
     TextFields and tab group inside are what read as solid */
  background: rgba(255,255,255,0.45);
  border-radius: 8px;
  /* Figma: shadow/card — 0 0 2px grey/20%, 0 12px 24px grey/12% */
  box-shadow: 0 0 2px rgba(145,158,171,0.2), 0 12px 24px rgba(145,158,171,0.12);
}

/* ── ToggleButtonGroup / ToggleButton ────────────────────── */
/* Figma 2346:15263: border grey/20% p-4 gap-4 rounded-8. Figma's stroke is
   INSIDE the box (group = 48 + 2×4 = 56 tall), so it's an inset shadow
   here rather than a border that would add 2px. */
.toggle-group {
  position: relative;          /* containing block for .toggle-indicator */
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--grey-20);
  border-radius: 8px;
}

/* Selected-tab pill — Figma: linear-gradient(135deg, #3F8BE7 → #065DC7)
   ("gradient/primary/bold"). One element shared by all tabs, slid under the
   selected one: script.js sets --ind-x / --ind-w from that tab's
   offsetLeft / offsetWidth, so it tracks every breakpoint's tab size. */
.toggle-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--ind-w, 0);
  transform: translateX(var(--ind-x, 0));
  background: linear-gradient(135deg, #3f8be7 0%, #065dc7 100%);
  border-radius: 8px;
  /* Figma: inner emboss only — inset 3px 2px 7px -4px black/25% (the outer
     drop shadow was removed from the component) */
  box-shadow: inset 3px 2px 7px -4px rgba(0,0,0,0.25);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* First placement (and resizes) jump instead of sliding in from 0 */
.toggle-group.no-anim .toggle-indicator { transition: none; }
/* Without JS there's no measured position — paint the gradient on the
   selected tab itself instead (has-indicator is added by script.js) */
.toggle-group:not(.has-indicator) .toggle-indicator { display: none; }
.toggle-group:not(.has-indicator) .toggle-btn[aria-selected="true"] {
  background: linear-gradient(135deg, #3f8be7 0%, #065dc7 100%);
  box-shadow: inset 3px 2px 7px -4px rgba(0,0,0,0.25);
}
/* Figma ToggleButton: flex-1 h-48 px-12 gap-8 rounded-8, subtitle2 14/22 */
.toggle-btn {
  position: relative;          /* above .toggle-indicator */
  z-index: 1;
  flex: 1 0 0;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.3s ease;
}
.toggle-btn:hover:not([aria-selected="true"]) { background: rgba(145,158,171,0.08); }
/* Figma: selected label is primary/contrast-text (white) on the gradient */
.toggle-btn[aria-selected="true"] { color: var(--white); }
.toggle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Each tab stacks its grey + white icon in one cell and crossfades them, in
   step with the indicator sliding underneath */
.toggle-icons {
  display: grid;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-icon {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
.toggle-icon--active,
.toggle-btn[aria-selected="true"] .toggle-icon { opacity: 0; }
.toggle-btn[aria-selected="true"] .toggle-icon--active { opacity: 1; }

/* Third tab says "Cek Tagihan" only on the 1440 frame, "PPOB" below */
.toggle-label-sm { display: none; }

/* Figma "Vector 416": 1px #E6E6E6 rule, full card width. Figma gives the
   line a 0-height box (the stroke bleeds ±0.5px), so the -1px margin keeps
   it from adding layout height. */
.interactive-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
}

/* ── Panel (one form per tab) ────────────────────────────── */
/* Figma 2346:15265: flex gap-24 items-end — fields + button in one row */
.interactive-panel {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.interactive-panel[hidden] { display: none; }

.interactive-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

/* ── Field (label + TextField) ───────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.field--grow   { flex: 1 1 0; }
.field--berat  { flex: 0 0 190px; }   /* Figma: w-[190px] */
.field--produk { flex: 0 0 408px; }   /* Figma: w-[408px] */

/* desktop/body1 16/24 #605f5f */
.field-label {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

/* Figma TextField: solid white (the card behind it is 45% white), wrap h-54
   px-14 rounded-8 with a 1px grey/20% outline, shadow 0 0 2px grey/20% +
   0 12px 24px -4px grey/12% */
.field-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--grey-20);
  border-radius: 8px;
  box-shadow: 0 0 2px rgba(145,158,171,0.2), 0 12px 24px -4px rgba(145,158,171,0.12);
}
/* Focused (Figma 2349:15910): 2px text/primary border — padding drops 1px
   so the text doesn't shift */
.field-box:focus-within {
  border: 2px solid var(--text);
  padding: 0 13px;
}
.field-box--select { padding-right: 44px; }   /* room for the select arrow */
.field-box--select:focus-within { padding-right: 43px; }

.field-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text);
  text-overflow: ellipsis;
}
.field-input::placeholder { color: var(--text-disabled); opacity: 1; }
.field-input[readonly] { cursor: pointer; }
.field-box--select .field-input { cursor: pointer; }

/* Select arrow — Figma: 20px, pr-[10px] from the right edge. The up-arrow
   variant is Figma's own Focused export, shown while the menu is open. */
.field-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.field-arrow--up,
.field-box.is-open .field-arrow { display: none; }
.field-box.is-open .field-arrow--up { display: block; }

/* "Kg" Label — Figma Variant=Filled, Color=Primary: h-24 px-6 rounded-6,
   label-text Bold 12/20 white; start adornment mr-8 */
.field-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  margin-right: 8px;
  background: var(--primary);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: var(--white);
}

/* ── Menu (open select) — Figma 2349:16075 ───────────────── */
/* Paper: white 90% + backdrop blur, shadow/dropdown, p-4 gap-4. The red /
   cyan corner glows are Figma's own blur exports, clipped by the paper. */
/* Figma places the menu flush under the field (top-[86px] = label 24 + gap
   8 + field 54). The box is always focused (2px border) while open, so the
   menu is offset by that border to line up with the outer edge. */
.field-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: -2px;
  right: -2px;
  z-index: 20;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
  /* Glows: Figma's 80px boxes at -16px past the top-right (cyan) and
     bottom-left (red) corners, each image bleeding -100% → 240px. */
  background:
    url("asset/vector/interactive/menu-cyan-blur.svg") no-repeat right -96px top -96px / 240px 240px,
    url("asset/vector/interactive/menu-red-blur.svg")  no-repeat left -96px bottom -96px / 240px 240px,
    rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  box-shadow: 0 0 2px rgba(145,158,171,0.24), -20px 20px 40px -4px rgba(145,158,171,0.24);
}
.field-box.is-open .field-menu { display: flex; }
/* Raise the open box so the next field never paints over its menu */
.field-box.is-open { z-index: 30; }

/* MenuItem: px-8 py-6 rounded-6, body2 14/22; selected = action/selected bg
   + SemiBold */
.field-option {
  flex-shrink: 0;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.field-option:hover,
.field-option.is-highlighted { background: rgba(145,158,171,0.08); }
.field-option[aria-selected="true"] {
  background: rgba(145,158,171,0.16);
  font-weight: 600;
}
.field-option--empty {
  color: var(--text-disabled);
  cursor: default;
}
.field-option--empty:hover { background: none; }

/* ── Submit button — Figma ✳️ action: h-54 w-167 button-large ─ */
.interactive-btn {
  flex: 0 0 167px;
  height: 54px;
  padding: 0 var(--btn-px-fill);
  background: var(--primary);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.interactive-btn:hover { background: var(--primary-dark); }
/* Nothing to process yet: script.js disables it until every field in its panel has a value */
.interactive-btn:disabled,
.interactive-btn:disabled:hover {
  background: #b9d4f5;
  cursor: not-allowed;
}
.interactive-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ── Interactive responsive ───────────────────────────────
   Five Figma frames: 1440 (2349:16870), 1024 (2355:10641, still the
   component's desktop row), 820 (2355:10888) / 768 (2355:11187) — detached
   frames with the fields in one row and a full-width button UNDER them —
   and 375 (2356:11363) with everything stacked.
   The 820 layout starts at 900, not 820 (same call as the nav): the
   desktop row squeezes each select to ~107px at 821. */

/* 1024 — card goes full width; third tab reads "PPOB" */
@media (max-width: 1024px) {
  .interactive-inner { padding: 0 40px; }
  .interactive-card  { max-width: none; }
  .toggle-label-lg   { display: none; }
  .toggle-label-sm   { display: inline; }
}

/* 820 frame — p-16 card, 14/22 labels, 40px inputs, fields in equal
   columns (gap 16) and a full-width medium button below */
@media (max-width: 900px) {
  .interactive-inner { padding: 0 24px; }
  .interactive-card  { padding: 16px; }

  .interactive-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .interactive-fields { gap: 16px; }
  .field--berat,
  .field--produk { flex: 1 1 0; }

  .field-label { font-size: 14px; line-height: 22px; }
  .field-box   { height: 40px; }

  /* components/button-medium */
  .interactive-btn {
    flex: 0 0 auto;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 24px;
  }
}

/* 768 frame — small toggle buttons: h-36 px-8, 20px icons */
@media (max-width: 768px) {
  .toggle-btn   { height: 36px; min-width: 36px; padding: 0 8px; }
  .toggle-icons { width: 20px; height: 20px; }
}

/* 375 frame — px-16; card gap 16; tabs text-only; fields stacked. The
   flex-basis on the fields is reset because in a column it would size
   HEIGHT (flex-basis axis-flip gotcha). */
@media (max-width: 767px) {
  .interactive-inner { padding: 0 16px; }
  .interactive-section { padding-bottom: 24px; }
  .interactive-card  { gap: 16px; }

  .toggle-icons { display: none; }

  .interactive-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .field--grow,
  .field--berat,
  .field--produk { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
   Why Section  (Figma node 2325:34591)
═══════════════════════════════════════════════════════════ */

/* Figma: px-80 py-40, no own background (page --page-bg shows through).
   "Vector 48" ornament in the tier frames skipped, like the other sections. */
.why-section { padding: 40px 0; }

.why-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}

/* Figma: flex gap-[40px] items-center — intro block | benefit cards */
.why-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 var(--nav-px);
}

/* Figma 2325:34592: flex-col gap-24, w-[355px] */
.why-intro {
  flex: 0 0 355px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* SemiBold 48 / 1.3 / -0.96px (-2%) #202939 — two lines at 1440
   ("Keunggulan" over "Jadi Mitra", gap 8), one line from 1024 down */
.why-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
}
/* "Keunggulan" + its underline stacked (Figma 2325:34594) */
.why-title-word {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.why-title-rest { white-space: nowrap; }

/* Vector 414: logical box h-[6.498px], full word width; the export
   (267.85×11.04) bleeds past it by Figma's insets -33.73% / -0.4% /
   -36.19% / -0.3% — rendered at its real bleed box, as in the hero. */
.why-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.why-underline-img {
  position: absolute;
  top: -33.73%;
  right: -0.4%;
  bottom: -36.19%;
  left: -0.3%;
  width: 100.7%;
  height: 169.92%;
  display: block;
}

/* body1 16/24 #605f5f */
.why-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

/* ── Benefit cards ───────────────────────────────────────── */
/* Figma 2325:34599: flex gap-[32px] items-center; cards flex-1.
   stretch (not center) so the dividers stay equal length when a narrow
   width (1025–~1150) wraps one card's title — content is still centred
   inside each card via justify-content (Figma card: justify-center), so
   it looks identical whenever the cards are the same height. */
.why-benefits {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 32px;
  list-style: none;
}

/* Card: flex-col gap-12 p-24 justify-center; cards 1–2 carry a 2px
   #cde4ff divider */
.why-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}
.why-card:not(:last-child) { border-right: 2px solid #cde4ff; }

/* Benefit: icon over title, gap 16 */
.why-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* User-supplied gradient icons (asset/vector/icon/), 40×40 */
.why-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* SemiBold 22/28 -0.44px #202939 */
.why-card-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--heading);
}
/* body1 16/24 #605f5f */
.why-card-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

/* ── Why responsive ───────────────────────────────────────
   Frames: 2357:13091 @1024, 2361:13130 @820, 2361:13168 @768 (its 48px
   title is a Figma slip — user chose 32px, same as 820), 2370:13550 @375. */

/* 1024 — stacks: centered one-line heading + intro above the card row */
@media (max-width: 1024px) {
  .why-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 40px;
  }
  /* flex-basis 355px would size HEIGHT in a column (axis-flip gotcha) */
  .why-intro {
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
  }
  .why-title { flex-direction: row; font-size: 36px; }

  .why-desc,
  .why-card-desc   { font-size: 14px; line-height: 22px; }   /* desktop/body2 */
  .why-card-title  { font-size: 20px; line-height: 1.25; }

  .why-benefits { flex: 0 0 auto; }
}

/* 820 / 768 — tighter: gap 24, card p-16, 32px icons */
@media (max-width: 820px) {
  .why-inner    { gap: 24px; padding: 0 24px; }
  .why-intro    { gap: 16px; }
  .why-title    { font-size: 32px; }
  .why-benefits { gap: 16px; }
  .why-card     { padding: 16px; }
  .why-icon     { width: 32px; height: 32px; }
}

/* 375 — cards stack; dividers move to the bottom; a 28px icon sits beside
   the title (row gap 12 — Figma 2370:13550, updated from 40 / 16). Figma
   has card 1's divider at 1px and card 2's at 2px — normalised to 2px
   like every other tier. */
@media (max-width: 767px) {
  .why-section { padding: 24px 0; }
  .why-inner   { padding: 0 16px; }
  .why-title   { font-size: 24px; line-height: 1.4; }

  .why-benefits {
    flex-direction: column;
    align-items: stretch;
  }
  .why-card { flex: 0 0 auto; padding: 16px 16px 24px; }
  .why-card:not(:last-child) {
    border-right: 0;
    border-bottom: 2px solid #cde4ff;
  }
  .why-card:last-child { padding-bottom: 16px; }

  .why-card-head {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .why-icon { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   How Section  (Figma How-1…How-4: 2374:13774, 2308:12501,
   2308:12703, 2308:12979) — "Langkah Mudah Untuk Mulai"
   Responsive tiers are at the end of this block (designed in code — see
   docs/prd-how-section.md). The flip cards live in
   asset/components/{flip-card,feature-card,payment-commission}/.
═══════════════════════════════════════════════════════════ */

/* Figma: px-80 py-40, no own background; "line-13" / "Vector 48" ornaments skipped */
.how-section { padding: 40px 0; }

.how-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.how-inner { padding: 0 var(--nav-px); }

/* ── Header — Figma 2374:13775: flex-col gap-24, centred ── */
.how-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* SemiBold 48 / 1.3 / -0.96px; "Langkah Mudah" carries the underline */
.how-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.how-title-word {
  display: flex;
  flex-direction: column;
}

/* Vector 414 under "Langkah Mudah": logical box h-6.498, the export
   (351×11.04) bleeds by Figma's insets -33.52% / -0.3% / -36.36% / -0.28% */
.how-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.how-underline-img {
  position: absolute;
  top: -33.52%;
  left: -0.28%;
  width: 100.58%;
  height: 169.88%;
  display: block;
}

.how-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
  text-align: center;
}

/* ── Stepper — "Container" component 2257:7150 ─────────── */
/* Figma: 4 items flex-1 (302 wide) gap-24, 40px under the header — the
   desktop row is Figma's 1280 (the page is zoomed below 1440), so each
   text column gets its full 210 */
.how-steps {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

/* Container: index ring + content, gap-12 */
.how-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.how-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 8px; }

/* Index — 40px ring, 1px border, Public Sans Medium 18/1.5.
   Selected: Information/03 ring #d1e4f5, Information/02 number #238ced;
   otherwise Dark/03 #bdbfc2 for both */
.how-step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid #bdbfc2;
  border-radius: 49px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #bdbfc2;
  transition: border-color 0.3s, color 0.3s;
}

/* Content — 1px bottom border (#b9bbc0); the selected item swaps that
   border for the loading bar (.how-step-bar) */
.how-step-content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #b9bbc0;
  transition: border-color 0.3s;
}

.how-step-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Title SemiBold 18/28 -0.36px; sub Regular 12/24 */
.how-step-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: #bdbfc2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}
.how-step-sub {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  color: #b9bbc0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}
.how-step:hover:not([aria-selected="true"]) .how-step-title { color: #8f9297; }
.how-step:hover:not([aria-selected="true"]) .how-step-sub   { color: #9a9ca1; }

/* basil:arrow-right-outline 32px — grey/blue pair crossfades on select */
.how-step-arrows {
  display: grid;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.how-step-arrow {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}
.how-step-arrow--active { opacity: 0; }

.how-step[aria-selected="true"] .how-step-index   { border-color: #d1e4f5; color: #238ced; }
.how-step[aria-selected="true"] .how-step-title   { color: var(--heading); }
.how-step[aria-selected="true"] .how-step-sub     { color: var(--body-text); }
.how-step[aria-selected="true"] .how-step-arrow   { opacity: 0; }
.how-step[aria-selected="true"] .how-step-arrow--active { opacity: 1; }
.how-step[aria-selected="true"] .how-step-content { border-bottom-color: transparent; }

/* Loading bar — replaces the selected item's bottom border. Track is the
   Figma selected border colour (#a8ceff); the fill (primary) grows with
   --how-progress (0→1), written every frame by script.js. 2px tall (the
   Figma border is 1px) so it reads as a bar, overlapping the 1px slot. */
.how-step-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: #a8ceff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.how-step-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleX(var(--how-progress, 0));
  transform-origin: left center;
}
.how-step[aria-selected="true"] .how-step-bar { opacity: 1; }

/* ── Panels — one horizontal track ─────────────────────── */
/* Figma: panel 40px under the stepper. The viewport clips the track; every
   panel stretches to the tallest one so the page never jumps on slide. */
.how-viewport {
  margin-top: 40px;
  overflow: hidden;
  border-radius: 16px;
}
.how-track {
  display: flex;
  gap: 24px;
  transform: translateX(calc(var(--how-index, 0) * (-100% - 24px)));
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Figma step-N: bg #e9f4ff, r-16, px-56 py-32, justify-between */
.how-panel {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 56px;
  background: #e9f4ff;
  border-radius: 16px;
}

/* Left column — Figma w-599, flex-col gap-32 (text block, then CTA) */
.how-panel-text {
  flex: 0 1 599px;            /* shrinks between 1025 and ~1280 so the row fits */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.how-panel-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* Icon tile — white 75%, p-8, r-8, 60px gradient icon */
.how-icon-tile {
  display: inline-flex;
  padding: 8px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
}
.how-icon { display: block; width: 60px; height: 60px; }

/* SemiBold 36 / 1.3 / -0.72px with a 1px #b9ddfe rule, pb-16 */
.how-panel-title {
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #b9ddfe;
  font-family: var(--font);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.how-panel-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

/* CTA — Figma text button: h-48 px-10 gap-8 r-8, Bold 15/26 primary,
   24px end arrow. Shared with the What section's .what-cta (base only;
   each section's tier overrides stay scoped to its own class). */
.how-cta,
.what-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 10px;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.how-cta:hover,
.what-cta:hover { background: rgba(63, 139, 231, 0.08); }
.how-cta-arrow,
.what-cta-arrow {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
}
.how-cta:hover .how-cta-arrow,
.what-cta:hover .what-cta-arrow { transform: translateX(3px); }

.how-visual { flex-shrink: 0; }

/* ── Shared preview-card chrome (every How preview, incl. the flip cards) ── */
/* Figma Frame 801 / *-normal: white, 1px #e6e6e6, r-22, p-32, gap-24, w-407.
   Figma strokes sit INSIDE the box, so padding is 31 + the 1px border —
   that keeps the 343px content width (and card heights) Figma has. */
.mock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 407px;
  padding: 31px;
  background: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: 22px;
}
/* Card title row — Inter Bold 20, pt-10 pb-24, 1px #e6e6e6 rule */
.mock-card-head {
  width: 100%;
  padding: 10px 0 24px;
  border-bottom: 1px solid #e6e6e6;
}
.mock-card-title {
  font-family: 'Inter', var(--font);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #202939;
  white-space: nowrap;
}
/* Label + input stack — gap-4 */
.mock-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
/* Headline 1/14-Medium: Inter Medium 14/18 */
.mock-label {
  font-family: 'Inter', var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #202939;
}
/* Preview button — button-large, h-48 r-8, full width. Demo only. */
.mock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--primary);
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
button.mock-btn:hover  { background: var(--primary-dark); }
button.mock-btn:active { transform: scale(0.98); }
.mock-btn--split { justify-content: space-between; }

/* ── 01 Register form preview — Figma 2374:13799 ───────── */
.how-register-logo {
  position: relative;
  width: 165px;
  height: 45px;
  flex-shrink: 0;
}
.how-register-logo-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 40.46px;
  height: 45px;
}
.how-register-logo-word {
  position: absolute;
  left: 50px;
  top: 11.25px;
  width: 115px;
  height: 25px;
}
/* Tagline — Red Hat Display Medium 7.5 / 0.6px, tertiary #576a82 */
.how-register-logo-tag {
  position: absolute;
  left: 50px;
  top: 35px;
  font-family: 'Red Hat Display', var(--font);
  font-size: 7.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  color: #576a82;
  white-space: nowrap;
}
.how-register-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
/* Body 2/14-Medium: Public Sans Medium 14/20 (this form isn't Inter) */
.how-register .mock-label {
  font-family: var(--font);
  line-height: 20px;
}
/* Figma Text Input: 2px #e6e6e6, r-6, px-12 — 48 / 52 tall as drawn */
.mock-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 12px;
  background: var(--white);
  border: 2px solid #e6e6e6;
  border-radius: 6px;
  transition: border-color 0.15s;
}
.mock-input-box--48 { height: 48px; }
.mock-input-box--52 { height: 52px; }
.mock-input-box:focus-within { border-color: var(--primary); }
.mock-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #202939;
}
.mock-input::placeholder { color: #b9bbc0; opacity: 1; }
.mock-input-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }

/* ── 04 Statistik Agen preview — Figma 2308:13162 ──────── */
/* "Chart Bulanan": 343×289, 1px #e6e6e6, r-6, px-12 py-16. Its content
   (275) is taller than the padded box, so — as in Figma — it centres and
   spills 9px into the padding top and bottom. */
.how-chart-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 343px;
  height: 289px;
  padding: 15px 11px;          /* Figma px-12 py-16 with the 1px stroke inside */
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}
.how-chart-title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #62676f;
}
.how-chart-sub {
  margin-top: 4px;
  font-family: 'Inter', var(--font);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: #62676f;
}
/* Plot — 319×195, 1px #f1f1f1, r-4. Coded SVG (not an image). */
.how-chart {
  position: relative;
  flex-shrink: 0;
  width: 319px;
  height: 195px;
  margin-top: 10px;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: pan-y;
}
.how-chart:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.how-chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.how-chart-y text {
  font-family: 'Inter', var(--font);
  font-size: 10px;
  fill: #8d8d8d;
  text-anchor: middle;
  dominant-baseline: middle;
}
.how-chart-grid line { stroke: #b0d4ff; stroke-width: 1; stroke-dasharray: 2 2; }
.how-chart-line { fill: none; stroke: var(--primary); stroke-width: 2; }
.how-chart-stick { fill: #79b4f2; }
.how-chart-dot   { fill: #193d7d; }
.how-chart-date {
  font-family: 'Inter', var(--font);
  font-size: 8px;
  font-weight: 500;
  fill: #bdbfc2;
  text-anchor: middle;
}
/* X labels — Inter 10 #193d7d, centred on Figma's own label positions */
.how-chart-x {
  position: relative;
  flex-shrink: 0;
  width: 319px;
  height: 22px;
}
.how-chart-x span {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-family: 'Inter', var(--font);
  font-size: 10px;
  line-height: 12px;
  color: #193d7d;
}
/* "Pendapatan Komisi" card — #f5f5f5, 2px #e6e6e6, r-6, p-12, gap-12 */
.how-income {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 343px;
  padding: 10px;               /* Figma p-12 with the 2px stroke inside → 96 tall */
  background: #f5f5f5;
  border: 2px solid #e6e6e6;
  border-radius: 6px;
}
.how-income-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #62676f;
  white-space: nowrap;
}
.how-income-date { font-size: 14px; font-weight: 400; }
.how-income-value {
  display: block;
  padding: 8px 10px;           /* Figma py-10 px-12 with the 2px stroke inside → 40 tall */
  background: var(--white);
  border: 2px solid #e6e6e6;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #202939;
}

/* Previews are fixed-size component replicas (407 card / 480 flip box), so
   on narrower panels they are shrunk as a whole, not reflowed. `zoom`
   (unlike transform) also shrinks the layout box, so panel heights stay
   honest. script.js (fitPreviews) writes both factors:
     row layout    — the tier's Figma card width (--how-card-w) / 407 for
                     every preview, so all front cards match the design;
                     1025–1279 has no tier → ~46% of the row
     column (≤767) — cards fill the panel (w / 407); flip boxes keep their
                     tilted back layer inside it (w / 480) */
.how-visual             { zoom: var(--how-zoom, 1); }
.how-panel > .flip-card { zoom: var(--how-flip-zoom, 1); }

/* Compact-stepper caption — only shown ≤767 */
.how-step-caption { display: none; }

/* ── How responsive ───────────────────────────────────────
   Figma: 1024 2372:13681, 820 2380:13902, 768 2381:13996, 375 2381:14103
   (revised 2026-10-22). 1024–768 keep text | preview side by side with the
   stepper's ring above its text; 375 stacks and collapses the stepper to
   a row of rings. */

/* 1024 — px-40 py-40, gap-32; title 36; stepper gap-24, Content h-95 with
   a 24px arrow; panel px-32 py-24, text 471, card 350 (0.86) */
@media (max-width: 1024px) {
  .how-section { --how-card-w: 350px; }
  .how-inner { padding: 0 40px; }

  .how-header { gap: 16px; }
  .how-title { font-size: 36px; }
  .how-desc  { font-size: 14px; line-height: 22px; }

  .how-steps { gap: 24px; margin-top: 32px; }
  .how-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .how-step-content {
    flex: 0 0 auto;
    width: 100%;
    min-height: 95px;
    gap: 8px;
  }
  .how-step-title {
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
  }
  .how-step-sub { white-space: normal; }
  .how-step-arrows { width: 24px; height: 24px; }

  .how-viewport { margin-top: 32px; }
  .how-panel { padding: 24px 32px; }
  .how-panel-text { flex: 0 1 471px; gap: 24px; }
  .how-panel-title { font-size: 28px; }
  .how-panel-desc  { font-size: 14px; line-height: 1.4; }
}

/* 820 — px-24, gap-24; title 32; stepper gap-16, no arrows, text top-
   aligned and every bottom border level; panel px-24 py-16, text 370,
   56px icon tile, title 24, card 277 */
@media (max-width: 900px) {
  .how-section { --how-card-w: 277px; }
  .how-inner { padding: 0 24px; }

  .how-title { font-size: 32px; }

  .how-steps { gap: 16px; margin-top: 24px; }
  .how-step { align-self: stretch; }
  .how-step-content {
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
  }
  .how-step-arrows { display: none; }

  .how-viewport { margin-top: 24px; }
  .how-panel { padding: 16px 24px; }
  .how-panel-text { flex-basis: 370px; }
  .how-icon { width: 40px; height: 40px; }
  .how-panel-title { font-size: 24px; }
}

/* ≤800 — compact stepper (design of frame 2381:13996, applied from 800):
   four 40px rings joined by lines (#b9ddfe after the selected ring,
   #bdbfc2 otherwise); each line is that step's loading bar and lines of
   finished steps stay full. The selected step's title/subtitle show below,
   left-aligned (centred at ≤767). The panel keeps the 820 layout until 768. */
@media (max-width: 800px) {
  .how-steps { gap: 8px; }
  .how-step {
    flex-direction: row;
    align-items: center;
    align-self: auto;
    gap: 8px;
  }
  .how-step-content {
    align-self: center;
    height: 0;
    border-bottom-color: #bdbfc2;
  }
  /* 04 has no line after it */
  .how-step:last-child { flex: 0 0 auto; }
  .how-step:last-child .how-step-content { flex: 0 0 0; border: 0; }
  .how-step:last-child .how-step-bar { display: none; }
  /* Track #b9ddfe (Figma Vector 416); finished steps' bars stay full */
  .how-step-bar { background: #b9ddfe; }
  .how-step.is-done .how-step-bar { opacity: 1; }
  .how-step.is-done .how-step-bar::after { transform: none; }
  /* Step text stays in the tab for screen readers, mirrored by the caption */
  .how-step-info {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .how-step-caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
  }
  .how-step-caption.is-swapping { animation: how-caption-in 0.35s ease-out; }
  .how-step-caption-title {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--heading);
  }
  .how-step-caption-sub {
    font-family: var(--font);
    font-size: 12px;
    line-height: 24px;
    color: var(--body-text);
  }
}

/* 768 — step titles 14; 48px icon tile (p-6); CTA drops to button-medium
   (h-36 px-8, 14/24, 20px arrow); card 250 */
@media (max-width: 768px) {
  .how-section { --how-card-w: 250px; }

  .how-icon-tile { padding: 6px; }
  .how-icon { width: 36px; height: 36px; }
  .how-cta {
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 24px;
  }
  .how-cta-arrow { width: 20px; height: 20px; }
}

/* 375 — py-24 px-16, title 24. The caption centres. Panel stacks (card
   first) with p-16 gap-32, no icon tile, centred 20px title, CTA
   button-small. */
@media (max-width: 767px) {
  .how-section { padding: 24px 0; }
  .how-inner { padding: 0 16px; }
  .how-title { font-size: min(24px, 7vw); }   /* one line down to 320 */
  .how-step-caption { align-items: center; text-align: center; }
  .how-step-caption-title,
  .how-step-caption-sub { white-space: nowrap; }

  .how-track { gap: 16px; transform: translateX(calc(var(--how-index, 0) * (-100% - 16px))); }
  .how-panel {
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    padding: 16px;
  }
  /* 599/471/370 basis would size HEIGHT in a column (axis-flip gotcha) */
  .how-panel-text { flex: 0 0 auto; width: 100%; }
  .how-icon-tile { display: none; }
  .how-panel-title { font-size: 20px; text-align: center; }
  .how-panel-desc  { text-align: center; }
  .how-cta {
    align-self: center;
    height: 30px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 22px;
  }
  .how-cta-arrow { width: 18px; height: 18px; }
}
@keyframes how-caption-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   What Section  (Figma 2342:9202) — "Kelola Usahamu Tanpa Perlu
   Catat Manual". Tiers: 1024 2388:14249, 820 2389:14944, 768
   2389:15241, 375 2389:15537. Two rows of pitch + operable preview;
   the previews are .flip-cards (asset/components/order-history,
   selling-price) and flip on scroll ≥1025 / on tap + every 5 s ≤1024
   (script.js "What section").
═══════════════════════════════════════════════════════════ */

/* Figma: px-80 py-40, gap-40 (header → rows → rows) */
.what-section {
  padding: 40px 0;
  /* Preview panel as each Figma tier draws it: width × height, and the
     scale of the 472×552 component inside it (see .what-panel) */
  --what-w: 468;
  --what-h: 455.8;
  --what-c: 0.7622;
}
.what-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.what-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 var(--nav-px);
}

/* ── Header — 2 left-aligned lines, SemiBold 48 / 1.3 / −2%, gap-16 ── */
.what-header { display: flex; }
.what-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.what-title-word,
.what-title-rest { white-space: nowrap; }
.what-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Kelola Usahamu": logical box h-6.498, the export
   bleeds by Figma's insets −33.42% / −0.3% / −36.39% / −0.29% */
.what-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.what-underline-img {
  position: absolute;
  top: -33.42%;
  left: -0.29%;
  width: 100.59%;
  height: 169.81%;
  display: block;
}

/* ── Rows — preview | text, alternating (row 2 mirrors) ── */
.what-rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.what-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 100px;                  /* Figma 1440: panel 468 → text at x=568 */
}
/* Row 2: text at the left edge, panel at the right edge */
.what-row--reverse { flex-direction: row-reverse; justify-content: space-between; }

/* Preview panel — #e9f4ff, r-21.74, the 472×552 component centred. The
   panel keeps its tier's Figma proportions (--what-w × --what-h) at
   whatever width its column gets; the component inside is shrunk with
   `zoom` (layout box shrinks too; inputs stay operable) to
   --what-c × (panel width / --what-w). script.js writes --what-fit =
   panel width / --what-w, so at the design width it is exactly 1. */
.what-media {
  flex: 0 1 calc(var(--what-w) * 1px);
  min-width: 0;
}
.what-panel {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: calc(var(--what-w) / var(--what-h));
  background: #e9f4ff;
  border-radius: 21.743px;
}
.what-panel .flip-card { zoom: calc(var(--what-c) * var(--what-fit, 1)); }

/* Text column — width = its one-line title (Figma 591 / 603), gap-32 */
.what-text {
  flex: 0 0 auto;
  width: min-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.what-text-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.what-text-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* User icons (asset/vector/icon/history|upsell.svg) carry the white 75%
   tile themselves — 76 = 8 + 60 + 8 */
.what-icon { display: block; width: 76px; height: 76px; flex-shrink: 0; }
.what-text-title {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.what-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}
/* Check list — 24px gradient check (= hero/check.svg), gap-16 */
.what-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.what-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}
.what-point-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }

/* ── What responsive ──────────────────────────────────── */



/* 1024 tier (with the block below) — columns shrink and the row titles may
   wrap */
@media (max-width: 1024px) {
  .what-row { gap: 40px; }
  .what-text {
    flex: 0 1 603px;
    width: auto;
    min-width: 0;
  }
  .what-text-title { white-space: normal; }
}

/* 1024 — px-40, gaps 32; title 36 (2 lines, gap-8); panel 430.7 (0.70);
   text gap-24, 64px icon, title 28, body 14/1.4, 20px checks (gap-8) */
@media (max-width: 1024px) {
  .what-section { --what-w: 377; --what-h: 367.18; --what-c: 0.614; }
  .what-inner { gap: 32px; padding: 0 40px; }
  .what-title { gap: 8px; font-size: 36px; }
  .what-rows { gap: 32px; }

  .what-text { flex: 1 1 0; gap: 24px; }
  .what-icon { width: 64px; height: 64px; }
  .what-text-title { font-size: 28px; }
  .what-desc,
  .what-point { font-size: 14px; line-height: 1.4; }
  .what-point { gap: 8px; }
  .what-point-icon { width: 20px; height: 20px; }
}

/* 820 / 768 — px-24; the title is ONE centred line (32, gap-8); rows
   gap-24, columns gap-32; panel 312.65 (0.51); 48px icon beside a 24/1.5
   title; text gap-16 */
@media (max-width: 900px) {
  .what-section { --what-w: 312.65; --what-h: 304.5; --what-c: 0.5092; }
  .what-inner { padding: 0 24px; }
  .what-header { justify-content: center; }
  .what-title {
    flex-direction: row;
    align-items: flex-start;
    font-size: 32px;
  }
  .what-rows { gap: 24px; }
  .what-row { gap: 32px; }

  .what-text { gap: 16px; }
  .what-text-top {
    flex-direction: row;
    gap: 16px;
    width: 100%;
  }
  .what-icon { width: 48px; height: 48px; }
  .what-text-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 24px;
    line-height: 1.5;
  }
}

/* 375 — py-24 px-16, gap-24; title 24 on 2 left lines; rows stack with
   the preview first (panel full width, 0.56) and 16 to the text; no icon;
   20/1.5 title; CTA becomes a full-width outlined button */
@media (max-width: 767px) {
  /* Figma draws the two 375 panels differently: 343×336 with the card at
     0.547, then 343×344.8 with it at 0.5675 */
  .what-section { padding: 24px 0; --what-w: 288; --what-h: 282.13; --what-c: 0.4593; }
  .what-row--reverse { --what-h: 289.49; --what-c: 0.4765; }
  .what-inner { gap: 24px; padding: 0 16px; }
  .what-header { justify-content: flex-start; }
  .what-title {
    flex-direction: column;
    font-size: min(24px, 7vw);
  }

  .what-row,
  .what-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  /* 430 / 312 basis would size HEIGHT in a column (axis-flip gotcha) */
  .what-media,
  .what-text { flex: 0 0 auto; width: 100%; }
  /* Figma centres a 288-wide panel in the 343 column (84%); that
     proportion holds on the way up to 767, capped so the preview never
     outgrows its 1440 size */
  .what-media { width: 84%; max-width: 520px; align-self: center; }
  .what-icon { display: none; }
  .what-text-title { font-size: 20px; }

  .what-cta {
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    border: 1px solid rgba(63, 139, 231, 0.48);
  }
}

/* ═══════════════════════════════════════════════════════════
   Target Section  (Figma 2342:9785) — "Siapapun Bisa Jadi Agen"
   Tiers: 1024 2389:15911, 820 2397:16005, 768 2397:16100, 375
   2397:16193. The illustration (art 2342:9794) is layered:
   asset/img/target/main.webp (orbits + photo) plus 8 service-chip images
   placed in % of the 500 × 352 box, with a hover pop-in (CSS only); the
   four cards are plain markup. Icons: asset/vector/icon/{cell,shop,housewife}.svg and
   store.png (the 160px bag = 4× of its 40px slot).
═══════════════════════════════════════════════════════════ */

/* Figma: px-80 py-40, gap-40 */
.target-section { padding: 40px 0; }
.target-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.target-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 var(--nav-px);
}

/* ── Header — centred, gap-24 ── */
.target-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.target-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.target-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Siapapun": logical box h-6.498, the export bleeds by
   Figma's insets −33.73% / −0.51% / −35.94% / −0.47% */
.target-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.target-underline-img {
  position: absolute;
  top: -33.73%;
  left: -0.47%;
  width: 100.98%;
  height: 169.67%;
  display: block;
}
.target-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
  text-align: center;
}

/* ── Body — art left, 2×2 cards right ── */
.target-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Art box 546×384.4 in Figma (node 2316:18957; 546 + 73 + 661 = 1280) —
   exact on the desktop tier's 1280 row */
.target-art {
  position: relative;
  flex: 0 1 546px;
  min-width: 0;
  aspect-ratio: 500 / 352;
}
.target-art-main {
  display: block;
  width: 100%;
  height: auto;
}
/* Chips: left / top / width are % of the 500 × 352 Figma art (set inline),
   height follows each image's ratio — every tier just scales the box */
.target-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
}
/* Hover — ported from bosonline.id's .whyit-image-box (is-hovering / is-leaving
   toggled from script.js "Target art", not :hover, so a restart is reliable).
   The chips are always in place at rest. Hover-in bounces them one after
   another, clockwise (100 ms apart, like the whyit icons), and they stay
   slightly lifted while hovered; leave settles them back over 700 ms (the
   bubbling's dissolve curve). Mouse only — touch keeps the static design.
   Motion is not gated on prefers-reduced-motion (owner's call, as elsewhere). */
.target-art.is-hovering .target-chip {
  animation: target-chip-bounce 0.6s ease-out both;
  animation-delay: calc(var(--i) * 100ms);
}
.target-art.is-leaving .target-chip {
  animation: target-chip-settle 700ms cubic-bezier(0.8, 0, 0.5, 1) both;
}
@keyframes target-chip-bounce {
  0%   { transform: translateY(0)    scale(1);    }
  30%  { transform: translateY(-8px) scale(1.08); }
  60%  { transform: translateY(2px)  scale(0.98); }
  100% { transform: translateY(0)    scale(1.03); }   /* held while hovered */
}
@keyframes target-chip-settle {
  from { transform: scale(1.03); }
  to   { transform: scale(1);    }
}

/* Benefits Section — 2 × 2 grid 661 wide, gap 24 → cards 318.5 × 176 */
.target-benefits {
  flex: 0 0 auto;
  width: 661px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Card — #e9f4ff, 2px #cde4ff, r-8, p-16, gap-12 (Figma strokes sit
   inside the box: padding is 14 + the 2px border; 14 / 6 below) */
.target-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background: #e9f4ff;
  border: 2px solid #cde4ff;
  border-radius: 8px;
}
/* Benefit: icon 40 above the title, gap-16 */
.target-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.target-card-icon { display: block; width: 40px; height: 40px; flex-shrink: 0; }
/* SemiBold 22/28, −2% */
.target-card-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.target-card-desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--body-text);
}

/* ── Target responsive ────────────────────────────────── */

/* 1024 — no 2 × 2 grid: art left, ONE column of cards 405 wide (Figma
   1024 draws 511 + 28 + 405 = 944). Cards put the 28px icon beside the
   title (gap 16), p-16, desc 14/1.4, gap-16 between cards. */
@media (max-width: 1024px) {
  /* Figma's 14px description is drawn on 20px lines (frames 112 / 92 tall) */
  .target-body { justify-content: center; gap: clamp(28px, 6vw, 80px); }
  .target-art { flex: 1 1 0; max-width: 560px; }
  .target-benefits {
    width: auto;
    grid-template-columns: 405px;
    gap: 16px;
  }
  .target-card { padding: 14px; }
  .target-card-head {
    flex-direction: row;
    align-items: center;
  }
  .target-card-icon { width: 28px; height: 28px; }
  .target-card-desc { font-size: 14px; line-height: 20px; }
}

/* 1024 — px-40; title 36 (gap 16), subtitle 14/1.3 */
@media (max-width: 1024px) {
  .target-inner { padding: 0 40px; }
  .target-body { gap: 28px; }
  .target-header { gap: 16px; }
  .target-title { font-size: 36px; }
  .target-desc { font-size: 14px; line-height: 1.3; }
  .target-art { flex-basis: 511.36px; }
}

/* 820 / 768 — px-24; title 32; the art centres above a 2 × 2 grid
   (cols 378 / 352, gap 16; art 516 / 446) */
@media (max-width: 900px) {
  .target-inner { padding: 0 24px; }
  .target-title { font-size: 32px; }
  .target-desc { line-height: 1.4; }

  .target-body {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  /* 511 basis would size HEIGHT in a column (axis-flip gotcha) */
  .target-art {
    flex: 0 0 auto;
    width: 516.18px;
    max-width: 100%;
    align-self: center;
  }
  .target-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (max-width: 768px) {
  .target-art { width: 446px; }
}

/* 375 — py-24 px-16; title 24 (gap 4); one column, gap 16. Cards p-8: a
   18/1.4 title beside the 28px icon (gap 8), a 1px #b9ddfe rule 261 wide,
   then the description */
@media (max-width: 767px) {
  .target-section { padding: 24px 0; }
  .target-inner { padding: 0 16px; }
  .target-title { gap: 4px; font-size: min(24px, 7vw); }

  /* Full width at 375 (343); between 600 and 767 it stops at the 768 art
     size instead of ballooning past it */
  .target-art { width: 100%; max-width: 446px; }
  .target-benefits { grid-template-columns: minmax(0, 1fr); }
  .target-card { gap: 12px; align-items: center; padding: 6px; }
  .target-card-head { width: 100%; gap: 8px; }
  .target-card-title { font-size: 18px; line-height: 1.4; }
  .target-card-desc { width: 100%; }
  /* Figma Vector 416: a 261px rule centred in the 327px content */
  .target-card-desc::before {
    content: "";
    display: block;
    width: 261px;
    max-width: 100%;
    height: 0;
    margin: 0 auto 12px;
    border-top: 1px solid #b9ddfe;
  }
}

/* ═══════════════════════════════════════════════════════════
   Testimonies Section  (Figma 2342:9903) — "Cerita Mitra Yang Sudah Mulai"
   Tiers: 1024 2398:19499, 820 2401:19523 (card 2418:43434), 768 2401:19547
   (card 2418:43470), 375 2401:19571. Re-read 2026-10-23 after the designer
   resized the 1440 / 820 / 768 cards.
   A card slider (script.js "Testimonies"): the card chrome is static, the
   track of slides moves inside .testi-viewport, and the dots sit outside the
   track (absolute, bottom-right; centred at 375) so they never slide away.
═══════════════════════════════════════════════════════════ */

/* Figma: px-80 py-40, gap-40 */
.testi-section { padding: 40px 0; }
.testi-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.testi-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 var(--nav-px);
}

/* ── Header — left-aligned, SemiBold 48 / 1.3 / −2% ── */
.testi-header { display: flex; }
.testi-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.testi-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Cerita Mitra": logical box h-6.498, the export bleeds by
   Figma's insets −33.58% / −0.4% / −36.31% / −0.34% */
.testi-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.testi-underline-img {
  position: absolute;
  top: -33.58%;
  left: -0.34%;
  width: 100.74%;
  height: 169.89%;
  display: block;
}

/* ── Card — #e9f4ff, r-16, p-32 (1440: 1280 × 370) ──
   The card is the clipping edge, and its padding (--testi-pad) lives on each
   slide instead: slides then travel the card's full width and slide out of its
   edge, rather than being cut off by an invisible line one padding in. ── */
.testi-card {
  --testi-pad: 32px;
  position: relative;
  overflow: hidden;
  background: #e9f4ff;
  border-radius: 16px;
}
.testi-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(calc(var(--testi-index, 0) * -100%));
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Photo + quote, gap-48 */
.testi-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 48px;
  padding: var(--testi-pad);
  /* A slide that isn't the shown one is hidden once it has slid out (the
     delay), so no sliver of the next slide can bleed into the viewport edge;
     it becomes visible immediately when it turns active */
  transition: visibility 0s 0.6s;
}
.testi-slide[aria-hidden="false"] { transition-delay: 0s; }
.testi-slide[aria-hidden="true"]  { visibility: hidden; }

/* Photo 419×306, r-16, cover. The text column takes the rest of the row
   (Figma: flex 1 → 749 wide in the 1280 desktop row) */
.testi-photo {
  flex: 0 0 419px;
  aspect-ratio: 419 / 306;
  align-self: flex-start;
  border-radius: 16px;
  overflow: hidden;
}
.testi-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text column — centred group, gap-24. padding-bottom keeps the quote clear
   of the absolutely-placed dots (16) with 16 to spare; at 1440 the column is
   as tall as the photo (306), which leaves Figma's 54px above the dots */
.testi-quote {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding-bottom: 32px;
}
/* Shop name — SemiBold 18 / 1.5 (h-30) */
.testi-shop {
  align-self: flex-start;
  width: 100%;
  min-height: 30px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--heading);
}
/* Figma Vector 416 / 417: 300px, #b9ddfe */
.testi-rule {
  display: block;
  flex-shrink: 0;
  width: 300px;
  max-width: 100%;
  height: 0;
  margin-bottom: -1px;         /* Figma's vectors have no layout height */
  border-top: 1px solid #b9ddfe;
}
/* Quote — Regular 24 / 1.2 at 1440 */
.testi-text {
  width: 100%;
  margin: 0;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
}
.testi-author {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font);
  line-height: 1.5;
  white-space: nowrap;
}
.testi-author-name { font-size: 18px; color: var(--heading); }
.testi-author-role { font-size: 14px; color: #62676f; }

/* ── Dots — 5 circles, gap-8; active #0f64b3, others #d1e4f5 ── */
.testi-dots {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  gap: 8px;
}
.testi-dot {
  position: relative;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.testi-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #d1e4f5;
  transition: background 0.3s;
}
/* The visible circle stays 16 / 12; the hit area is about 24 */
.testi-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.testi-dot:hover::before { background: #9fc4ea; }
.testi-dot[aria-current="true"]::before { background: #0f64b3; }
.testi-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ── Testimonies responsive ───────────────────────────── */

/* 1024 — card p-24, gap-32; the photo fills the row (aspect 567/415, as
   tall as the column) beside a fixed 506px text column; group gap-16, quote
   20/1.4. Dots 16, 16 below the group. */
@media (max-width: 1024px) {
  .testi-card { --testi-pad: 24px; }
  .testi-dots { right: 24px; bottom: 24px; }
  .testi-slide { gap: 32px; }
  .testi-photo { flex: 1 1 0; min-width: 0; aspect-ratio: 567 / 415; align-self: stretch; }
  .testi-quote { flex: 0 0 506px; gap: 16px; }
  .testi-text { font-size: 20px; line-height: 1.4; }
}

/* 1024 — px-40, header → card 32; title 36 */
@media (max-width: 1024px) {
  .testi-inner { gap: 32px; padding: 0 40px; }
  .testi-title { font-size: 36px; }
}

/* 820 / 768 — px-24, header → card 24; title 32. Both cards are p-24, gap-32
   with a fixed 260×190 photo; the text column fills the rest and the dots
   sit 16 below the group; name 16, author 16 + 14 with no gap */
@media (max-width: 900px) {
  .testi-inner { gap: 24px; padding: 0 24px; }
  .testi-title { font-size: 32px; }

  .testi-photo { flex: 0 0 260px; aspect-ratio: 260 / 190; align-self: flex-start; }
  .testi-quote { flex: 1 1 0; }
  .testi-shop { min-height: 24px; font-size: 16px; }
  .testi-author { gap: 0; }
  .testi-author-name { font-size: 16px; }
}

/* 375 — py-24 px-16, header → card 24; title 24 centred (gap 4); the card is
   p-12 and one column: photo full width, then everything centred with
   full-width rules, then the centred 12px dots (24 below the group) */
@media (max-width: 767px) {
  .testi-section { padding: 24px 0; }
  .testi-inner { padding: 0 16px; }
  .testi-header { justify-content: center; }
  .testi-title { gap: 4px; font-size: min(24px, 6.4vw); }

  .testi-card { --testi-pad: 12px; }
  .testi-slide { flex-direction: column; gap: 16px; }
  .testi-photo { flex: 0 0 auto; width: 100%; aspect-ratio: 567 / 415; align-self: stretch; }
  .testi-quote { flex: 0 0 auto; padding-bottom: 36px; }
  .testi-shop { text-align: center; }
  .testi-rule { width: 100%; }
  .testi-author { align-items: center; gap: 4px; }
  .testi-author-role { font-size: 12px; }

  .testi-dot { width: 12px; height: 12px; }
  .testi-dots { right: auto; left: 50%; bottom: 12px; transform: translateX(-50%); }
}

/* ── Vertical rhythm — 64px top and bottom, 1440 (desktop) tier only ──
   User decision 2026-10-23: Why, How, What, Target and Testimonies get 64px on
   the desktop tier (above 1024). 1024 / 820 / 768 keep Figma's 40px and 375
   keeps its 24px. Hero, Interactive and the nav are not touched. */
@media (min-width: 1025px) {
  .why-section,
  .how-section,
  .what-section,
  .target-section,
  .testi-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Promo Section  (Figma 2345:12917) — "Promo Hemat Khusus Agen"
   Tiers: 1024 2402:19595, 820 2402:22728, 768 2402:25858, 375 2402:28988.
   A full-bleed row of promo cards that runs off the right edge of the
   screen. The cards are scaled copies of the 1440 card (519 × 291), so one
   variable (--promo-s) sizes everything inside them. The row scrolls
   natively (swipe / trackpad / keyboard) and by mouse drag (script.js).
═══════════════════════════════════════════════════════════ */

.promo-section {
  padding: 40px 0;
  --promo-s: 1;                /* card scale: 1 / 0.7949 / 0.4736 */
  --promo-gutter: var(--nav-px);
}
.promo-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.promo-inner { padding: 0 var(--promo-gutter); }

/* ── Header — title left, button right ── */
.promo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.promo-title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.promo-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Promo Hemat": logical box h-6.498, the export bleeds by
   Figma's insets −33.2% / −0.35% / −36.42% / −0.34% */
.promo-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.promo-underline-img {
  position: absolute;
  top: -33.2%;
  left: -0.34%;
  width: 100.69%;
  height: 169.62%;
  display: block;
}

/* "Lihat Promo Lainnya" — Figma button-large: h-48, px-16, r-8, Bold 15/26,
   white on primary */
.promo-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  padding: 0 16px;
  background: var(--primary);
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.promo-more:hover { background: var(--primary-dark); }
.promo-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* The second copy only exists for the 375 layout (button below the row) */
.promo-more--bottom { display: none; }

/* ── Row — full-bleed scroller; the first card lines up with the header and
   the last one can scroll fully into view (padding both sides) ── */
.promo-scroller {
  --promo-pad: calc(max(0px, (100% - var(--page-max)) / 2) + var(--promo-gutter));
  display: flex;
  gap: calc(24px * var(--promo-s));
  margin: 40px 0 0;
  padding: 0 var(--promo-pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--promo-pad);
  scrollbar-width: none;
  cursor: grab;
}
.promo-scroller::-webkit-scrollbar { display: none; }
.promo-scroller:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Mouse drag (script.js): snap off + grabbing cursor while it runs */
.promo-scroller.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.promo-scroller.is-dragging .promo-link { pointer-events: none; }

/* ── Card — white, r-16, p-16, banner 487 × 220, gap-16, title 18/1.3 ── */
.promo-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.promo-link {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--promo-s));
  width: calc(519px * var(--promo-s));
  height: 100%;                /* equal cards when a WordPress title wraps */
  padding: calc(16px * var(--promo-s));
  background: var(--white);
  border-radius: calc(16px * var(--promo-s));
  color: var(--heading);
  text-decoration: none;
  -webkit-user-drag: none;
}
.promo-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.promo-banner {
  display: block;
  width: 100%;
  aspect-ratio: 935 / 600;    /* the WordPress banners' own ratio (user decision;
                                 Figma's slot is 487 / 220, which crops the logo) */
  height: auto;
  object-fit: cover;
  border-radius: calc(12px * var(--promo-s));
  -webkit-user-drag: none;
  user-select: none;
}
.promo-card-title {
  font-family: var(--font);
  font-size: calc(18px * var(--promo-s));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* No posts, or the WordPress request failed: script.js hides the section */
.promo-section[hidden] { display: none; }

/* Loading placeholders until the WordPress posts arrive */
.promo-card.is-skeleton .promo-banner,
.promo-card.is-skeleton .promo-card-title {
  background: linear-gradient(90deg, #e6eef8 0%, #f2f6fc 50%, #e6eef8 100%) 0 0 / 200% 100%;
  animation: promo-shimmer 1.4s linear infinite;
}
.promo-card.is-skeleton .promo-card-title {
  width: 70%;
  height: 1.3em;
  border-radius: calc(6px * var(--promo-s));
}
@keyframes promo-shimmer { to { background-position: -200% 0; } }

/* ── Promo responsive ─────────────────────────────────── */

/* 1024 — px-40, title 36, button 36 (14/24, px12), header → row 32; cards
   are 0.795 of the 1440 card (412.5 × 232) */
@media (max-width: 1024px) {
  .promo-section { --promo-s: 0.7949; --promo-gutter: 40px; }
  .promo-title { font-size: 36px; }
  .promo-more {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 24px;
  }
  .promo-scroller { margin-top: 32px; }
}

/* 820 / 768 — px-24, title 32, header → row 24 */
@media (max-width: 900px) {
  .promo-section { --promo-gutter: 24px; }
  .promo-title { font-size: 32px; }
  .promo-scroller { margin-top: 24px; }
}

/* 375 — py-24 px-16; title 24 centred (gap 4) and the button moves BELOW the
   row (142 × 30, 13/22, left-aligned, 24 under the cards); cards 0.474 of the
   1440 card (245.8 × 137.9) */
@media (max-width: 767px) {
  .promo-section { padding: 24px 0; --promo-s: 0.4736; --promo-gutter: 16px; }
  .promo-header { justify-content: center; }
  .promo-title { gap: 4px; font-size: min(24px, 6.4vw); }
  .promo-more--header { display: none; }
  .promo-more--bottom {
    display: inline-flex;
    margin-top: 24px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 22px;
  }
}

/* Desktop tier — 64px top and bottom (see the vertical-rhythm note above) */
@media (min-width: 1025px) {
  .promo-section { padding-top: 64px; padding-bottom: 64px; }
}

/* ═══════════════════════════════════════════════════════════
   FAQ Section  (Figma 2345:15052) — "Masih Ada Pertanyaan?"
   Tiers: 1024 2402:32126, 820 2402:32169, 768 2403:32253, 375 2403:32295.
   1440 puts the header left of the accordion (gap 88); every smaller tier
   stacks them and centres the header. One item is open at a time
   (script.js); panels animate their height via grid-template-rows.
═══════════════════════════════════════════════════════════ */

.faq-section {
  padding: 40px 0 48px;
}
.faq-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.faq-inner {
  display: flex;
  align-items: flex-start;
  gap: 88px;
  padding: 0 var(--nav-px);
}

/* ── Header — title, then the description wrapped to the title's width ── */
.faq-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: min-content;   /* = the nowrap title (519 at 1440) */
}
.faq-title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.faq-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Pertanyaan?": logical box h-6.498, the export bleeds by
   Figma's insets −33.83% / −0.38% / −36.14% / −0.35% */
.faq-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.faq-underline-img {
  position: absolute;
  top: -33.83%;
  left: -0.35%;
  width: 100.73%;
  height: 169.97%;
  display: block;
}
.faq-desc {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

/* ── Accordion — widget/acordion/faq: #e9f4ff, 2px #cde4ff border, r-8,
   px-16 py-8; open adds gap-16 → divider → gap-16 → answer ── */
.faq-list {
  flex: 1 1 673px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  padding: 8px 16px;
  background: #e9f4ff;
  border: 2px solid #cde4ff;
  border-radius: 8px;
  transition: border-color 0.15s;
}
.faq-item:hover { border-color: #b3d5ff; }
.faq-q { font: inherit; }
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.faq-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.faq-q-text { flex: 1 1 0; min-width: 0; }
/* IconButton — 40 box, 24 icon (ic-eva arrow-ios upward / forward) */
.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 500px;
}
.faq-icon img {
  display: block;
  width: 24px;
  height: 24px;
}
/* Up chevron when open, forward chevron when closed */
.faq-icon .faq-icon-open,
.faq-item.is-open .faq-icon-closed { display: none; }
.faq-item.is-open .faq-icon-open { display: block; }

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}
.faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}
/* Divider — 1px --grey-20 */
.faq-rule {
  display: block;
  height: 1px;
  margin-top: 16px;
  background: var(--grey-20);
}
.faq-a {
  margin-top: 16px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-item.is-open .faq-panel { transition: none; }
}

/* ── FAQ responsive ───────────────────────────────────── */


/* 1024 — px-40, stacked (gap 32), header centred (gap 16), title 36 (gap 8),
   description 14/1.4 */
@media (max-width: 1024px) {
  .faq-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 40px;
  }
  .faq-header {
    width: auto;
    align-items: center;
    gap: 16px;
  }
  .faq-title { gap: 8px; font-size: 36px; }
  .faq-desc { font-size: 14px; line-height: 1.4; text-align: center; }
  .faq-list { flex: 0 0 auto; }
}

/* 820 / 768 — px-24, gap 24, title 32, question 20/1.4, IconButton 36 / 20 */
@media (max-width: 900px) {
  .faq-inner { gap: 24px; padding: 0 24px; }
  .faq-title { font-size: 32px; }
  .faq-toggle { font-size: 20px; line-height: 1.4; }
  .faq-icon { width: 36px; height: 36px; }
  .faq-icon img { width: 20px; height: 20px; }
}

/* 375 — py-24 px-16, title 24, question 18/1.4, IconButton 28 / 18,
   answer 12/18 (desktop/caption) */
@media (max-width: 767px) {
  .faq-section { padding: 24px 0; }
  .faq-inner { padding: 0 16px; }
  .faq-title { font-size: min(24px, 6.4vw); }
  .faq-toggle { font-size: 18px; }
  .faq-icon { width: 28px; height: 28px; }
  .faq-icon img { width: 18px; height: 18px; }
  .faq-a { font-size: 12px; line-height: 18px; }
}

/* Desktop tier — 64px top and bottom (see the vertical-rhythm note above) */
@media (min-width: 1025px) {
  .faq-section { padding-top: 64px; padding-bottom: 64px; }
}

/* ═══════════════════════════════════════════════════════════
   CTA Section  (Figma 2345:15098) — "Mulai gabung jadi mitra bosAgen"
   Tiers: 1024 2403:32365, 820 2404:32395, 768 2404:32445, 375 2404:32467.
   Full-bleed blue gradient banner: copy left, phone right. The ornaments
   only exist in the 1440 frame; 375 drops the phone. Keeps Figma's own
   padding on every tier (it is a banner, not part of the 64px rhythm).
═══════════════════════════════════════════════════════════ */

.cta-section {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  background: linear-gradient(90deg, #3f8be7, #226ac1);
}
.cta-wrapper {
  position: relative;   /* above the ornaments */
  max-width: var(--page-max);
  margin: 0 auto;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--nav-px);
}

/* Ornaments — #4f97ee @ 50%, pinned to the banner's bottom corners */
.cta-ornament {
  position: absolute;
  bottom: 0;
  display: block;
  pointer-events: none;
}
.cta-ornament--left  { left: 0; }
.cta-ornament--right { right: 0; }

/* ── Copy — 628 wide, py-8, gap-32 ── */
.cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 0 1 628px;
  min-width: 0;
  padding: 8px 0;
  color: var(--white);
}
.cta-title {
  font-family: var(--font);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.5;
}
.cta-desc {
  font-family: var(--font);
  font-size: 18px;
  line-height: 24px;
}
.cta-actions {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* "Daftar Jadi Agen!" — components/button-large, white with
   Information/02 (#238ced) text */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--btn-h);
  min-width: 64px;
  padding: 0 var(--btn-px-fill);
  background: var(--white);
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: #238ced;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.cta-btn:hover { background: #e9f4ff; }
.cta-btn:focus-visible,
.cta-actions .hero-store:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Google Play badge — light variant of the hero's: white, 1.2px black
   border, black label; the white wordmark export is turned black */
.hero-store--light {
  background: var(--white);
  border-color: #000;
}
.hero-store--light .hero-store-label { color: #000; }
.hero-store--light .hero-store-wordmark { filter: brightness(0); }
/* The CTA keeps the full 144×48 badge down to 768 (the hero shrinks its own
   at 1024) */
.cta-actions .hero-store { font-size: 12px; }

/* ── Phone — 480×510 ── */
.cta-phone {
  flex: 0 1 480px;
  min-width: 0;
}
.cta-phone-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 510;
}

/* ── CTA responsive ───────────────────────────────────── */

/* 1024 — p-40, ornaments gone, copy 523 (gap 24), title 32, description 16,
   phone 286 × 304 */
@media (max-width: 1024px) {
  .cta-inner { padding: 0 40px; }
  .cta-ornament { display: none; }
  .cta-copy { flex-basis: 523px; gap: 24px; }
  .cta-title { font-size: 32px; }
  .cta-desc { font-size: 16px; }
  .cta-phone { flex-basis: 286px; }
}

/* 820 — px-24, copy 430, title 28, phone 234 × 248.5 */
@media (max-width: 900px) {
  .cta-inner { padding: 0 24px; }
  .cta-copy { flex-basis: 430px; }
  .cta-title { font-size: 28px; }
  .cta-phone { flex-basis: 234px; }
}

/* 768 — copy 395, phone 214 × 227.5 */
@media (max-width: 768px) {
  .cta-copy { flex-basis: 395px; }
  .cta-phone { flex-basis: 214px; }
}

/* 375 — py-24 px-16, no phone, copy full width (gap 16), title 24,
   description 14/1.4; button-small (h-30 px-8 13/22) and a 90×30 badge */
@media (max-width: 767px) {
  .cta-section { padding: 24px 0; }
  .cta-inner { padding: 0 16px; }
  .cta-phone { display: none; }
  .cta-copy { flex: 1 1 auto; gap: 16px; padding: 0; }
  .cta-title { font-size: 24px; }
  .cta-desc { font-size: 14px; line-height: 1.4; }
  .cta-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 22px;
  }
  .cta-actions .hero-store { font-size: 7.5px; }   /* → 90×30 */
}

/* ═══════════════════════════════════════════════════════════
   Other Section  (Figma 2345:15123) — "Jelajahi Solusi Lain"
   Tiers: 1024 2404:41528, 820 2405:41981, 768 2406:42278, 375 2406:42376.
   Three product cards: art → logo → divider → text → link. Each art is one
   webp of Figma's 395×344 art frame; smaller tiers scale that frame by
   height (344 / 284 / 213.7) and the frame's empty side margins may spill
   past the card's padding. At 1440 the art overlaps the card's pt-120, so
   the card has no top padding there. 375 stacks the cards, bosCOD first.
═══════════════════════════════════════════════════════════ */

.other-section {
  padding: 40px 0;
  --other-art-h: 344px;
}
.other-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
}
.other-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 0 var(--nav-px);
}

/* ── Header — title (gap 16), description 16/24 ── */
.other-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.other-title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading);
  white-space: nowrap;
}
.other-title-word {
  display: flex;
  flex-direction: column;
}
/* Vector 414 under "Jelajahi": logical box h-6.498, the export bleeds by
   Figma's insets −32.46% / −0.65% / −35.91% / −0.48% */
.other-underline {
  position: relative;
  display: block;
  width: 100%;
  height: 6.5px;
}
.other-underline-img {
  position: absolute;
  top: -32.46%;
  left: -0.48%;
  width: 101.13%;
  height: 168.37%;
  display: block;
}
.other-desc {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

/* ── Cards ── */
.other-cards {
  display: flex;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  list-style: none;
}
/* section/product — no fill; Figma's shadow/card drop shadow falls on the
   content itself */
.other-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 24px 24px;
  filter: drop-shadow(0 0 1px rgba(145, 158, 171, 0.2))
          drop-shadow(0 12px 12px rgba(145, 158, 171, 0.12));
}
.other-art {
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--other-art-h);
  margin-bottom: -24px;   /* the logo sits directly under the art */
}
.other-art-img {
  display: block;
  flex-shrink: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 395 / 344;
  transition: transform 0.28s ease;
}
/* Hover — ported from bosonline.id's .others-card: the illustration grows 5%.
   Mouse (hover + fine pointer) only, so a tap doesn't leave it enlarged. */
@media (hover: hover) and (pointer: fine) {
  .other-card:hover .other-art-img { transform: scale(1.05); }
}
.other-logo { line-height: 0; }
.other-logo-img {
  display: block;
  width: 266px;
  height: auto;
}
/* Divider — 1px --grey-20, 266 wide at 1440, full width below */
.other-rule {
  display: block;
  width: 266px;
  max-width: 100%;
  height: 1px;
  background: var(--grey-20);
}
.other-text {
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  color: var(--text);
  text-align: center;
}
/* "✳️ buy action" — text button-small (h-30 px-4 gap-8, Bold 13/22) with an
   18px arrow. Primary blue on every tier (Figma's 1440 frame alone uses
   #238ced), matching how/cta-arrow.svg. */
.other-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  padding: 0 4px;
  margin-top: auto;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.other-link:hover { background: rgba(63, 139, 231, 0.08); }
.other-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.other-link-icon {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.15s;
}
.other-link:hover .other-link-icon { transform: translateX(2px); }

/* ── Other responsive ─────────────────────────────────── */

/* 1024 — p-40, header → cards 32, title 36 (gap 8), description 14/1.4;
   cards p-24, art 284 tall, logo 200 */
@media (max-width: 1024px) {
  .other-section { --other-art-h: 284px; }
  .other-inner { gap: 32px; padding: 0 40px; }
  .other-title { gap: 8px; font-size: 36px; }
  .other-desc { font-size: 14px; line-height: 1.4; }
  .other-card { padding: 24px; }
  .other-logo-img { width: 200px; }
  .other-rule { width: 100%; }
}

/* 820 / 768 — px-24, header → cards 16, title 32, description back to 16/24;
   art 213.7 tall, logo 150, card text 12/18 */
@media (max-width: 900px) {
  .other-section { --other-art-h: 213.7px; }
  .other-inner { gap: 16px; padding: 0 24px; }
  .other-title { font-size: 32px; }
  .other-desc { font-size: 16px; line-height: 24px; }
  .other-logo-img { width: 150px; }
  .other-text { font-size: 12px; line-height: 18px; }
}

/* 375 — py-24 px-16; cards stacked (gap 24), py-16, bosCOD first */
@media (max-width: 767px) {
  .other-section { padding: 24px 0; }
  .other-inner { padding: 0 16px; }
  .other-title { font-size: min(32px, 8.5vw); }
  .other-cards { flex-direction: column; gap: 24px; }
  .other-card { flex: 0 0 auto; padding: 16px 24px; }
  .other-card--cod { order: -1; }
}

/* Desktop tier — 64px top and bottom (see the vertical-rhythm note above) */
@media (min-width: 1025px) {
  .other-section { padding-top: 64px; padding-bottom: 64px; }
}

/* ═══════════════════════════════════════════════════════════
   Footer  (Figma 2345:15222) — "Section/Footer"
   Tiers: 1024 2406:42480, 820 2406:43005, 768 2406:43040, 375 2406:43075.
   Blue gradient like the CTA. Brand (logo + address) left, link columns
   right. 1440: three columns, Produk / Blog / Sosial Media, gap 100, pushed
   right. 1024: Sosial Media / Produk / Blog in a 491 row. 820/768: Sosial
   Media + Produk side by side, Blog underneath. 375: everything stacked.
═══════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: linear-gradient(90deg, #3f8be7, #226ac1);
  color: var(--white);
}
.footer-wrapper {
  position: relative;   /* above the ornaments */
  max-width: var(--page-max);
  margin: 0 auto;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 var(--nav-px);
}

/* Ornaments — #4f97ee, pinned to the footer's top corners */
.footer-ornament {
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
}
.footer-ornament--left  { left: 0; }
.footer-ornament--right { right: 0; }

.footer-menu {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* ── Brand — logo 234.67 × 64, address 18/1.35 (370 wide at 1440; Figma's
   empty 24px "Contact/1" row + gap-16 sit above it there) ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 370px;
}
.footer-logo { display: block; width: 234.67px; }
.footer-logo img { display: block; width: 100%; height: auto; }
.footer-logo:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
.footer-address {
  margin-top: 40px;
  font-family: var(--font);
  font-size: 18px;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ── Link columns — heading Bold 18, gap-32 to the list, links Regular 18
   gap-16 ── */
.footer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 100px;
  padding: 0 60px;
}
.footer-col--product { order: 1; }
.footer-col--blog    { order: 2; }
.footer-col--social  { order: 3; }
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-col-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
}
.footer-link {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.footer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 2px; }

/* ── Copyright — py-16, 2px #dedede divider, gap-40, Medium 18/1.7 ── */
.footer-copyright {
  padding: 16px 0;
}
.footer-copyright::before {
  content: '';
  display: block;
  height: 2px;
  margin-bottom: 40px;
  background: #dedede;
}
.footer-copyright p {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.02em;
}

/* ── Footer responsive ────────────────────────────────── */


/* 1024 — p-40, ornaments gone, address straight under the logo, brand 329;
   columns back to Sosial Media / Produk / Blog in a 491 row */
@media (max-width: 1024px) {
  .site-footer { padding: 40px 0; }
  .footer-inner { padding: 0 40px; }
  .footer-ornament { display: none; }
  .footer-brand { flex-basis: 329px; }
  .footer-address { margin-top: 0; }
  .footer-nav {
    flex: 0 1 491px;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
  }
  .footer-col { order: 0; }
}

/* 820 / 768 — px-24, brand 313, gap 24 to the copyright; Sosial Media +
   Produk side by side (293 wide at 820, 265 at 768), Blog underneath */
@media (max-width: 900px) {
  .footer-inner { gap: 24px; padding: 0 24px; }
  .footer-brand { flex-basis: 313px; }
  .footer-nav {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: 32px;
    column-gap: 24px;
    flex-basis: 293px;
  }
  .footer-col--blog { grid-column: 1; }
}
@media (max-width: 768px) {
  .footer-nav { flex-basis: 265px; }
}

/* 375 — px-16, brand above the links (gap 24), links full width; the
   copyright wraps instead of running off the edge as Figma's does */
@media (max-width: 767px) {
  .footer-inner { padding: 0 16px; }
  .footer-menu { flex-direction: column; }
  .footer-brand { flex: 0 0 auto; max-width: 313px; }
  .footer-nav { width: 100%; flex: 0 0 auto; }
  .footer-copyright p { white-space: normal; }
}

/* ── Page ornaments ────────────────────────────────────────── */
/* Figma node 2352:26657 — the six #BAEEFF/25% line strokes behind the final
   1440 page (2202:10791). Desktop tier only (user decision); ≤1024 the tier
   frames have no ornaments yet. One layer behind <main>'s content, clipped to
   it. Each piece is pinned to its section: script.js writes the section's top
   inside <main> as --orn-hero / --orn-int / --orn-how / --orn-what /
   --orn-target (fallbacks = Figma's tops), and the offsets below are Figma's
   distance from that section's top. The SVGs are pre-clipped at the frame
   edges, so edge pieces hug the screen edge; Vector 47 follows the 1440 row. */
.page-ornaments { display: none; }

@media (min-width: 1025px) {
  main { position: relative; isolation: isolate; }
  .page-ornaments {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  .orn { position: absolute; display: block; max-width: none; height: auto; }

  /* Hero (Figma top 80) */
  .orn--v47 { top: calc(var(--orn-hero, 0px) - 18.155px); left: calc(max(0px, (100% - 1440px) / 2) + 28.95px); }
  .orn--l7b { top: calc(var(--orn-hero, 0px) + 11.003px); right: -0.988px; }
  /* Interactive (Figma top 736) */
  .orn--v48 { top: calc(var(--orn-int, 656px) - 216.925px); left: 0; }
  /* How (Figma top 1354) */
  .orn--l13 { top: calc(var(--orn-how, 1274px) + 91.47px); right: 0; }
  /* What (Figma top 2232) */
  .orn--v50 { top: calc(var(--orn-what, 2152px) + 199.075px); right: -0.229px; }
  /* Target (Figma top 3451.6) */
  .orn--l7  { top: calc(var(--orn-target, 3371.609px) + 89.89px); left: 0; }
}