/* Hallmark · shape: Proof Ledger (kept content, new order) · genre: editorial · theme: brand · redesign: full · job: buy, the action in the hero, beside the price, sticky on phones
 * paper: #F6F4EC · accent: #FFC13B · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans · hero: Counter (the calculator is the visual) · nav: edge-aligned, wordmark and one action · footer: colophon block · signature: the receipt calculator that turns the visitor's own numbers into money lost per day
 * axes: light/rounded-sans/warm · posture: committed forest bands for hero, app and close · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the hero struk is tall; kept the focal result above 800px by moving the business chips into one scroll row */
/* Hallmark · reworded "Jualan laris tiap hari, kok uangnya nggak nambah?" to "Laris tiap hari, kok uangnya nggak nambah?" · 58 caps the hero head at seven words */
/* Hallmark · dropped .proof-end scallop and the h2 highlighter marks · 38iii names the accented word */
/* Hallmark · dismissed 23 · the progress rule is 3px tall, never a fill */
/* Hallmark · dismissed 25 · .shot p is a one-sentence caption, 28ch floor applies */
/* Hallmark · answered F4 · the chip and segment toggles are pressed states of a control, not primary buttons; one .btn recipe on the page */
@import url("./tokens.css");
@import url("./base.css");

/* ── Page tokens ─────────────────────────────────────── */
:root {
  --nav-h: 56px;
  --struk-w: 520px;
}
.dark {
  --color-focus: var(--color-accent);
  background: var(--color-forest);
  color: var(--color-on-forest);
}
.dark h2, .dark h3 { color: var(--color-on-forest); }

body { font-size: var(--text-md); }
h1, h2 { color: var(--color-forest); }
h1 { font-weight: 800; line-height: 1.04; }
h2 { font-weight: 800; }
.num { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--section-gap-s); }
.sec-lead { font-size: var(--text-lead); color: var(--color-ink-2); margin-top: var(--space-md); max-width: 48ch; line-height: 1.45; }
.dark .sec-lead { color: var(--color-on-forest-2); }

/* ── Buttons: one primary recipe ──────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 52px; padding-inline: var(--space-lg);
  border-radius: var(--radius-btn); border: 0;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 800; font-size: var(--text-md); white-space: nowrap; text-decoration: none;
  box-shadow: 0 5px 0 var(--color-accent-deep);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  touch-action: manipulation; cursor: pointer;
}
.btn .js-price { font-weight: 700; padding-left: var(--space-sm); border-left: var(--rule-hair) solid color-mix(in oklab, var(--color-accent-ink) 35%, transparent); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--color-accent-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--color-accent-deep); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn.nudge { animation: nudge 1.2s var(--ease-out) 1; }
@keyframes nudge {
  from { box-shadow: 0 5px 0 var(--color-accent-deep), 0 0 0 0 color-mix(in oklab, var(--color-accent) 70%, transparent); }
  to { box-shadow: 0 5px 0 var(--color-accent-deep), 0 0 0 16px color-mix(in oklab, var(--color-accent) 0%, transparent); }
}
.btn-wide { width: 100%; }

.wa {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px;
  font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 0.2em;
  border-radius: var(--space-2xs);
}
.wa svg { flex: none; }
.wa:hover { text-decoration-thickness: 2px; }
.wa:active { opacity: 0.8; }
.wa:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ── Offer bar and progress ───────────────────────────── */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-tooltip);
  background: var(--color-accent); transform-origin: left; transform: scaleX(0); pointer-events: none;
}
.offer {
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text-sm); font-weight: 700; text-align: center; line-height: 1.35;
  padding: var(--space-xs) var(--space-md);
}
.offer > span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-sm); }
.offer s { opacity: 0.65; }
.offer b { font-weight: 800; }

/* ── Nav: edge-aligned ────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: var(--color-forest); border-bottom: var(--rule-hair) solid var(--color-forest-rule);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.logo {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px;
  font-weight: 800; font-size: var(--text-lg); color: var(--color-on-forest); text-decoration: none; border-radius: var(--space-2xs);
}
.logo img { width: 28px; height: 28px; border-radius: 7px; }
.logo:focus-visible, .nav-buy:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.nav-buy {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-md);
  border-radius: var(--radius-field); background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 800; font-size: var(--text-sm); text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
.nav-buy:hover { transform: translateY(-1px); }
.nav-buy:active { transform: translateY(1px); }

/* ── Hero: Counter posture, the calculator is the visual ─ */
.hero { padding-block: var(--space-xl) var(--space-3xl); }
.hero-grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "struk" "act";
}
.hero-head { grid-area: head; }
.hero-act { grid-area: act; }
.hero-act .btn { display: none; }
.hero h1 { color: var(--color-on-forest); max-width: 14ch; font-size: clamp(2.5rem, 2.6vw + 1.6rem, 4.5rem); }
.hero .lead { color: var(--color-on-forest-2); margin-top: var(--space-lg); max-width: 34ch; }
.hero-act .wa { color: var(--color-on-forest); margin-top: var(--space-md); }

/* ── Struk (receipt calculator) ───────────────────────── */
.struk {
  grid-area: struk; position: relative; width: 100%; max-width: var(--struk-w); justify-self: center;
  background: var(--color-paper-2); color: var(--color-ink);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  box-shadow: 0 24px 60px color-mix(in oklab, var(--color-forest-2) 70%, transparent);
  transform: translateY(var(--py, 0px));
}
.struk::after {
  content: ""; position: absolute; inset: auto 0 -12px 0; height: 12px; background: var(--color-paper-2);
  -webkit-mask: conic-gradient(from -45deg at bottom, transparent, var(--mask-ink) 1deg 89deg, transparent 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, transparent, var(--mask-ink) 1deg 89deg, transparent 90deg) 50% / 16px 100%;
}
.struk-head {
  display: flex; flex-direction: column; gap: var(--space-3xs);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 2px dashed var(--color-rule);
}
.struk-title { font-weight: 800; font-size: var(--text-lg); color: var(--color-forest); }
.struk-sub { font-size: var(--text-sm); color: var(--color-muted); }

/* jenis usaha: one scroll row of photo chips */
.usaha {
  display: flex; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(var(--space-lg) * -1); padding: var(--space-3xs) var(--space-lg) var(--space-sm); scroll-padding-inline: var(--space-lg);
  scrollbar-width: none;
}
.usaha::-webkit-scrollbar { display: none; }
.usaha button {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-xs); scroll-snap-align: start;
  min-height: 44px; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.usaha img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.usaha button:hover { border-color: var(--color-field); }
.usaha button:active { background: var(--color-paper-3); }
.usaha button[aria-pressed="true"] { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-on-forest); }
.usaha button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs);
  background: var(--color-paper-3); padding: var(--space-2xs); border-radius: var(--radius-field); margin-bottom: var(--space-sm);
}
.seg button {
  border: 0; background: transparent; border-radius: 9px; min-height: 44px;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.seg button:hover { color: var(--color-ink); }
.seg button:active { background: var(--color-rule); }
.seg button[aria-pressed="true"] { background: var(--color-forest); color: var(--color-on-forest); }
.seg button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }

.fields { display: grid; gap: var(--space-sm); }
.row2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-sm); }
.field label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.inp {
  display: flex; align-items: center; min-height: 52px; padding-inline: var(--space-sm);
  border: 1.5px solid var(--color-field); border-radius: var(--radius-field); background: var(--color-paper-2);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.inp:hover { border-color: var(--color-ink-2); }
.inp:focus-within { border-color: var(--color-brand); outline: 3px solid color-mix(in oklab, var(--color-brand) 25%, transparent); }
.inp span { font-weight: 700; color: var(--color-muted); margin-right: var(--space-xs); }
.inp input {
  border: 0; outline: 0; width: 100%; min-width: 0; background: transparent;
  font-size: var(--text-lg); font-weight: 800; color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.inp input:disabled { cursor: not-allowed; opacity: 0.6; }
.inp small { color: var(--color-muted); font-size: var(--text-sm); }

.res { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 2px dashed var(--color-rule); }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.vs-l { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.vs-n { font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.vs-u { font-size: var(--text-xs); color: var(--color-muted); }
.kira .vs-n { color: var(--color-muted); position: relative; display: inline-block; }
.kira .vs-n::after {
  content: ""; position: absolute; inset: 52% -2px auto -2px; height: 3px; border-radius: 2px;
  background: var(--color-loss); transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-long) var(--ease-out) 150ms;
}
.res.show .kira .vs-n::after { transform: scaleX(1); }
.asli .vs-n { color: var(--color-loss); }
.asli .vs-n[data-state="warn"] { color: var(--color-warn); }
.asli .vs-n[data-state="ok"] { color: var(--color-gain); }

.bar-wrap { margin-top: var(--space-md); }
.bar-t { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.bar { position: relative; display: flex; height: 28px; border-radius: 8px; background: var(--color-paper-3); }
.bar i { display: block; height: 100%; width: 0; }
.bar i:first-child { border-radius: 8px 0 0 8px; }
.b-bahan { background: var(--color-bar-1); }
.b-jual { background: var(--color-bar-2); }
.b-tenaga { background: var(--color-bar-3); }
.b-untung { background: var(--color-gain); }
.bar .b-nombok {
  position: absolute; inset-block: 0; border-radius: 0 8px 8px 0;
  background: repeating-linear-gradient(-45deg, var(--color-loss) 0 6px, color-mix(in oklab, var(--color-loss) 55%, var(--color-paper-2)) 6px 12px);
}
.bar-line { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--color-forest); }
.bar-line span {
  position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs); border-radius: 4px; white-space: nowrap;
  background: var(--color-forest); color: var(--color-on-forest); font-size: var(--text-xs); font-weight: 700;
}
.bar-line.end span { transform: translateX(-100%); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--sw); }
.legend .k-bahan { --sw: var(--color-bar-1); }
.legend .k-jual { --sw: var(--color-bar-2); }
.legend .k-tenaga { --sw: var(--color-bar-3); }
.legend .k-untung { --sw: var(--color-gain); }
.legend .k-untung[data-state="loss"] { --sw: var(--color-loss); }

.verdict {
  display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-field);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.5;
}
.verdict svg { flex: none; margin-top: var(--space-3xs); }
.verdict.bad { background: var(--color-loss-bg); color: var(--color-loss-ink); }
.verdict.warn { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.verdict.ok { background: var(--color-gain-bg); color: var(--color-gain-ink); }
.note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.struk .btn { margin-top: var(--space-md); }
.btn-sub { font-size: var(--text-sm); color: var(--color-muted); text-align: center; margin-top: var(--space-sm); }
.struk .wa { color: var(--color-forest); font-size: var(--text-sm); display: flex; justify-content: center; }

/* ── Bocor: the visitor's own number, then why ─────────── */
.bocor-grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
.bocor-fig { margin-top: var(--space-xl); }
.bocor-l { font-size: var(--text-md); font-weight: 700; color: var(--color-ink-2); }
.bocor-n {
  display: inline-block; margin-block: var(--space-xs);
  font-size: clamp(4rem, 9vw, 8.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em;
  color: var(--color-loss); font-variant-numeric: tabular-nums;
}
.bocor-p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; margin-top: var(--space-md); }
.bocor-p b { color: var(--color-ink); }

.nota { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-forest); }
.nota li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 2px dashed var(--color-rule); }
.nota-x { width: 32px; height: 32px; border-radius: 50%; background: var(--color-loss-bg); color: var(--color-loss-ink); display: grid; place-items: center; }
.nota h3 { font-size: var(--text-title); color: var(--color-forest); }
.nota p { color: var(--color-ink-2); margin-top: var(--space-xs); }

/* ── App: three real screens, unequal ──────────────────── */
.app-head { display: grid; gap: var(--space-md); }
.shots {
  display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: var(--space-2xl) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) var(--space-sm);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; margin: 0; }
.screen {
  display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 585 / 900;
  background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-forest-rule); outline-offset: 6px;
  transform: translateY(var(--py, 0px));
}
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot figcaption { margin-top: var(--space-lg); }
.shot h3 { font-size: var(--text-title); }
.shot p { color: var(--color-on-forest-2); margin-top: var(--space-xs); max-width: 36ch; }
.dots { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--color-forest-rule); transition: background-color var(--dur-short) var(--ease-out); }
.dots i.on { background: var(--color-accent); }
.swipe-note { font-size: var(--text-sm); color: var(--color-on-forest-2); margin-top: var(--space-lg); }

/* ── Bukti: one quote set large, two beside ────────────── */
.proof-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
.quote { margin: 0; }
.quote q { display: block; font-weight: 700; line-height: 1.4; color: var(--color-forest); quotes: "\201C" "\201D"; font-size: var(--text-lg); }
.quote-lead q { font-size: var(--text-section); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.quote-side { display: grid; gap: var(--space-xl); align-content: start; }
.quote-side .quote { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.who { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.who b { display: block; font-size: var(--text-md); color: var(--color-ink); }
.av {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--color-brand); color: var(--color-on-forest); font-weight: 800;
}
.founder {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center;
  margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 2px solid var(--color-forest);
}
.founder .av { width: 64px; height: 64px; font-size: var(--text-xl); background: var(--color-accent); color: var(--color-accent-ink); }
.founder p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 60ch; }
.founder b { color: var(--color-ink); }

/* ── Harga: the buy box ───────────────────────────────── */
.harga { background: var(--color-paper-3); }
.price-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
.tag {
  position: relative; background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow: var(--shadow-card);
}
.tag::before {
  content: ""; position: absolute; top: var(--space-md); right: var(--space-md); width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-paper-3); box-shadow: inset 0 2px 3px color-mix(in oklab, var(--color-forest) 30%, transparent);
}
.tag-k { font-size: var(--text-sm); font-weight: 800; }
.tag-was { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.tag-was s { font-size: var(--text-xl); font-weight: 800; opacity: 0.65; text-decoration-thickness: 3px; text-decoration-color: var(--color-loss); }
.tag-was span { background: var(--color-loss); color: var(--color-paper-2); font-size: var(--text-xs); font-weight: 800; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); }
.tag-n { font-size: clamp(4.5rem, 12vw, 7rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; margin-top: var(--space-2xs); font-variant-numeric: tabular-nums; }
.tag-n small { font-size: 0.32em; letter-spacing: 0; }
.tag-p { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); font-weight: 800; }
.cd { margin-top: var(--space-lg); padding: var(--space-sm); border-radius: var(--radius-field); background: var(--color-forest); color: var(--color-on-forest); }
.cd-l { font-size: var(--text-xs); font-weight: 700; color: var(--color-on-forest-2); margin-bottom: var(--space-xs); }
.cd-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); text-align: center; }
.cd-g > div { background: var(--color-forest-well); border-radius: 10px; padding-block: var(--space-xs); overflow: hidden; }
.cd-n { display: block; font-size: var(--text-2xl); font-weight: 800; color: var(--color-accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-g span { font-size: var(--text-xs); font-weight: 700; color: var(--color-on-forest-2); }
.cd-n.tick { animation: roll 450ms var(--ease-out); }
@keyframes roll { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.tag-calc { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 2px dashed color-mix(in oklab, var(--color-accent-ink) 25%, transparent); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; }

.buy { padding-top: var(--space-xs); }
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.incl li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-lg); line-height: 1.4; }
.incl svg { flex: none; margin-top: var(--space-2xs); color: var(--color-brand); }
.buy .btn { margin-top: var(--space-xl); }
.pay { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.assure {
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-field);
  display: grid; gap: var(--space-2xs);
}
.assure b { font-size: var(--text-lg); color: var(--color-forest); }
.assure p { color: var(--color-ink-2); }
.assure .wa { color: var(--color-forest); }

.steps-h { margin-top: var(--space-3xl); font-size: var(--text-title); color: var(--color-forest); }
.steps { list-style: none; counter-reset: step; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding-top: var(--space-md); border-top: 2px solid var(--color-forest); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-forest); color: var(--color-accent); font-weight: 800; font-size: var(--text-lg);
}
.steps b { display: block; font-size: var(--text-lg); color: var(--color-forest); }
.steps p { color: var(--color-ink-2); margin-top: var(--space-2xs); }

/* ── FAQ: rows beside the head ────────────────────────── */
.faq-grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; min-height: 44px;
  padding: var(--space-lg) var(--space-xl) var(--space-lg) 0; font-weight: 800; font-size: var(--text-lg); color: var(--color-forest);
  border-radius: var(--space-2xs);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--space-xs); top: calc(50% - 9px); width: 12px; height: 12px;
  border-right: 2.5px solid var(--color-brand); border-bottom: 2.5px solid var(--color-brand);
  transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq summary:hover { color: var(--color-brand); }
.faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.faq p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 62ch; }
.faq .wa { color: var(--color-forest); }

/* ── Video: gambar dulu, pemutar dimuat saat diklik ───── */
.vid-sec { background: var(--color-paper-3); }
.vid-head { display: grid; gap: var(--space-md); }
.vid {
  position: relative; margin-top: var(--space-2xl); aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-card); overflow: hidden; background: var(--color-forest); box-shadow: var(--shadow-card);
}
.vid iframe, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.vid-play img { width: 100%; height: 100%; object-fit: cover; }
.vid-btn {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; padding-left: var(--space-2xs);
  background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 5px 0 var(--color-accent-deep);
  transition: transform var(--dur-short) var(--ease-out);
}
.vid-len {
  position: absolute; right: var(--space-md); bottom: var(--space-md); padding: var(--space-2xs) var(--space-xs);
  border-radius: 6px; background: var(--color-forest); color: var(--color-on-forest); font-size: var(--text-sm); font-weight: 700;
}
.vid-play:hover .vid-btn { transform: scale(1.06); }
.vid-play:active .vid-btn { transform: scale(0.96); }
.vid-play:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -6px; }

/* ── Penutup ──────────────────────────────────────────── */
.final { padding-block: var(--section-gap); }
.final-in { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: end; }
.final h2 { font-size: var(--text-display-s); max-width: 16ch; }
.final .sec-lead { max-width: 40ch; }
.final-act { display: grid; gap: var(--space-sm); justify-items: start; }
.final-act .btn-sub { color: var(--color-on-forest-2); text-align: left; margin: 0; }
.final-act .wa { color: var(--color-on-forest); }

.foot { background: var(--color-forest-2); color: var(--color-on-forest-2); font-size: var(--text-sm); padding: var(--space-2xl) 0 var(--space-4xl); }
.foot-in { display: grid; gap: var(--space-md); }
.foot .logo { font-size: var(--text-lg); }
.foot p { max-width: 52ch; }
.foot .wa { color: var(--color-on-forest); }

/* ── Sticky buy bar (phones) ──────────────────────────── */
.sticky {
  position: fixed; inset: auto var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom)) var(--space-sm);
  z-index: var(--z-sticky); transform: translateY(160%); transition: transform var(--dur-long) var(--ease-out);
}
.sticky.on { transform: none; }
.sticky .btn { width: 100%; box-shadow: 0 5px 0 var(--color-accent-deep), 0 12px 30px color-mix(in oklab, var(--color-forest-2) 35%, transparent); }

/* ── Buyer toast (real buyers from buyers.json) ────────── */
#sp-toast {
  position: fixed; left: var(--space-sm); bottom: calc(88px + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  background: var(--color-paper-2); border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--color-forest-2) 18%, transparent);
  opacity: 0; transform: translateX(-20px); pointer-events: none;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
#sp-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--color-paper-2); font-weight: 800; }
#sp-toast .sp-t { font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.35; }
#sp-email { font-weight: 800; color: var(--color-ink); }

/* ── Motion (only under .mo, which motion.js sets) ─────── */
.mo .rv { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.mo .rv.in { opacity: 1; translate: 0 0; }

/* ── 40rem+ ───────────────────────────────────────────── */
@media (min-width: 40rem) {
  .shot { flex-basis: 46%; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { grid-template-columns: minmax(0, 1fr); }
}

/* ── 60rem+ desktop ───────────────────────────────────── */
@media (min-width: 60rem) {
  .hero { padding-block: var(--space-xl) var(--space-3xl); }
  .hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); row-gap: 0;
    grid-template-areas: "head struk" "act struk"; grid-template-rows: auto 1fr; align-items: start;
  }
  .hero-head { padding-top: var(--space-3xl); }
  .hero-act { margin-top: var(--space-xl); }
  .hero-act .btn { display: inline-flex; }
  .struk { justify-self: end; }

  .bocor-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: start; }
  .nota { margin-top: var(--space-sm); }

  .app-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: end; }
  .app-head .sec-lead { margin-top: 0; }
  .vid-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: end; }
  .vid-head .sec-lead { margin-top: 0; }
  .shots { overflow: visible; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: var(--gap-columns); grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); align-items: start; }
  .shot { max-width: none; }
  .shot:nth-child(2) { margin-top: var(--space-3xl); }
  .shot:nth-child(3) { margin-top: var(--space-xl); }
  .dots { display: none; }

  .proof-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); }

  .price-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); }
  .buy { padding-top: var(--space-xl); }
  .buy .btn { display: inline-flex; min-width: 360px; }

  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-3xl); }

  .final-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); }

  .sticky { display: none; }
  #sp-toast { bottom: var(--space-lg); left: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .mo .rv { opacity: 1; translate: none; }
  .progress { display: none; }
  .struk, .screen { transform: none; }
}