/*
 * Home page (view/storefront/page/home.html) — the design's boards Main
 * (1440 px), TMain (820 px) and MHome (390 px). Ported from the <style> blocks
 * of design/source/src/pages/Main.html and MHome.html; the markup's style=""
 * attributes became the classes marked "was inline" (the CSP forbids them).
 *
 * The phone board is a different layout with shorter copy, not a squeezed
 * desktop, so a few sections exist twice in the markup (categories, bespoke
 * band, how-to-order) and BeerCSS's `s` / `m l` classes show one. The hero
 * (decision 129) is one markup restyled for every screen.
 */

/* The page column: sections stacked with the design's 72 px rhythm. */
.aa > main.hm-main {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 24px 0 88px;
}

/* A section: its head above its content (was inline). */
.aa .hm-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- Hero (decision 129: the handoff's revised hero, "hero-cafe") ----------

   One panel on every screen: a raised card with a hairline border, the
   words on the left, a still picture of the products on the right on the
   brand's light blue (above the words on tablets and phones), the
   categories it names as cards under it. Measurements are the design's
   1440 px board; narrower screens scale the picture with `zoom` (its 660 ×
   576 px stage stays one drawing). Spacing goes on the item above
   (margin-bottom) or in a gap: storefront.css's reset zeroes the top
   margin of headings, paragraphs and lists. */

/* The panel and its category cards, 16 px apart. */
.aa .hm-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The hero's own colours (the design's tokens; the rest are the theme's):
   the heading's ink, the panel's border, the button under the mouse, the
   picture's ground, the sheet's paper, ink, lines and bands, the selected
   cell, the invitation's rose and the words on it. */
.aa.light .hm-top {
  --hm-ink: #001c39;
  --hm-border: #e3e2e6;
  --hm-press: #0060ab;
  --hm-visual: #d3e3ff;
  --hm-s-bg: #ffffff;
  --hm-s-ink: #1a1c1e;
  --hm-s-muted: #5d6068;
  --hm-s-grid: #e3e2e6;
  --hm-s-head: #f4f3f7;
  --hm-s-sec: #fafafc;
  --hm-sel: #0078d4;
  --hm-i-accent: #8d4768;
  --hm-i-on: #ffffff;
}

.aa.dark .hm-top {
  --hm-ink: #e3e2e6;
  --hm-border: #292a2d;
  --hm-press: #d3e3ff;
  --hm-visual: #172231;
  --hm-s-bg: #1e2022;
  --hm-s-ink: #e3e2e6;
  --hm-s-muted: #a9acb4;
  --hm-s-grid: #333538;
  --hm-s-head: #26282c;
  --hm-s-sec: #232528;
  --hm-sel: #0078d4;
  --hm-i-accent: #ffafd1;
  --hm-i-on: #3b0324;
}

.aa .hm-hero {
  /* The line the design measured the hero with: Roboto Flex's own
     "normal" (1.17 em). Google Sans Flex's is 1.25 em (decision 134):
     with it the invitation card grew past the picture's bottom edge in
     English, so the hero's one-line texts keep the drawn line. */
  --hm-line: 1.17;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 660px;
  border: 1px solid var(--hm-border);
  border-radius: 20px;
  background: var(--aa-raised);
  color: var(--hm-ink);
  overflow: hidden;
}

/* The words: kicker, heading, lead, the two ways on, and the trust line
   pushed to the panel's foot (`margin-bottom: auto` on the ways). */
.aa .hm-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 64px 48px 56px 56px;
}

.aa .hm-kicker {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: var(--hm-line);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary);
}

/* The display heading: heavy, tight, Google Sans Flex at its display
   optical size; lines balanced. */
.aa .hm-h1 {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: 50px;
  line-height: 1.06;
  font-weight: 720;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
  color: var(--hm-ink);
}

.aa .hm-lead {
  max-width: 540px;
  margin-bottom: 32px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  text-wrap: pretty;
}

.aa .hm-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-bottom: auto;
}

/* The design's own button: 52 px, 10 px corners (not BeerCSS's pill). */
.aa .hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--speed2);
}

.aa .hm-btn:hover {
  background: var(--hm-press);
}

.aa .hm-btn > i {
  --_size: 18px;
  font-size: 18px;
}

/* "Lihat cara order": a text link, underlined in the line colour (the
   text's own colour under the mouse). */
.aa .hm-link {
  color: var(--hm-ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--outline-variant);
  text-underline-offset: 5px;
}

.aa .hm-link:hover {
  text-decoration-color: currentColor;
}

.aa .hm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 40px;
  font-size: 14px;
  line-height: var(--hm-line);
  color: var(--on-surface-variant);
}

.aa .hm-trust > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* `:where(li)`: the icon rules of this file keep one specificity (Biome's
   noDescendingSpecificity). */
.aa .hm-trust > :where(li) > i {
  --_size: 18px;
  font-size: 18px;
  color: var(--primary);
}

/* ---------- Hero picture ----------

   The design's 660 × 576 px stage on the brand's light blue: a spreadsheet
   window with a profit-and-loss sheet (rows 1–17, `mock_statement`), a
   café's grand-opening invitation over its right edge. Centred in its
   column; `zoom` scales it as one drawing. border-radius 0 on cells and
   bands: BeerCSS rounds every element, which clips text that hides its
   overflow. */
.aa .hm-visual {
  display: grid;
  place-items: center;
  min-height: 576px;
  background: var(--hm-visual);
  overflow: hidden;
}

.aa .hm-stage {
  position: relative;
  width: 660px;
  height: 576px;
}

.aa .hm-sheet {
  position: absolute;
  left: 28px;
  top: 30px;
  width: 600px;
  border-radius: 10px;
  background: var(--hm-s-bg);
  color: var(--hm-s-ink);
  box-shadow:
    0 1px 2px rgb(0 28 57 / 0.08),
    0 16px 40px rgb(0 28 57 / 0.14);
  overflow: hidden;
  font-size: 11.5px;
  line-height: var(--hm-line);
}

/* Without invitations (decision 115) the sheet stands in the middle. */
.aa .hm-stage.is-sheet .hm-sheet {
  left: 30px;
  top: 50px;
}

/* The window's title: the app's icon, the file's name, the two apps.
   Square corners for each band with a line on one side (this bar, the
   formula bar, the sheet's tabs, the invitation's list): BeerCSS's
   `* { border-radius: inherit }` handed them the window's 10 px (the
   invitation's 12 px) and their line curved up at both ends (the owner,
   2026-10-13). The window's own rounded clip still shapes its corners. */
.aa .hm-sh-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hm-s-grid);
  border-radius: 0;
}

.aa .hm-sh-bar > b {
  font-size: 12.5px;
  font-weight: 600;
}

.aa .hm-sh-bar > span {
  margin-left: 12px;
  font-size: 11px;
  color: var(--hm-s-muted);
}

.aa .hm-sh-logo {
  flex: none;
}

.aa .hm-sh-logo > rect {
  fill: var(--c-excel);
}

.aa .hm-sh-logo > path {
  fill: none;
  stroke: var(--hm-s-bg);
  stroke-width: 1.6;
}

/* The formula bar: the selected cell, fx, its formula. */
.aa .hm-sh-fx {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hm-s-grid);
  border-radius: 0;
  color: var(--hm-s-muted);
}

.aa .hm-sh-ref {
  width: 40px;
  padding-right: 10px;
  border-right: 1px solid var(--hm-s-grid);
  border-radius: 0;
  color: var(--hm-s-ink);
}

.aa .hm-sh-fx > em {
  font-family: Georgia, serif;
  font-style: italic;
}

.aa .hm-sh-fx > code {
  padding: 0;
  background: none;
  font: 11.5px / 1 var(--font);
  color: var(--hm-s-ink);
}

/* The grid: fixed columns (row numbers, accounts, three months, the
   quarter, the share), figures in tabular digits. Decision 134: Google
   Sans Flex is wider than Roboto Flex, so the months gave 15 px — the
   accounts' column holds "Harga pokok penjualan" (173 px) and the share's
   "60,2%" (59 px) with a pixel or two to spare, which the phones' scaled
   copy (`zoom`) rounds away. */
.aa .hm-sh-grid {
  width: 600px;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.aa .hm-col-row {
  width: 28px;
}

.aa .hm-col-acc {
  width: 176px;
}

.aa .hm-col-mon {
  width: 81px;
}

.aa .hm-col-q {
  width: 92px;
}

.aa .hm-col-pc {
  width: 61px;
}

.aa .hm-sh-grid :is(th, td) {
  height: 21px;
  padding: 0 8px;
  border: 1px solid var(--hm-s-grid);
  border-radius: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

/* Column letters and row numbers, as a spreadsheet frames its cells. */
.aa .hm-sh-grid th {
  padding: 0;
  background: var(--hm-s-head);
  color: var(--hm-s-muted);
  font-size: 10.5px;
  font-weight: 400;
  text-align: center;
}

.aa .hm-sh-grid thead th {
  height: 20px;
}

.aa .hm-sh-grid .num {
  text-align: right;
}

/* The title and the subtitle: no grid lines but the one under them. */
.aa .hm-sh-grid :is(.t1, .t2) td {
  border-color: transparent;
  border-bottom-color: var(--hm-s-grid);
  border-left: 0;
}

.aa .hm-sh-grid .t1 td {
  font-size: 13px;
  font-weight: 700;
}

.aa .hm-sh-grid .t2 td {
  color: var(--hm-s-muted);
}

/* The column names on the Excel green. */
.aa .hm-sh-grid .hd td {
  background: var(--c-excel-c);
  color: var(--c-excel-on);
  font-weight: 650;
}

.aa .hm-sh-grid .sec td {
  background: var(--hm-s-sec);
  font-weight: 650;
}

.aa .hm-sh-grid .in {
  padding-left: 20px;
}

.aa .hm-sh-grid .sum td {
  border-top: 1.5px solid var(--hm-s-muted);
  font-weight: 650;
}

/* The net profit: double-underlined, as accounts close. */
.aa .hm-sh-grid .net td {
  border-bottom: 3px double var(--hm-s-ink);
  background: var(--hm-s-sec);
  font-weight: 750;
}

.aa .hm-sh-grid .q {
  background: var(--hm-s-sec);
}

.aa .hm-sh-grid .pc {
  color: var(--hm-s-muted);
}

/* B17, the cell the formula bar shows. */
.aa .hm-sh-grid .sel {
  outline: 2px solid var(--hm-sel);
  outline-offset: -2px;
  background: var(--aa-tint);
}

/* The sheet's tabs, "Laba Rugi" open. */
.aa .hm-sh-tabs {
  display: flex;
  gap: 2px;
  height: 30px;
  padding: 0 8px;
  border-top: 1px solid var(--hm-s-grid);
  border-radius: 0;
  background: var(--hm-s-head);
  color: var(--hm-s-muted);
  font-size: 11px;
}

.aa .hm-sh-tabs > span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 0;
}

.aa .hm-sh-tabs > .on {
  background: var(--hm-s-bg);
  color: var(--c-excel);
  font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--c-excel);
}

/* The invitation: the café's drawing (its own colours in both themes),
   then the event — kind, name, line, date, time, place — and its button. */
.aa .hm-inv {
  position: absolute;
  right: 22px;
  /* 224 px wide, not the design's 214: Google Sans Flex is wider than
     Roboto Flex (decision 134), and at 214 the tagline, the kicker and the
     date wrapped — the card grew past the picture's edge in English. Its
     drawing grows with it (8 px taller), so it starts 8 px higher than
     drawn and ends as far from the edge as the design's. */
  top: 206px;
  width: 224px;
  border-radius: 12px;
  background: var(--hm-s-bg);
  color: var(--hm-s-ink);
  box-shadow:
    0 1px 2px rgb(0 28 57 / 0.1),
    0 20px 48px rgb(0 28 57 / 0.22);
  overflow: hidden;
}

.aa .hm-inv-art {
  display: block;
  width: 100%;
  height: auto;
}

.aa .hm-inv-body {
  padding: 12px 14px 14px;
}

.aa .hm-inv-k {
  margin-bottom: 6px;
  font-size: 10px;
  line-height: var(--hm-line);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-i-accent);
}

.aa .hm-inv-n {
  margin-bottom: 2px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48;
}

.aa .hm-inv-s {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: var(--hm-line);
  color: var(--hm-s-muted);
}

.aa .hm-inv-list {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hm-s-grid);
  border-radius: 0;
  font-size: 11px;
  line-height: var(--hm-line);
}

.aa .hm-inv-list > li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa .hm-inv-list > :where(li) > i {
  --_size: 13px;
  font-size: 13px;
  color: var(--hm-i-accent);
}

.aa .hm-inv-b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  background: var(--hm-i-accent);
  color: var(--hm-i-on);
  font-size: 12.5px;
  font-weight: 650;
}

/* ---------- The hero's category cards ----------

   One card per category the heading names: the category's mark (its M3
   shape in its own colours), name and line, an arrow. The mark tilts a
   little under the mouse, as designed (decision 129) — not at all with
   reduced motion. */
/* align-items: BeerCSS centres a <nav>'s items — the cards share the
   row's height instead. */
.aa .hm-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.aa .hm-kind {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px 16px;
  border: 1px solid var(--hm-border);
  border-radius: 14px;
  background: var(--aa-raised);
  color: var(--on-surface);
  transition: border-color var(--speed2);
}

.aa .hm-kind:hover {
  border-color: var(--outline-variant);
}

.aa .hm-kind-mark {
  inline-size: 64px;
  block-size: 64px;
  background-color: var(--cc-c);
  color: var(--cc-on);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.aa .hm-kind:hover .hm-kind-mark {
  transform: rotate(-14deg) scale(1.06);
}

.aa .hm-kind-mark > i {
  --_size: 30px;
  font-size: 30px;
}

.aa .hm-kind-text {
  min-width: 0;
}

.aa .hm-kind-text > b {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 650;
}

.aa .hm-kind-text > small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
}

.aa .hm-kind-go {
  --_size: 20px;
  font-size: 20px;
  color: var(--on-surface-variant);
}

@media (prefers-reduced-motion: reduce) {
  .aa .hm-kind:hover .hm-kind-mark {
    transform: none;
  }
}

/* ---------- The hero on narrower screens ---------- */

/* Narrower desktops keep the copy wide enough for a heading of three lines
   and the trust line on one: the page keeps 64 px margins (the design's
   board 32), so below 1440 px the picture shrinks — 80 % down to 1280 px,
   70 % to 1100 px, 60 % to 993 px — with a smaller heading where needed. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .aa .hm-hero {
    grid-template-columns: minmax(0, 1fr) 528px;
  }

  .aa .hm-visual {
    min-height: 461px;
  }

  .aa .hm-stage {
    zoom: 0.8;
  }
}

@media (min-width: 1280px) and (max-width: 1365px) {
  .aa .hm-h1 {
    font-size: 46px;
  }
}

/* 993–1279 px (not drawn by the design): a smaller heading and lead, less
   padding. */
@media (min-width: 993px) and (max-width: 1279px) {
  .aa .hm-hero {
    grid-template-columns: minmax(0, 1fr) 462px;
  }

  .aa .hm-visual {
    min-height: 404px;
  }

  .aa .hm-stage {
    zoom: 0.7;
  }

  .aa .hm-copy {
    padding: 48px 40px 44px 44px;
  }

  .aa .hm-h1 {
    font-size: 40px;
  }

  .aa .hm-lead {
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (min-width: 993px) and (max-width: 1099px) {
  .aa .hm-hero {
    grid-template-columns: minmax(0, 1fr) 396px;
  }

  .aa .hm-visual {
    min-height: 346px;
  }

  .aa .hm-stage {
    zoom: 0.6;
  }
}

/* Tablets and phones: one column, the picture on top, the stage centred
   (the design's TMain); the link 44 px tall like every tap target here. */
@media (max-width: 992px) {
  .aa .hm-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .aa .hm-visual {
    order: -1;
    min-height: 0;
  }

  .aa .hm-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Tablets: the cards stand up — mark and arrow on top, the words under
   them across the card (side by side the words had a few letters a line
   at 820 px). */
@media (min-width: 601px) and (max-width: 992px) {
  .aa .hm-kind {
    grid-template-areas:
      "mark go"
      "text text";
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    row-gap: 14px;
    padding: 16px;
  }

  .aa .hm-kind-mark {
    grid-area: mark;
    inline-size: 52px;
    block-size: 52px;
  }

  .aa .hm-kind-mark > i {
    --_size: 26px;
    font-size: 26px;
  }

  .aa .hm-kind-text {
    grid-area: text;
  }

  .aa .hm-kind-go {
    grid-area: go;
    justify-self: end;
  }
}

/* Small tablets (601–719 px, not drawn by the design): a smaller heading
   (50 px took four lines), the stage at 82 % / 92 % so its 660 px fit. */
@media (min-width: 601px) and (max-width: 719px) {
  .aa .hm-h1 {
    font-size: 44px;
  }

  .aa .hm-stage {
    zoom: 0.82;
  }
}

@media (min-width: 660px) and (max-width: 719px) {
  .aa .hm-stage {
    zoom: 0.92;
  }
}

/* Phones (the design's MHome): 16 px corners, less padding, a smaller
   heading, the button across the card with the link centred under it, the
   trust line stacked, one card a row; the stage scaled to the card's width
   (0.54 at 390 px, larger on wider phones, smaller under 389 px). */
@media (max-width: 600px) {
  .aa .hm-hero {
    border-radius: 16px;
  }

  .aa .hm-copy {
    padding: 28px 20px 24px;
  }

  .aa .hm-h1 {
    font-size: 34px;
    line-height: 1.1;
  }

  .aa .hm-lead {
    font-size: 16px;
  }

  .aa .hm-ctas {
    align-self: stretch;
    gap: 12px;
  }

  .aa .hm-btn {
    justify-content: center;
    width: 100%;
  }

  .aa .hm-link {
    margin: 0 auto;
  }

  .aa .hm-trust {
    flex-direction: column;
    gap: 10px;
    padding-top: 28px;
  }

  .aa .hm-kinds {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .aa .hm-kind {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 12px 16px 12px 12px;
  }

  .aa .hm-kind-mark {
    inline-size: 52px;
    block-size: 52px;
  }

  .aa .hm-kind-mark > i {
    --_size: 26px;
    font-size: 26px;
  }

  .aa .hm-stage {
    zoom: 0.54;
  }
}

@media (min-width: 480px) and (max-width: 600px) {
  .aa .hm-stage {
    zoom: 0.66;
  }
}

@media (max-width: 388px) {
  .aa .hm-stage {
    zoom: 0.49;
  }
}

/* ---------- Benefits strip ---------- */

.aa .hm-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px;
  border-radius: 32px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

.aa .hm-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 0;
}

.aa .hm-benefit + .hm-benefit {
  border-inline-start: 1px solid var(--outline-variant);
}

.aa .hm-benefit .shape {
  width: 52px;
  height: 52px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

/* Title over description (was inline). */
.aa .hm-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Categories ---------- */

.aa .hm-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.aa .hm-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-height: 236px;
  padding: 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  color: var(--on-surface);
  box-shadow: var(--elevate1);
  text-align: start;
  transition:
    box-shadow var(--speed3),
    border-radius var(--speed3);
}

/* Hover: lifts and gets rounder — M3 Expressive shape morph. */
.aa .hm-cat:hover {
  box-shadow: var(--elevate2);
  border-radius: 40px;
}

.aa .hm-cat .shape {
  width: 76px;
  height: 76px;
  transition: transform var(--speed4);
}

.aa .hm-cat .shape i {
  --_size: 34px;
  font-size: 34px;
}

.aa .hm-cat:hover .shape {
  transform: rotate(-14deg) scale(1.06);
}

/* Name over description (was inline). */
.aa .hm-cat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aa .hm-cat .go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--cc);
}

.aa .hm-cat .go > i {
  --_size: 18px;
  font-size: 18px;
}

/* Bespoke development is the one dark card. */
.aa .hm-cat.cat-bespoke {
  background: var(--aa-band);
  color: var(--aa-on-band);
}

.aa .hm-cat.cat-bespoke .muted {
  color: var(--aa-band-muted);
}

.aa .hm-cat.cat-bespoke .shape {
  background-color: var(--inverse-primary);
  color: #001c39;
}

.aa.dark .hm-cat.cat-bespoke .shape {
  background-color: var(--primary);
  color: var(--on-primary);
}

.aa .hm-cat.cat-bespoke .go {
  color: var(--aa-footer-link);
}

/* ---------- "Segera hadir" (decision 106) ----------
   Under the category cards (the section's gap spaces it): the categories
   the admin keeps active that sell nothing yet, then a "Kabari saya" box
   (component/notify.html) on the same line. A dashed outline says "not
   yet" without shouting; the shape and the label take the brand's colours. */
.aa .hm-soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: 20px 40px;
  align-items: center;
  padding: 24px 28px;
  border: 1.5px dashed var(--outline-variant);
  border-radius: 28px;
  background: var(--surface-container-low);
}

.aa .hm-soon-text {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.aa .hm-soon-icon {
  flex: none;
  width: 56px;
  height: 56px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

/* The glyph sized by its own class (a rule ending in a bare `i` would sort
   before the hero's flower). */
.aa .hm-soon-glyph {
  --_size: 26px;
  font-size: 26px;
}

.aa .hm-soon-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.aa .hm-soon-h {
  margin: 0;
}

.aa .hm-soon-label {
  color: var(--primary);
}

.aa .hm-soon-copy p {
  margin: 0;
}

/* ---------- Featured products ---------- */

.aa .hm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* ---------- Bespoke development band ---------- */

.aa .hm-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 64px;
  padding: 64px;
  border-radius: 48px;
  background: var(--aa-band);
  color: var(--aa-on-band);
}

.aa .hm-band .muted {
  color: var(--aa-band-muted);
}

/* Copy column (was inline). */
.aa .hm-band-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.aa .hm-band-copy h2 {
  text-wrap: balance;
}

.aa .hm-band-lead {
  max-width: 560px;
}

.aa .hm-band-ctas {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.aa .hm-band-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.3px;
  color: var(--aa-footer-link);
}

/* Steps column (was inline). */
.aa .hm-band-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aa .hm-steps {
  display: flex;
  flex-direction: column;
}

/* A step: its number on a cookie shape, joined to the next by a line. */
.aa .hm-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 22px;
  position: relative;
}

.aa .hm-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.18);
}

.aa .hm-step .shape {
  width: 56px;
  height: 56px;
  background-color: var(--inverse-primary);
  color: #001c39;
  font-size: 20px;
  font-weight: 750;
}

.aa.dark .hm-step .shape {
  background-color: var(--primary);
  color: var(--on-primary);
}

/* Step title over description (was inline). */
.aa .hm-step-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

/* ---------- How to order ---------- */

.aa .hm-how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.aa .hm-howcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

.aa .hm-howcard .num {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aa .hm-howcard .shape {
  width: 56px;
  height: 56px;
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

/* The big faint step number ("01"), wider cut when the font allows it. */
.aa .hm-howcard .n {
  font-size: 44px;
  line-height: 44px;
  font-weight: 800;
  color: var(--surface-container-highest);
  letter-spacing: -1px;
  font-stretch: 110%;
}

/* ---------- Desktop widths the design never drew (993–1279 px) ---------- */

/* The bespoke band's steps column narrower, so its pitch keeps room (the
   hero's own rules for these widths are in its section). */
@media (min-width: 993px) and (max-width: 1279px) {
  .aa .hm-band {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
    padding: 48px;
  }
}

/* ---------- Tablet (601–992 px; the design's TMain board) ---------- */

@media (min-width: 601px) and (max-width: 992px) {
  .aa > main.hm-main {
    gap: 56px;
    padding-bottom: 64px;
  }

  /* "Segera hadir": the box under the words (side by side they were
     cramped at 820 px). */
  .aa .hm-soon {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 24px;
  }

  .aa .hm-main .t-hm {
    font-size: 24px;
    line-height: 32px;
  }

  .aa .hm-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aa .hm-benefit {
    padding: 16px 18px;
    gap: 12px;
  }

  /* Two columns: dividers between the columns and between the rows. */
  .aa .hm-benefit + .hm-benefit {
    border-inline-start: 0;
  }

  .aa .hm-benefit:nth-child(even) {
    border-inline-start: 1px solid var(--outline-variant);
  }

  .aa .hm-benefit:nth-child(n + 3) {
    border-top: 1px solid var(--outline-variant);
  }

  .aa .hm-benefit .shape {
    width: 44px;
    height: 44px;
  }

  .aa .hm-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* The category card turns into a row: shape left, texts right. */
  .aa .hm-cat {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    min-height: 0;
    padding: 18px 20px 18px 18px;
  }

  .aa .hm-cat .shape {
    grid-row: 1 / span 2;
    width: 60px;
    height: 60px;
  }

  .aa .hm-cat .shape i {
    --_size: 28px;
    font-size: 28px;
  }

  .aa .hm-cat .t-tl {
    font-size: 18px;
    line-height: 24px;
  }

  .aa .hm-cat .go {
    margin-top: 0;
  }

  .aa .hm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* Two rows of three, as on the tablet board. */
  .aa .hm-grid > :nth-child(n + 7) {
    display: none;
  }

  .aa .hm-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 40px 36px;
    border-radius: 36px;
  }

  .aa .hm-band .t-ds {
    font-size: 30px;
    line-height: 38px;
  }

  .aa .hm-band .button.extra {
    --_size: 3rem;
    --_padding: 1.25rem;
    font-size: 0.875rem;
  }

  .aa .hm-how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---------- Phone (≤ 600 px; the design's MHome board) ---------- */

@media (max-width: 600px) {
  .aa > main.hm-main {
    gap: 22px;
    padding: 0 0 32px;
  }

  .aa .hm-section {
    gap: 14px;
  }

  /* "Segera hadir": stacked, 16 px inside, the shape 44 px. */
  .aa .hm-soon {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
  }

  .aa .hm-soon-text {
    align-items: flex-start;
    gap: 12px;
  }

  .aa .hm-soon-icon {
    width: 44px;
    height: 44px;
  }

  .aa .hm-soon-glyph {
    --_size: 22px;
    font-size: 22px;
  }

  /* Category chips under the search pill. */
  .aa .mh-chips .chip {
    height: 36px;
    background: var(--aa-raised);
    border-color: transparent;
    box-shadow: var(--elevate1);
    color: var(--on-surface);
  }

  .aa .mh-chips .chip i {
    color: var(--cc);
  }

  /* Benefits: four small cards in a 2 × 2 grid, titles only. */
  .aa .hm-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .aa .hm-benefit {
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
    background: var(--aa-raised);
    box-shadow: var(--elevate1);
  }

  .aa .hm-benefit + .hm-benefit {
    border-inline-start: 0;
  }

  .aa .hm-benefit .shape {
    width: 36px;
    height: 36px;
  }

  .aa .hm-benefit .shape i {
    --_size: 20px;
    font-size: 20px;
  }

  /* The phone board's plain 600 weight: `h2.emph` outranks the type scale's
     emphasised weight (650), which would wrap "Bayar pakai QRIS". */
  .aa .hm-benefit h2.emph {
    font-size: 13px;
    line-height: 17px;
    font-weight: 600;
  }

  .aa .hm-benefit p {
    display: none;
  }

  /* Categories: one card holding a 4 × 2 grid of icons with short names. */
  .aa .mh-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 6px;
    padding: 18px 10px;
    border-radius: 28px;
    background: var(--aa-raised);
    box-shadow: var(--elevate1);
  }

  .aa .mh-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
    color: var(--on-surface);
  }

  .aa .mh-cat .shape {
    width: 56px;
    height: 56px;
  }

  /* The three tabs share the width (was inline). */
  .aa .mh-tabs {
    display: flex;
  }

  .aa .mh-tabs > .button {
    flex: 1 1 0;
  }

  .aa .hm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Two rows of two, as on the phone board. */
  .aa .hm-grid > :nth-child(n + 5) {
    display: none;
  }

  .aa .mh-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0 16px;
    padding: 28px 22px;
    border-radius: 36px;
    background: var(--aa-band);
    color: var(--aa-on-band);
  }

  .aa .mh-band .muted {
    color: var(--aa-band-muted);
  }

  /* The band's eyebrow on phones (was inline). */
  .aa .mh-band-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--aa-footer-link);
  }

  .aa .mh-band-eyebrow i {
    --_size: 18px;
    font-size: 18px;
  }

  .aa .mh-how {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .aa .mh-how li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px 14px 12px;
    border-radius: 22px;
    background: var(--aa-raised);
    box-shadow: var(--elevate1);
  }

  .aa .mh-how .shape {
    width: 44px;
    height: 44px;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
  }

  .aa .mh-how .shape i {
    --_size: 22px;
    font-size: 22px;
  }

  /* Step title over description (was inline). */
  .aa .mh-how-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}