/* Hallmark · shape: workbench · genre: modern-minimal · theme: Coral (deal 1/3, seed indonesian-operations-platform-restaurant-f1cf·a42ceda2·2026-11-05·r0) · redesign: full
 * hero: settled · nav: banner over a retracting bar · footer: mast · imagery: the product, 4 playables built from the demo tenant and 5 captures (capture-demo.mjs, handbook 2023) · signature: a sale that becomes food cost, played
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · job: sign up, Coba gratis in the bar, the hero and the sticky bar · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, on a phone the stock, Ringkasan and approval captures scroll sideways at 1x instead of fitting, because any narrower rectangle loses the status and total columns the captions speak about; the frames show their cut edge and take focus only while they scroll */
/* Hallmark · dismissed 23 · the accent at 5.0% of 1280x800 is the orange of the hero's dishes (ayam, sate, nasi goreng) and the one marker word, which the stamp declares as the pile posture; the controls keep to deep blue */
/* Hallmark · waive 72 · .lp-stair__hi is the marker band behind one display word inside a 0.98 line-height staircase · taller padding would paint the band over the descenders of the line above (LANGSUNG), so it keeps 0.04em/0.08em above and below and the full 0.5em at the sides */
/* Hallmark · waive 24b · .lp-bar__row, .lp-hero__body and .lp-try use vw clamps · the staircase hero follows the owner's reference geometry, which steps with the viewport rather than the 4px scale */
/* Hallmark · waive 77 · .lp-tanya__grid keeps the 5/7 split of spec 5.8 · the questions are the owner's reading section, its four answers set as rows */
/* Hallmark · design system 2026-11-06: tokens mapped to the AturKuliner DLS (indigo, deep blue, orange, #F7F8FC, Roboto/Inter, radii 5/10/20, DS shadows); hero pile = the DLS food illustrations */
/* Hallmark · rework 2026-11-06: owner's reference (staircase head, cut buttons, ball cluster, neutral paper); logos, press, Harga links, handbook capture and Traveloka Eats dropped on the owner's call; hero desk moved to #coba */
/* Hallmark · hero-review: fix · 5 findings · 5 resolved */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: none */
/* Hallmark · dismissed F4 · .lp-btn--card is the Coral cotton letterpress secondary beside the ink board; the ink board is the only filled primary on the page */
/* Hallmark · words: prose 421 visible words (nav, hero, heads, captions, index cards, proof, questions, form labels, footer) under the 450 ceiling; the hero desk and the three playables add 314 UI labels the visitor operates, waived on the record by the build ledger (Task 4 ruling) */
/* Hallmark · words: FAQ window 110 > 80 at 1440 · owner's verbatim copy (spec 5.8), mirrored in FAQPage */
/* Hallmark · dropped "AturKuliner membantu kami untuk menghemat waktu pada proses belanja dan membuat PO dari yang sebelumnya dapat memakan hingga 2 hari sekarang dapat selesai dalam hitungan jam. Proses belanja pun menjadi jadi lebih presisi dan transparan dengan approval.", fathia (scm manager), Testimonial-image.webp, 5dd366e1708b4de445b60a2e_quote.svg, logo-overhot.png · owner's call: Vincent removed the Overhot quote (spec 9.5); the Overhot Yaa logo stays in the client row */
/* Hallmark · dropped typed-text hero, "kelola online sistem belanja dan stok untuk hem" · 19/62: the typing loop rewrote the headline every second and printed nothing with scripting off; the owner's spec sets one still H1 */
/* Hallmark · dropped alert() → inline status · gate 16: the success alert became the form's polite live status line; the handler still posts the same fields to /api/contact-us */
/* Hallmark · dropped #form · the nav's Harga now goes to the pricing page (owner's spec 5.7) and the hero's second action opens the playable demo; the form keeps id="form" in the close band */
/* Hallmark · reworded "Bisnis Anda dalam angka, tanpa rumus" to "Modal per porsi, hari itu juga", "Kelola belanja dengan mudah & cepat" to "Belanja dari angka, bukan perkiraan", "Kendali penuh stakeholder" to "Disetujui dulu, baru dibayar", "Kembangkan bisnismu dengan AturKuliner sekarang" to "Kenalan dengan tim AturKuliner" · the owner's copy rule (spec 5.9b): each heading names the thing the section shows */
/* Hallmark · dropped program-display.webp, Group_15.webp, Group_16.webp, Group_17.webp, dashboard.webp, integration_illustration-2.webp, landingpage1.webp · the Webflow illustrations and the drawn dashboard give way to captures and playables of the real product (84) */
/* Hallmark · dropped Icon-twitter_2.png, Icon-facebook.png, instagram.svg, linkedin.svg · the social icons linked nowhere: no profile URLs exist yet (spec 8), so the footer shows none until the owner supplies them */
/* Hallmark · reworded "Overhot Yaa.png" to "overhot-yaa.png", "Tekosu.png" to "tekosu.png", "KBA.png" to "kba.png", "Dapur Karimah.png" to "dapur-karimah.png", "Mambe.png" to "mambe.png", "Nongki Cafe.png" to "nongki-cafe.png", "logo-foodizz.png" to "foodizz.png" · the same client marks, moved to landing-page-3/images/logos and trimmed of their transparent margins */
/* Hallmark · dropped WATI_logo_square_2.png · the chat widget's vendor fallback, shown only because the brand photo URL had expired (403); brandImg now points at the AturKuliner mark */

/* Page-level override: the spec caps the container at 1200px (scaffold default is 1440px). */
:root { --container: 1200px; --banner-h: 36px; --bar-h: 64px; --head-pad: clamp(16px, 3vw, 38px); --head-h: calc(var(--head-pad) + 56px); }
h1, h2, h3 { color: var(--color-heading); text-wrap: balance; }


/* ---- controls: letterpress cards ---- */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.lp-btn--ink { background: var(--ak-primary-deep); color: var(--ak-white); box-shadow: var(--shadow-button); }
.lp-btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.lp-btn--ink:hover { box-shadow: var(--cast-stock-lift); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible, .lp-nav__toggle:focus-visible, .lp-nav__list a:focus-visible, .lp-foot a:focus-visible, .lp-bar__brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- skip link: the first tab stop, out of sight until it takes focus ---- */
.lp-skip { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-stock); background: var(--color-board); color: var(--color-board-type); font-weight: 500; text-decoration: none; transform: translateY(calc(-100% - var(--space-md))); }
.lp-skip:focus-visible { transform: none; outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- head: one transparent bar laid over the hero, so the hero is exactly one screen; the mobile menu drops under it ---- */
.lp-head { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-raised); }
.lp-bar { background: transparent; }
.lp-bar__row { position: relative; display: flex; align-items: center; gap: clamp(20px, 5vw, 56px); height: var(--head-h); padding-top: var(--head-pad); box-sizing: border-box; }
.lp-bar__brand { display: block; flex: none; }
.lp-bar__brand img { width: 168px; height: auto; }
.lp-nav { margin-left: 0; }
.lp-nav__list { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; font-size: var(--text-md); font-weight: 500; }
.lp-nav__list a { display: inline-block; padding: var(--space-xs) 0; color: var(--ak-primary); text-decoration: none; white-space: nowrap; }
.lp-nav__list a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.lp-bar__actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
.lp-nav__toggle { display: none; min-height: 48px; padding: 0 var(--space-md); border: 0; background: transparent; color: var(--ak-primary); font-weight: 700; cursor: pointer; }

/* Material Symbols Rounded, the DS icon set (only the glyphs the page names are loaded). */
.msr { font-family: var(--font-icon); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* DS buttons: blue primary (radius 5, deep blue, button shadow), orange pill (radius 20), outline (white, indigo border). Roboto Bold. */
.lp-cut { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input); background: var(--ak-primary-deep); color: var(--ak-white); font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-button); transition: filter var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.lp-cut:hover { filter: brightness(1.08); }
.lp-cut:active { transform: translateY(1px); filter: brightness(0.96); }
.lp-cut:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.lp-cut--ghost { border-color: var(--ak-primary); background: var(--ak-white); color: var(--ak-primary); box-shadow: none; }
.lp-cut--ghost:hover { filter: none; background: var(--ak-lavender); }
.lp-cut .msr { font-size: 20px; line-height: 1; }
.lp-cut__wrap { display: inline-flex; align-items: center; gap: var(--space-md); }

@media (max-width: 60rem) {
  .js .lp-nav__toggle { display: inline-flex; align-items: center; }
  .js .lp-bar__row { flex-wrap: nowrap; }
  .js .lp-nav__list { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: var(--space-md); padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-paper); box-shadow: 0 12px 24px -12px oklch(var(--shade) / 0.3); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .js .lp-nav__list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .lp-nav__list a { display: block; padding: var(--space-2xs) 0; }
  html:not(.js) .lp-bar__row { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .lp-nav { order: 3; flex-basis: 100%; }
  html:not(.js) .lp-nav__list { flex-wrap: wrap; column-gap: var(--space-lg); padding-bottom: var(--space-xs); }
}
@media (max-width: 40rem) {
  .lp-bar__row { gap: var(--space-sm); }
  .lp-bar__brand img { width: 112px; }
  .lp-nav__toggle { padding: 0 var(--space-sm); }
  .lp-bar__actions .lp-cut { min-height: 44px; padding: 0 var(--space-md); }
}
@media (max-width: 22.5rem) {
  .lp-bar__brand img { width: 92px; }
  .lp-bar__actions .lp-cut { padding: 0 var(--space-sm); font-size: var(--text-sm); }
}

/* ---- footer: mast ---- */
.lp-foot { padding-block: var(--space-3xl) var(--space-xl); background: var(--ak-white); font-size: var(--text-md); }
.lp-foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--space-xl) var(--gap-columns); }
.lp-foot__brand { display: block; width: 200px; }
.lp-foot__brand img { width: 100%; height: auto; }
.lp-foot__about p { max-width: 45ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.lp-foot__stores { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.lp-foot__stores img { width: 136px; height: auto; }
.lp-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.lp-foot__title { margin-bottom: var(--space-xs); color: var(--color-heading); font-weight: 700; }
.lp-foot__col a { padding-block: var(--space-2xs); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.lp-foot__col a:hover { color: var(--color-heading); text-decoration: underline; text-underline-offset: 0.2em; }
.lp-foot__contact { display: flex; flex-direction: column; gap: var(--space-xs); font-style: normal; color: var(--color-ink-2); }
.lp-foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .lp-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot__about { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .lp-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot__col:last-child { grid-column: 1 / -1; }
}

/* ---- controls: the cotton letterpress card (secondary) and a text button ---- */
.lp-btn--card { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--edge-stock); }
.lp-btn[aria-busy="true"] { cursor: progress; }
.lp-textbtn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-xs); border: 0; background: none; color: var(--color-print); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--color-accent-2); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.lp-textbtn:hover { text-decoration-thickness: 2px; }
.lp-textbtn:active { transform: translateY(1px); }
.lp-textbtn:disabled { color: var(--color-muted); text-decoration-color: var(--color-rule-2); cursor: not-allowed; transform: none; }
.lp-btn:focus-visible, .lp-textbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- hero: the reference's staircase. Six lines of the headline step down the left, the last in the brand orange;
   the ball cluster plays on the right behind a scrim; the cut button sits under the indent. ---- */
.desk { background-color: var(--color-desk); }
.stock { background-color: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lp-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: var(--head-h); box-sizing: border-box; overflow: hidden; }
.lp-hero__balls { --pile-align: end; position: absolute; top: calc(var(--head-h) + 2vh); right: 2%; width: 44%; max-height: calc(100% - var(--head-h) - 4vh); height: auto; aspect-ratio: 1 / 1; pointer-events: none; }
.lp-hero__body { --indent: min(238px, 28vw); position: relative; padding-block: var(--space-xl) min(clamp(36px, 6vw, 80px), 7vh); }
.lp-stair { margin: 0; font-size: min(clamp(34px, 7.6vw, 80px), 9.2vh); font-weight: 700; line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-heading); overflow-wrap: break-word; min-width: 0; }
.lp-stair__a, .lp-stair__b { display: block; }
.lp-stair__b { padding-left: var(--indent); }
/* The accent word: the DS orange on the DS indigo (4.9:1), a marker band behind the one word, since orange on the page colour sits at 1.98:1. */
.lp-stair__hi { display: inline-block; padding: 0.04em 0.5em 0.08em; margin-left: -0.5em; border-radius: var(--radius-input); background: var(--ak-primary); color: var(--color-accent); font-style: normal; }
.lp-stair--s { font-size: var(--text-section); }
.lp-hero__lead { max-width: 36ch; margin: clamp(16px, 2vw, 28px) 0 0 var(--indent); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--color-ink-2); }
.lp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: clamp(20px, 3vw, 36px) 0 0 var(--indent); }
.lp-hero__terms { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
/* Landscape tablets: a smaller head and a shorter step, so the staircase clears the pile. */
@media (max-width: 1100px) and (orientation: landscape) {
  .lp-hero__balls { width: 40%; }
  .lp-hero__body { --indent: min(96px, 9vw); }
  .lp-stair { font-size: min(6vw, 9.2vh); }
}
/* Portrait tablets and phones: the pile on top, the staircase under it. */
@media (max-width: 700px), (max-width: 1100px) and (orientation: portrait) {
  .lp-hero { justify-content: flex-start; }
  .lp-hero__balls { --pile-align: center; position: relative; top: auto; right: auto; width: 100%; max-height: none; height: clamp(200px, calc(100svh - 690px), 520px); aspect-ratio: auto; margin-top: var(--space-md); }
  .lp-hero__body { padding-top: var(--space-md); }
}
@media (max-width: 700px) {
  .lp-hero__balls { height: auto; aspect-ratio: 6 / 5; margin-top: 0; }
  .lp-hero__body { --indent: min(120px, 14vw); padding-bottom: var(--space-xl); }
  .lp-stair { font-size: clamp(32px, 9vw, 56px); }
  .lp-hero__lead, .lp-hero__cta { margin-left: 0; }
}

/* ---- try: the reference's about section. A two-line staircase head and a paragraph on the left;
   the playable desk on the right, flush to the screen edge on a slab of the brand orange. ---- */
.lp-try { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: clamp(60px, 10vw, 140px) 0 clamp(30px, 5vw, 70px) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 18%, var(--color-paper-2) 100%); }
.lp-try__text { --indent: min(160px, 18vw); flex: 1 1 420px; min-width: 300px; }
.lp-try__text p { max-width: 520px; margin: 32px 0 0 var(--indent); font-size: clamp(16px, 1.6vw, 17px); line-height: 1.7; color: var(--color-ink-2); }
.lp-try__text .lp-cut { margin: 36px 0 0 var(--indent); }
.lp-try__media { position: relative; flex: 1 1 360px; min-width: 280px; display: flex; justify-content: flex-end; }
/* The slab: the DS lavender, flush to the screen edge as in the owner's reference; the desk's white paper sits on it. */
.lp-try__slab { position: absolute; top: 40px; right: 0; bottom: -40px; width: min(100%, 644px); border-radius: var(--radius-card) 0 0 var(--radius-card); background: var(--ak-lavender); }
.lp-try__desk { position: relative; z-index: 1; width: min(100%, 644px); padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; }
@media (max-width: 700px) {
  .lp-try { padding-right: var(--gutter); }
  .lp-try__text { --indent: 0px; }
  .lp-try__slab { right: calc(var(--gutter) * -1); }
  .lp-try__desk { padding-right: 0; }
}

.lp-try__desk[data-slot] { overflow: visible; background: none; }
.lp-desk { --receipt-w: 296px; --under: 24px; --tuck: 36px; display: grid; grid-template-columns: var(--receipt-w) minmax(0, 1fr); align-items: start; }
.lp-desk__left { position: relative; z-index: 3; margin-top: calc(var(--space-3xl) + var(--space-xl)); }
.lp-desk__right { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* The receipt: narrow thermal paper with a torn bottom edge. The mask cuts the teeth, so its cast
   comes from a drop-shadow on the wrapper, which follows the cut edge. */
.lp-desk__paper { position: relative; filter: drop-shadow(5px 5px 5px oklch(var(--shade) / 0.22)); }
/* The printer slot the struk feeds out of (demos.js printOut): a DS indigo bar a little wider than the paper. */
.lp-printer { position: relative; z-index: 1; height: 12px; margin: 0 calc(var(--space-sm) * -1) -6px; border-radius: 6px; background: linear-gradient(var(--ak-primary), color-mix(in oklab, var(--ak-primary) 70%, black)); box-shadow: 0 2px 4px oklch(var(--shade) / 0.25); }
.lp-desk__paper .lp-receipt { position: relative; }
.lp-receipt { --tooth: 7px; padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + var(--tooth)); border-radius: var(--radius-stock) var(--radius-stock) 0 0; font-size: var(--text-md); line-height: 1.45; box-shadow: var(--edge-stock);
  -webkit-mask: linear-gradient(var(--color-ink), var(--color-ink)) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 100%, transparent, var(--color-ink) 1deg 89deg, transparent 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
          mask: linear-gradient(var(--color-ink), var(--color-ink)) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 100%, transparent, var(--color-ink) 1deg 89deg, transparent 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x; }
.lp-receipt__head { padding-bottom: var(--space-sm); border-bottom: 1px dashed var(--color-rule-2); font-weight: 700; text-align: center; }
.lp-receipt__lines { margin: 0; padding: 0; list-style: none; }
.lp-receipt__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px dashed var(--color-rule-2); }
.lp-receipt__item { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-receipt__lines li > :nth-child(2) { color: var(--color-ink-2); }
.lp-receipt__lines .fig { white-space: nowrap; }
.lp-receipt__total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-sm); }
.lp-receipt__sum { display: flex; align-items: baseline; gap: var(--space-xs); font-weight: 700; }
.lp-receipt__sum b { font-size: var(--text-md); font-weight: 400; }
.lp-receipt__count { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); text-align: right; }
/* The stock line keeps its figure and status on two lines in every state, so a longer status never moves the button. */
.lp-receipt__more .lp-receipt__stock dd { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2xs); }
.lp-receipt__more { display: none; margin: var(--space-sm) 0 0; padding-top: var(--space-xs); border-top: 1px dashed var(--color-rule-2); }
/* The purchase suggestion: the index card says it on the wide desk; under 72rem the receipt says it (hidden until the reorder point). */
.lp-receipt__buy { display: none; margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }

/* The one settled state: Lunas pressed into the stock in --color-paid, tilted a few degrees. */
.lp-pressed { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paid-bg); color: var(--color-paid-ink); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; }

/* The control under the receipt: one letterpress primary, then two small text buttons on one line. */
.lp-desk__controls { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); max-width: calc(var(--receipt-w) - var(--tuck)); margin-top: var(--space-lg); }
.lp-desk__links { display: flex; flex-wrap: wrap; column-gap: var(--space-sm); font-size: var(--text-sm); }
.lp-desk__links .lp-textbtn { min-height: 44px; padding: 0; }
/* Until demos.js has wired every playable (html.demos-ready) the desk shows the finished sale and its controls do nothing,
   so they are not shown: without scripting they take no room; with scripting they keep their room while the module loads,
   so the hero does not shift when they appear (and stay out of sight if the module fails). */
html:not(.js) .lp-desk__controls { display: none; }
html.js:not(.demos-ready) .lp-desk__controls { visibility: hidden; }

/* The HPP sheet lies behind, its left edge under the receipt; the index card is tucked under the receipt's corner. */
.lp-sheet { position: relative; padding: var(--space-lg); border-radius: var(--radius-stock); font-size: var(--text-md); line-height: 1.45; }
.lp-desk__hpp { z-index: 1; width: calc(100% + var(--under)); margin-left: calc(var(--under) * -1); padding: var(--space-lg) var(--space-md) var(--space-lg) calc(var(--under) + var(--space-md)); }
.lp-sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); padding-bottom: var(--space-sm); margin-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.lp-sheet__head b { font-size: var(--text-md); font-weight: 700; }
.lp-rows { margin: 0; }
.lp-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-2xs); }
.lp-rows dt { color: var(--color-ink-2); }
.lp-rows dd { margin: 0; white-space: nowrap; }
.lp-rows__lead dt { color: var(--color-print); font-weight: 500; }
.lp-rows__lead dd { font-size: var(--text-lg); line-height: 1.2; }
.lp-rows--totals { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.lp-rows dd, .lp-receipt__sum b, .lp-status__word { display: inline-block; }

.lp-index { z-index: 2; width: min(100% + var(--tuck), 288px); margin: calc(var(--space-md) * -1) 0 0 calc(var(--tuck) * -1); padding: var(--space-md) var(--space-lg) var(--space-lg) calc(var(--tuck) + var(--space-md)); font-size: var(--text-md); border-radius: var(--radius-card); border-top: 2px solid var(--color-ink-2); }
.lp-index__head { margin-bottom: var(--space-xs); font-weight: 700; }
.lp-index__note { margin-top: var(--space-xs); color: var(--color-ink-2); }

/* Status stays an ink outline in both states; coral is spent only on Lunas. */
.lp-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); }
.lp-status__word { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paid-bg); color: var(--color-paid-ink); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.lp-status__word[data-state="warn"] { background: var(--color-warn-bg); color: var(--color-warn-ink); }

/* Under 72rem the desk condenses to the one receipt, which then carries the HPP, the untung and the stock line;
   the hero keeps its two columns down to 60rem, so it still fills one screen at 1024. */
@media (max-width: 72rem) {
  .lp-desk { display: block; max-width: 360px; }
  .lp-desk__left { margin-top: 0; }
  .lp-desk__right { display: none; }
  .lp-receipt__more { display: block; }
  .lp-receipt__buy { display: block; }
  .lp-desk__controls { max-width: none; }
}
/* Phones: a tighter rhythm, so the receipt's last row (stock and status) ends above the WhatsApp button in the first screen. */
@media (max-width: 40rem) {
  .lp-desk .lp-receipt { padding-top: var(--space-md); }
  .lp-desk .lp-receipt__lines li { padding-block: var(--space-xs); }
  .lp-desk .lp-receipt__total { padding-top: var(--space-xs); }
  .lp-desk .lp-receipt__more { margin-top: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-textbtn { transition: none; }
  .lp-btn:hover, .lp-btn:active, .lp-textbtn:active { transform: none; }
}

/* ---- demo: one day in one outlet (Workbench figures). Splits and Showcases alternate; the split side
   swaps once (figure 3) and stays. Playables sit on the desk as paperwork; captures sit in slots, unframed. ---- */
:root { --radius-groove: 12px; --frame-line: color-mix(in oklab, var(--color-ink) 8%, transparent); }
.lp-demo { padding-block: var(--section-gap) var(--section-gap-s); }
.lp-demo__head h2 { max-width: 16ch; }
.lp-demo__head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }

.lp-fig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin: var(--space-3xl) 0 0; }
.lp-demo__head + .lp-fig { margin-top: var(--space-2xl); }
.lp-fig figcaption { min-width: 0; }
.lp-fig figcaption p { margin-top: var(--space-sm); max-width: 44ch; color: var(--color-ink-2); }
.lp-fig figcaption .lp-fig__note { display: inline-block; margin-top: var(--space-md); padding-left: var(--space-sm); border-left: 2px solid var(--color-print); color: var(--color-print); font-size: var(--text-sm); font-weight: 500; }
.lp-fig__source { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* Split: the caption on five columns, the visual on seven, centred on each other. */
.lp-fig--split { align-items: start; }
.lp-fig--split > .lp-fig__visual { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.lp-fig--split > figcaption { grid-column: 1; grid-row: 1 / span 2; }
.lp-fig--split:has(> .lp-fig__aside) > figcaption { grid-row: 1; align-self: end; }
.lp-fig--split > .lp-fig__aside { grid-column: 1; grid-row: 2; align-self: start; }
.lp-fig--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lp-fig--flip > .lp-fig__visual { grid-column: 1; }
.lp-fig--flip > figcaption { grid-column: 2; }
.lp-fig--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.lp-fig__stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); }

/* Showcase: the caption as the head block on the same five and seven columns, the visual across the container under it.
   Every figure has its figcaption first in the DOM, so the reading order is the visual order at every width. */
.lp-fig--show > :not(figcaption) { grid-column: 1 / -1; grid-row: 2; }
.lp-fig--show > figcaption { grid-row: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: baseline; }
.lp-fig--show > figcaption p { margin-top: 0; }

/* Captures: the theme's radius and an inset outline, shown at half their 2x pixels at most; never retouched or tinted. */
.lp-shot[data-slot] { border-radius: var(--radius-card); background: var(--color-cotton); }
.lp-shot[data-slot] > img { position: static; width: 100%; height: auto; object-fit: initial; filter: none; border-radius: inherit; }
/* The app captures lie on one cotton mat each, the same mat for all four, as wide as their column or the container. */
.lp-shot--mat[data-slot] { width: 100%; padding: var(--space-sm); border-radius: var(--radius-stock); background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.lp-shot--mat[data-slot] > img { border-radius: var(--radius-input); }
.lp-shot--hp { width: min(100%, 347px); }
.lp-fig__wide { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
.lp-fig__label { margin-bottom: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }

/* Playables: a felt desk with the paperwork on it. */
.lp-play[data-slot] { overflow: visible; padding: var(--space-lg); border-radius: var(--radius-card); outline: 1px solid var(--frame-line); outline-offset: -1px; }
/* The HPP and Simulasi sheets are one object each: no tray around them, the sheet casts straight onto the paper. The kasir tray holds several objects and stays. */
.lp-play[data-slot].lp-hpp, .lp-play[data-slot].lp-sim { padding: 0; border-radius: 0; outline: 0; background: none; }

/* Controls shared by the playables: letterpress items, a groove for a choice, fields, a range and a switch. */
.lp-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-stock); background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); text-align: left; font-weight: 500; line-height: 1.3; text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.lp-item .fig { flex: none; font-weight: 400; color: var(--color-ink-2); }
@media (hover: hover) { .lp-item:not(:disabled):hover { box-shadow: var(--edge-stock), var(--cast-stock-lift); } }
.lp-item:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.lp-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.demos-ready .lp-item:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Until demos.js is ready the menu reads as a list: the buttons are disabled in the markup and look at rest. */
html:not(.demos-ready) .lp-item:disabled { cursor: default; box-shadow: var(--edge-stock), var(--cast-stock); }

.lp-groove { margin: 0; padding: 0; border: 0; min-width: 0; }
.lp-groove legend, .lp-field label, .lp-field__label { padding: 0; margin-bottom: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; }
.lp-groove__track { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-groove); background: var(--color-paper-2); box-shadow: var(--press-groove); }
.lp-groove input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lp-groove label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-input); color: var(--color-ink-2); font-weight: 500; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .lp-groove input:not(:checked):not(:disabled) + label:hover { color: var(--color-print); text-decoration: underline; text-decoration-color: var(--color-accent-2); text-underline-offset: 0.2em; } }
.lp-groove input:checked + label { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
.lp-groove input:not(:disabled) + label:active { transform: translateY(1px); }
.lp-groove input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lp-groove input:disabled + label { opacity: 0.55; cursor: not-allowed; }

.lp-field { display: flex; flex-direction: column; min-width: 0; }
.lp-field input[type="text"] { width: 100%; min-height: 48px; padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-print); text-align: right; outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .lp-field input[type="text"]:hover { border-color: var(--color-print); } }
.lp-field input[type="text"]:focus-visible { outline-color: var(--color-focus); }
.lp-field input[type="text"]:disabled { opacity: 0.55; cursor: not-allowed; }
.lp-field input[aria-invalid="true"] { border-color: var(--color-error); }
.lp-field__error { min-height: 1.4em; margin-top: var(--space-2xs); color: var(--color-error); font-size: var(--text-sm); }

.lp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.lp-range::-webkit-slider-runnable-track { height: 12px; border-radius: var(--radius-groove); background: var(--color-paper-2); box-shadow: var(--press-groove); }
.lp-range::-moz-range-track { height: 12px; border-radius: var(--radius-groove); background: var(--color-paper-2); box-shadow: var(--press-groove); }
.lp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 28px; margin-top: calc(var(--space-xs) * -1); border: 0; border-radius: var(--radius-input); background-color: var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); transition: transform var(--dur-micro) var(--ease-out); }
.lp-range::-moz-range-thumb { width: 32px; height: 28px; border: 0; border-radius: var(--radius-input); background-color: var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
@media (hover: hover) { .lp-range:not(:disabled):hover::-webkit-slider-thumb { box-shadow: var(--edge-stock), var(--cast-stock-lift); } }
.lp-range:active::-webkit-slider-thumb { transform: translateY(1px); }
.lp-range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lp-range:disabled { opacity: 0.55; cursor: not-allowed; }

.lp-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 56px; height: 32px; margin: 0; border-radius: var(--radius-groove); background: var(--color-paper-2); box-shadow: var(--press-groove); cursor: pointer; }
.lp-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: var(--radius-input); background-color: var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); transition: transform var(--dur-short) var(--ease-in-out); }
.lp-switch:checked { background: var(--ak-info); }
.lp-switch:checked::before { transform: translateX(24px); }
@media (hover: hover) { .lp-switch:not(:disabled):hover::before { box-shadow: var(--edge-stock), var(--cast-stock-lift); } }
.lp-switch:active::before { transform: translateY(1px); }
.lp-switch:checked:active::before { transform: translate(24px, 1px); }
.lp-switch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lp-switch:disabled { opacity: 0.55; cursor: not-allowed; }

/* Until demos.js is ready the playables show their finished state; controls that would do nothing are not shown
   (no room without scripting, their room kept while the module loads, as on the hero desk). */
html:not(.js) .lp-kasir__controls, html:not(.js) .lp-hpp__actions, html:not(.js) .lp-sim__controls { display: none; }
html.js:not(.demos-ready) .lp-kasir__controls, html.js:not(.demos-ready) .lp-hpp__actions, html.js:not(.demos-ready) .lp-sim__controls { visibility: hidden; }
html:not(.demos-ready) .lp-hpp input[type="text"] { pointer-events: none; }

/* 1. Mini kasir: the menu as letterpress cards on the desk, the struk beside it. */
.lp-kasir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 264px); gap: var(--space-lg); align-items: start; }
.lp-kasir__hint { margin-bottom: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.lp-kasir__items { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.lp-kasir__controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); }
.lp-kasir .lp-receipt { min-height: 21rem; }
.lp-kasir .lp-receipt__item { white-space: normal; }
.lp-kasir__pay { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); }
/* Unpaid: the stamp keeps its place (no shift) but is gone for eyes and screen readers alike. */
.lp-kasir [data-kasir-lunas]:not([data-pressed]) { visibility: hidden; }

/* 3. Kalkulator HPP: one cotton sheet, three editable rows, two fixed lines, the result against Target HPP 50 %. */
.lp-hpp__sheet { margin: 0; }
.lp-sheet__head span { color: var(--color-muted); font-size: var(--text-sm); }
.lp-hpp__rows { display: flex; flex-direction: column; gap: var(--space-sm); }
.lp-hpp__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 5.5rem; gap: var(--space-sm); align-items: end; }
.lp-hpp__line { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; white-space: nowrap; }
.lp-hpp__fixed { margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.lp-hpp__sell { width: min(100%, 14rem); margin-top: var(--space-md); }
.lp-hpp__out { margin-top: 0; }
.lp-meter { position: relative; height: 12px; margin: var(--space-md) 0 var(--space-xl); border-radius: var(--radius-input); background: var(--color-paper-2); box-shadow: var(--press-groove); }
.lp-meter__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--color-ink-2); transform-origin: left center; transform: scaleX(var(--pct, 0)); transition: transform var(--dur-short) var(--ease-out); }
.lp-meter__target { position: absolute; top: -6px; bottom: -6px; left: 50%; width: 2px; background: var(--color-print); }
.lp-meter__target span { position: absolute; top: calc(100% + var(--space-2xs)); left: 50%; transform: translateX(-50%); color: var(--color-print); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.lp-hpp__actions { display: flex; justify-content: flex-end; }

/* 4. Simulasi: two controls over the table that mirrors Simulasi Kebutuhan; the status and the PR line below. */
.lp-sim__controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--space-lg); align-items: end; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.lp-sim__range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-sm); }
.lp-sim__range .lp-range { grid-column: 1 / -1; }
.lp-sim__value { font-size: var(--text-lg); }
.lp-sim__toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2xs) var(--space-sm); min-height: 44px; }
.lp-sim__toggle .lp-field__label { grid-column: 1 / -1; margin: 0; }
.lp-sim__toggle label { margin: 0; color: var(--color-print); font-size: var(--text-md); font-weight: 400; cursor: pointer; }
.lp-sim__table { margin-top: var(--space-md); overflow-x: auto; }
.lp-sim table { width: 100%; border-collapse: collapse; }
.lp-sim caption { padding-bottom: var(--space-sm); caption-side: top; text-align: left; font-weight: 700; }
.lp-sim th, .lp-sim td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: right; vertical-align: top; white-space: nowrap; }
.lp-sim th:first-child, .lp-sim td:first-child { padding-left: 0; text-align: left; }
.lp-sim th:last-child, .lp-sim td:last-child { padding-right: 0; }
.lp-sim thead th { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.lp-sim tbody th { font-weight: 500; }
.lp-sim tfoot th, .lp-sim tfoot td { border-bottom: 0; border-top: 1px solid var(--color-print); font-weight: 700; }
.lp-sim tr[data-short] th, .lp-sim tr[data-short] td { font-weight: 700; }
.lp-sim__short { display: block; color: var(--color-error); font-size: var(--text-sm); }
/* No reserved height: at rest the status line ends the sheet; the PR line joins it only when a bahan runs short (a change the visitor makes). */
.lp-sim__status { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.lp-sim__status .lp-status { justify-content: flex-start; margin: 0; }
.lp-sim__pr { justify-self: start; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); border-left: 2px solid var(--color-print); background: var(--color-paper-2); }
.lp-sim__pr[data-off] { display: none; }

/* The sticky bottom bar: one action, dismissible, not on small screens. It is the last child of .lp-demo__after, the
   wrapper around figures 4 and 5, and a sticky element never leaves its containing block: so it can only stick while
   that wrapper is on screen, from the end of figure 3 to the end of the demo, and needs no scroll script. */
/* Zero height in the layout: the card hangs up from the bar's line, so the demo ends at its captures. */
.lp-stickybar { position: sticky; bottom: var(--space-md); z-index: var(--z-sticky); display: flex; align-items: flex-end; justify-content: center; height: 0; pointer-events: none; }
.lp-stickybar__card { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--stickybar-h); padding: var(--space-xs); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock-lift); pointer-events: auto; }
/* The card is a 48px control on an --space-xs mat. The wrapper ends with that much room under figure 5, so where the bar comes
   to rest the card hangs into the room and never covers the Saldo QRIS capture (it did at 960 to 1200 px). The room is the bar's
   own top margin, not the wrapper's padding: a sticky box stays inside its containing block's content box, so padding would
   leave the bar's resting line, and the card, where they were. */
:root { --stickybar-h: calc(48px + var(--space-xs) * 2); }
.lp-stickybar { margin-top: var(--stickybar-h); }
html:not(.demos-ready) .lp-stickybar { display: none; }

@media (max-width: 72rem) {
  .lp-kasir { grid-template-columns: minmax(0, 1fr); }
  .lp-kasir__paper { max-width: 320px; }
}
@media (max-width: 60rem) {
  .lp-stickybar { display: none; }
  .lp-fig, .lp-fig--flip, .lp-fig--wide { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); margin-top: var(--space-2xl); }
  .lp-fig > *, .lp-fig--split > .lp-fig__visual, .lp-fig--split > figcaption, .lp-fig--split > .lp-fig__aside { grid-column: 1; grid-row: auto; align-self: start; }
  /* One column: each figure's caption leads (it is first in the DOM), so a head never reads as the title of the block under the one before it. */
  .lp-fig--show > figcaption { grid-template-columns: minmax(0, 1fr); }
  .lp-fig--show > :not(figcaption), .lp-fig--show > figcaption { grid-row: auto; }
  .lp-fig--show > figcaption p { margin-top: var(--space-sm); }
  .lp-kasir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-kasir__paper { max-width: none; }
  /* The handbook crop (347px, 1x) and the kas card keep their own widths: never stretched past their pixels. */
  .lp-shot--stock, .lp-shot--approval { width: 100%; }
  /* The wide captures keep about their 1x size and scroll sideways inside their frame, never upscaled. */
  .lp-shot[data-scroll-x] { overflow-x: auto; overscroll-behavior-x: contain; }
  .lp-shot[data-slot].lp-shot--stock > img, .lp-shot[data-slot].lp-shot--ringkasan > img { width: 760px; max-width: none; }
  .lp-shot[data-slot].lp-shot--approval > img { width: 690px; max-width: none; }
  .lp-sim__controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-sim__controls .lp-textbtn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 40rem) {
  .lp-play[data-slot] { padding: var(--space-md); }
  .lp-kasir { grid-template-columns: minmax(0, 1fr); }
  .lp-hpp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-hpp__line { grid-column: 1 / -1; min-height: 0; }
  .lp-sim__controls { grid-template-columns: minmax(0, 1fr); }
  .lp-sim__sheet, .lp-hpp__sheet { padding: var(--space-md) var(--space-sm); }
  .lp-sim th, .lp-sim td { padding-inline: var(--space-3xs); font-size: var(--text-xs); }
  .lp-sim td, .lp-sim thead th + th { padding-left: var(--space-xs); }
  .lp-sim tbody th { white-space: normal; }
  .lp-sim .lp-sim__buy { display: none; }
  .lp-sim tfoot th { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-item, .lp-groove label, .lp-range::-webkit-slider-thumb, .lp-switch::before, .lp-meter__fill, .lp-field input[type="text"] { transition: none; }
  .lp-item:active, .lp-groove input + label:active, .lp-range:active::-webkit-slider-thumb { transform: none; }
}

/* ---- channels: a ruled two-column index on paper ---- */
.lp-channel { padding-block: var(--section-gap-s); }
.lp-channel__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
.lp-channel__head h2 { max-width: 22ch; }
.lp-channel__head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.lp-channel__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.lp-channel__list li { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--ak-white); box-shadow: var(--shadow-card); }
.lp-channel__list b { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; color: var(--color-heading); }
.lp-channel__list small { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.4; }
.lp-channel__list li > span:last-child { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }

/* ---- six functions: cotton index cards with offset tabs ---- */
.lp-fungsi { padding-block: var(--section-gap-s); }
.lp-fungsi h2 { max-width: 16ch; }
.lp-idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.lp-idx__card { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--ak-white); box-shadow: var(--shadow-card); }
.lp-idx__card h3 { margin-top: var(--space-xs); font-size: var(--text-title); }
.lp-idx__card p { color: var(--color-ink-2); font-size: var(--text-md); }

/* DS module tile: the icon on a lavender square, as in the app's Modul grid. */
.lp-tile { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-card); background: var(--ak-lavender); color: var(--ak-primary); }
.lp-tile.msr { font-size: 26px; }
.lp-nowrap { white-space: nowrap; }

/* Contact: what happens after the form, three steps. */

/* The WhatsApp chat widget (third party, fixed bottom right): an icon bubble, so it covers as little of the page as it can. */
#wa-widget-send-button { width: 56px !important; height: 56px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; font-size: 0 !important; }
.lp-fungsi__roles { margin-top: var(--space-xl); color: var(--color-ink-2); }

/* ---- proof: two figures on the ink band, the clients on paper ---- */
.lp-bukti { padding-bottom: 0; }
.lp-bukti__band { background: var(--color-board); color: var(--color-board-type); padding-block: var(--space-3xl); }
.lp-bukti__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.lp-bukti__fig { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-md); max-width: none; }
.lp-bukti__num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: min(min(calc(var(--text-display) * 2), 24cqi), 5rem); line-height: 0.95; letter-spacing: -0.05em; white-space: nowrap; }
.lp-bukti__unit { font-size: var(--text-title); font-weight: 500; letter-spacing: 0; }
.lp-bukti__line { font-size: var(--text-lead); line-height: 1.35; max-width: 28ch; }
.lp-bukti__clients { margin: var(--space-3xl) 0 0; }
.lp-bukti__label { margin-top: var(--space-md); }
.lp-bukti__label, .lp-bukti__press span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.lp-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.lp-bukti__press img { height: 40px; width: auto; max-width: none; filter: grayscale(1); }
/* Wide wordmarks lose a little height so they do not outweigh the round marks; the ratio is kept. */
.lp-logos li { display: flex; align-items: center; height: 40px; }
.lp-logos img { width: auto; height: auto; max-height: 40px; max-width: 112px; filter: grayscale(1); }
.lp-bukti__press { margin-top: var(--space-2xl); max-width: none; }
.lp-bukti__press a { display: inline-flex; align-items: center; gap: var(--space-md); padding-block: var(--space-xs); text-decoration: none; }
.lp-bukti__press a:hover span { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.lp-bukti__press a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 60rem) {
  .lp-channel__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .lp-channel__list li { flex-direction: row; align-items: center; padding: var(--space-md); }
  .lp-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-bukti__figs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .lp-channel__list { grid-template-columns: minmax(0, 1fr); }
  .lp-channel__list li { flex-direction: row; align-items: center; padding: var(--space-md); }
  .lp-idx { grid-template-columns: minmax(0, 1fr); }
  .lp-bukti__band { padding-block: var(--space-2xl); }
  .lp-logos { justify-content: flex-start; }
}

/* ---- questions: four plain pairs, heading left, answers right ---- */
.lp-tanya { padding-block: var(--section-gap-s); }
.lp-tanya__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.lp-tanya__list { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.lp-tanya__item { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.lp-tanya__item p { margin-top: var(--space-xs); max-width: 60ch; color: var(--color-ink-2); }

/* ---- close: the contact form as a short band on paper ---- */
/* The close: a DS indigo band. The staircase head in white with the last words in the orange (4.9:1 on indigo,
   so no marker band here), the white CTA, and the form on a white card; two dishes from the hero's pile at the corners. */
.lp-kontak { position: relative; overflow: hidden; padding-block: var(--space-4xl); background: var(--ak-primary); color: var(--ak-white); }
.lp-kontak__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); row-gap: var(--space-2xl); align-items: center; }
.lp-kontak__head { --indent: min(120px, 10vw); }
.lp-kontak h2 { max-width: none; font-size: clamp(2.5rem, 4.4vw, 4rem); color: var(--ak-white); }
.lp-kontak h2 > span { white-space: nowrap; }
.lp-kontak__hi { color: var(--color-accent); }
.lp-kontak__lead { max-width: 34ch; margin: var(--space-lg) 0 0 var(--indent); font-size: var(--text-lead); line-height: 1.5; color: color-mix(in oklab, var(--ak-white) 86%, var(--ak-primary)); }
.lp-kontak__head .lp-cut { margin: var(--space-xl) 0 0 var(--indent); }
.lp-cut--on-dark { border-color: var(--ak-white); background: var(--ak-white); color: var(--ak-primary); box-shadow: 0 8px 24px color-mix(in oklab, black 30%, transparent); }
.lp-cut--on-dark:hover { filter: none; background: var(--ak-lavender); }
.lp-cut--on-dark:focus-visible { outline-color: var(--ak-white); }
.lp-kontak__card { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--ak-white); color: var(--color-ink); box-shadow: 0 24px 60px color-mix(in oklab, black 28%, transparent); }
.lp-kontak__card-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.lp-kontak__card-head > span:last-child { display: flex; flex-direction: column; gap: var(--space-3xs); }
.lp-kontak__card-head b { color: var(--color-heading); font-size: var(--text-lg); }
.lp-kontak__card-head small { color: var(--color-ink-2); font-size: var(--text-sm); }
.lp-kontak__dish { position: absolute; z-index: 0; height: auto; pointer-events: none; filter: drop-shadow(0 18px 24px color-mix(in oklab, black 30%, transparent)); }
.lp-kontak__dish--a { left: -60px; bottom: -40px; width: min(340px, 26vw); }
.lp-kontak__dish--b { right: -40px; top: -30px; width: min(300px, 22vw); }
.lp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); }
.lp-form__field { display: flex; flex-direction: column; min-width: 0; }
.lp-form__field--wide, .lp-form__foot { grid-column: 1 / -1; }
.lp-form label { margin-bottom: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; }
.lp-form input, .lp-form textarea { width: 100%; padding: 0 var(--space-sm); border: 1px solid var(--ak-royal-blue); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-print); font: inherit; outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-micro) var(--ease-out); }
.lp-form input { min-height: 48px; }
.lp-form textarea { min-height: 96px; padding-block: var(--space-sm); resize: vertical; }
@media (hover: hover) { .lp-form input:hover, .lp-form textarea:hover { border-color: var(--color-print); } }
.lp-form input:focus-visible, .lp-form textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-print); }
.lp-form input:disabled, .lp-form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.lp-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.lp-form__status { margin: 0; min-height: 1.4em; max-width: 48ch; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.lp-form__status[data-state="success"] { color: var(--color-success); }
.lp-form__status[data-state="error"] { color: var(--color-error); }

@media (max-width: 60rem) {
  .lp-tanya__grid, .lp-kontak__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .lp-form { grid-template-columns: minmax(0, 1fr); }
  .lp-kontak { padding-block: var(--space-3xl); }
  .lp-kontak__head, .lp-kontak__lead, .lp-kontak__head .lp-cut { --indent: 0px; }
  .lp-kontak__card { padding: var(--space-lg); }
  .lp-kontak__dish--a { display: none; }
  .lp-kontak__dish--b { width: 160px; top: -20px; right: -50px; }
}