/* BCL site design system (new site, 30 Sep 2026). Brand: docs/brand.md.
   One file, tokens first. No Bootstrap, no theme CSS. Components are plain class names.
   Rules: yellow = one main button per view; blue = text links in FAQ and legal only; Clash Display for
   headlines, Inter for the rest; cream ground, white surfaces; no shadows except floating product shots. */

/* Fonts, self-hosted for speed (Hanny, 30 Sep 2026): no Google Fonts or Fontshare request at page load.
   Inter: SIL Open Font License, variable 100-900. Clash Display Semibold: Fontshare ITF Free Font License,
   which allows web embedding; do not share the font file itself (docs/brand.md). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Clash Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/clash-display-600.woff2") format("woff2"); }

:root {
  --color-ink: #222222;
  --color-ink-muted: #66625A;
  --color-line: #E4DCC6;
  --color-line-strong: #D9CEB1; /* frames around screenshots and scenes */
  /* Soft category badges (template types): tint background, dark text of the same hue. */
  --badge-green-bg: #E3F4E8; --badge-green-fg: #1E6B3A;
  --badge-blue-bg: #E4ECFB; --badge-blue-fg: #2446A8;
  --badge-orange-bg: #FDEBDC; --badge-orange-fg: #A2480F;
  --badge-violet-bg: #EFE7FB; --badge-violet-fg: #5B34A6;
  --badge-teal-bg: #DFF3F1; --badge-teal-fg: #16655E;
  --badge-rose-bg: #FBE6EC; --badge-rose-fg: #A32450;
  --color-cream: #F7F2E2;
  --color-cream-deep: #EFE7D1;
  --color-white: #FFFFFF;
  --color-yellow: #FED600;
  --color-yellow-tint: #FDF3CE;
  --color-blue: #2D59E6;
  --color-success: #0F9D58;
  --color-error: #E5484D;

  --font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 9999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --container: 1200px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
p { margin: 0; }
::selection { background: var(--color-yellow); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: 4px; }

.container-fluid { width: 100%; padding: 0 var(--gutter); }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 28px; border-radius: var(--radius-full); border: 2px solid transparent;
  font: 600 16px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary { position: relative; overflow: hidden; background: var(--color-yellow); color: var(--color-ink); border-color: rgba(34, 34, 34, 0.35); box-shadow: 0 3px 0 rgba(34, 34, 34, 0.22); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; }
/* A light streak that sweeps across on hover. */
.btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(34, 34, 34, 0.22), 0 18px 30px -16px rgba(34, 34, 34, 0.45); }
.btn-primary:hover::after, .btn-primary:focus-visible::after { animation: btn-shine .75s ease; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(34, 34, 34, 0.22); }
@keyframes btn-shine { to { left: 125%; } }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover::after { animation: none; } .btn-primary:hover { transform: none; } }
.btn-ink { background: var(--color-ink); color: var(--color-cream); }
.btn-ink:hover { background: #000; color: var(--color-white); }
.btn-outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn-outline:hover { background: var(--color-ink); color: var(--color-cream); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }
.link-arrow {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--color-line);
}
.link-arrow:hover { text-decoration-color: var(--color-ink); }
.link-arrow::after { content: " \2192"; }
.legal a { color: var(--color-blue); text-underline-offset: 3px; }
/* Links inside answers and notes match the rest of the site: ink with a yellow underline (Hanny, 1 Oct 2026). */
.prose-links a, .faq a, .gtk-note a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose-links a:hover, .faq a:hover, .gtk-note a:hover { text-decoration-color: var(--color-ink); }
.micro { font-size: 14px; color: var(--color-ink-muted); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: var(--space-3) 0; background: linear-gradient(var(--color-cream) 70%, rgba(247,242,226,0)); }
.site-header .bar {
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 10px 12px 10px 24px;
  max-width: calc(var(--container) + 96px); margin: 0 auto; /* wide monitors: stop at the content width plus a small overhang (Hanny, 5 Oct 2026) */
}
.site-header .logo img { height: 28px; width: auto; }
.site-header nav { flex: 1; }
.nav-list { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.nav-list > li > a, .nav-list > li > button {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius-full);
  font: 500 15px/1 var(--font-sans); color: var(--color-ink); text-decoration: none; background: none; border: 0; cursor: pointer;
  white-space: nowrap;
}
/* Small laptops: six top links plus Log in and Sign up must stay on one line ("What's new" added, Hanny, 7 Oct 2026). */
@media (min-width: 961px) and (max-width: 1180px) {
  .site-header .bar { gap: var(--space-3); padding-left: 16px; }
  .nav-list { gap: 0; }
  .nav-list > li > a, .nav-list > li > button { padding: 8px 9px; font-size: 14px; }
  .site-header .login { font-size: 14px; }
}
.nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li > button[aria-expanded="true"] { background: var(--color-cream); }
/* Current section: the same soft background as hover, kept on (Hanny, 5 Oct 2026). */
.nav-list > li > a[aria-current="page"], .nav-list > li > button.is-active { background: var(--color-cream); }
.mega a[aria-current="page"] { background: var(--color-cream); }
.nav-list .caret { width: 10px; height: 10px; transition: transform .2s; }
.nav-list button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav-actions .login { font-weight: 500; font-size: 15px; text-decoration: none; padding: 8px 10px; }
/* Mega menu (Cloudflare-style): a wide panel under the bar, columns with dividers, a footer strip */
.site-header .bar { position: relative; }
.has-menu { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  max-width: var(--container); margin: 0; /* the bar is fluid; the panel stays a readable width, aligned to the bar's left edge under the menu (Hanny, 5 Oct 2026: centred drifted away on wide screens) */
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(34,34,34,.22); overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.has-menu.open .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease, transform .15s ease; }
.mega-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.mega-col { padding: var(--space-6) var(--space-6) var(--space-4); border-left: 1px solid var(--color-line); }
.mega-col:first-child { border-left: 0; }
.mega-label { font: 500 12px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-3); min-height: 1.3em; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega ul a { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm); text-decoration: none; }
.mega ul a:hover, .mega ul a:focus-visible { background: var(--color-cream); }
.mega ul strong { display: block; font: 600 15px/1.3 var(--font-sans); color: var(--color-ink); }
.mega ul .mega-sub { display: block; font-size: 13.5px; line-height: 1.35; color: var(--color-ink-muted); margin-top: 2px; }
.mega-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-line); background: var(--color-cream); }
.mega-foot-main { display: flex; gap: var(--space-6); }
.mega-all { font: 600 14px/1.2 var(--font-sans); text-decoration: none; color: var(--color-ink); }
.mega-all::after { content: " \2192"; }
.mega-all:hover { text-decoration: underline; }
.mega-foot-links { display: flex; gap: var(--space-6); }
.mega-foot-links a { font-size: 14px; color: var(--color-ink-muted); text-decoration: none; }
.mega-foot-links a:hover { color: var(--color-ink); }
.nav-mobile-only { display: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; }
@media (max-width: 960px) {
  .site-header nav { display: none; flex-basis: 100%; }
  .site-header .bar { flex-wrap: wrap; }
  .site-header.open nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; padding: var(--space-3) 0; }
  .mega { position: static; max-width: none; display: none; visibility: visible; opacity: 1; transform: none; box-shadow: none; border-radius: var(--radius-md); margin: var(--space-2) 0; }
  .has-menu.open .mega { display: block; }
  .mega-cols { grid-template-columns: 1fr; }
  .mega-col { border-left: 0; border-top: 1px solid var(--color-line); padding: var(--space-4); }
  .mega-col:first-child { border-top: 0; }
  .mega-label[aria-hidden] { display: none; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
  .nav-toggle { display: block; }
  .nav-actions { display: none; }
  .nav-mobile-only { display: block; }
  .nav-mobile-cta { padding: var(--space-3) 0 var(--space-2); }
  .nav-mobile-cta .btn { display: flex; justify-content: center; width: 100%; }
}

/* ---------- Sections ---------- */
.section { padding: var(--space-24) 0; }
.section.tight { padding: var(--space-16) 0; }
.section.band { background: var(--color-cream-deep); }
@media (max-width: 640px) { .section { padding: var(--space-16) 0; } .section.tight { padding: var(--space-12) 0; } }
.section-head { max-width: 760px; margin-bottom: var(--space-12); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { font: 600 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-4); }
.h2 { font-size: 48px; }
.h3 { font-size: 24px; line-height: 1.2; }
.lead { font-size: 20px; line-height: 1.5; color: var(--color-ink-muted); margin-top: var(--space-4); }
@media (max-width: 960px) { .h2 { font-size: 36px; } .lead { font-size: 18px; } }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: var(--space-8); height: 100%; display: flex; flex-direction: column; gap: var(--space-3);
}
.card h3 { font-size: 22px; line-height: 1.2; }
.card p { color: var(--color-ink-muted); }
.card .card-foot { margin-top: auto; padding-top: var(--space-3); }
a.card { text-decoration: none; transition: border-color .2s, transform .2s; }
a.card:hover { border-color: var(--color-ink); }
.card .label { font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); }
.card blockquote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--color-yellow); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.08em; line-height: 1.5; color: var(--color-ink); }
/* A big soft quotation mark sits behind each owner quote. */
.card blockquote { position: relative; isolation: isolate; margin-top: var(--space-6); }
.card blockquote::before { content: "\201C"; position: absolute; z-index: -1; left: 4px; top: -.32em; font: 700 5.5em/1 Georgia, "Times New Roman", serif; color: var(--color-yellow); opacity: .5; pointer-events: none; }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font: 600 11px/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--color-yellow-tint); color: var(--color-ink); }
.tag.ink { background: var(--color-ink); color: var(--color-cream); }

/* ---------- Hero (copy left, admin screens right, sliding up) ---------- */
.hero { padding: var(--space-12) 0 var(--space-16); }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; }
.hero h1 { font-size: 56px; line-height: 1.05; }
.hero h1 .line { display: block; }
.hero .hero-sub { font-size: 20px; line-height: 1.5; color: var(--color-ink-muted); margin: var(--space-6) 0 var(--space-8); max-width: 34em; }
.hero-actions { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-4); } /* secondary link sits centred under the button */
.hero .micro { margin-top: var(--space-3); }
.hero .tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
@media (max-width: 960px) {
  .hero { padding-top: var(--space-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero h1 { font-size: 44px; }
  .hero .hero-sub { font-size: 18px; }
}
/* Brand line stays on one line on mobile (Hanny, 1 Oct 2026). */

.hero-stack { position: relative; aspect-ratio: 16 / 11.4; }
.hero-shot {
  position: absolute; inset: 0 0 auto 0; margin: 0; background: var(--color-white);
  border: 2px solid var(--color-line-strong); border-radius: 14px; overflow: hidden;
  transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; will-change: transform, opacity;
}
.hero-shot-view { overflow: hidden; aspect-ratio: 16 / 10; }
.hero-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.hero-shot-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--color-cream); border-bottom: 1px solid var(--color-line); }
.hero-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-error); }
.hero-shot-bar span:nth-child(2) { background: var(--color-yellow); }
.hero-shot-bar span:nth-child(3) { background: var(--color-success); }
.hero-shot-bar em { margin-left: 10px; padding: 2px 12px; font: 500 11px/1.4 var(--font-sans); font-style: normal; color: var(--color-ink-muted); background: var(--color-white); border-radius: var(--radius-full); }
.hero-shot[data-pos="0"]   { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }
.hero-shot[data-pos="1"]   { transform: translateY(calc(6% + 18px)) scale(.94); opacity: 1; z-index: 3; }
.hero-shot[data-pos="2"]   { transform: translateY(calc(12% + 34px)) scale(.88); opacity: 1; z-index: 2; }
.hero-shot[data-pos="3"]   { transform: translateY(calc(18% + 50px)) scale(.82); opacity: 0; z-index: 1; }
.hero-shot[data-pos="out"] { transform: translateY(-14%) scale(1.02); opacity: 0; z-index: 5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-shot { transition: none; } }

/* ---------- Blocks ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-6); grid-template-columns: repeat(var(--cols, 3), 1fr); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-8); }
.step::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font: 600 15px/1 var(--font-sans); margin-bottom: var(--space-4); }
.step h3 { font-size: 20px; margin-bottom: var(--space-2); }
/* Steps with a hand-drawn icon: the icon leads, a small number badge keeps the order. */
.step.has-icon::before { content: none; counter-increment: step; }
.step-icon { position: relative; display: inline-flex; margin-bottom: var(--space-4); }
.step-icon .ico-lg { width: 44px; height: 44px; margin: 0; }
.step-n { position: absolute; top: -8px; left: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font: 600 12px/1 var(--font-sans); }
.step.has-icon:hover .ico svg { animation: ico-wiggle .55s ease both; }
.step.has-icon:hover .ico::before { transform: scale(1.3) translate(-2px, -1px); opacity: .9; }
.step p { color: var(--color-ink-muted); }
.app-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.app-label { font: 500 12px/1.4 var(--font-sans); padding: 2px 8px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-cream); }

.before-after { display: grid; gap: var(--space-3); }
.ba-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: stretch; }
.ba-row > div { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.ba-row .ba-before, .ba-row .ba-after { display: flex; align-items: center; gap: 14px; }
.ba-row .ba-before > span:last-child { color: var(--color-ink-muted); text-decoration: line-through; text-decoration-color: rgba(102,98,90,.5); }
/* Red cross before, green tick after (hand-drawn icons in a soft badge, no yellow dab). */
.ba-mark { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin: 0; }
.ba-mark::before { display: none; }
.ba-mark svg { width: 18px; height: 18px; stroke-width: 2; }
.ba-before .ba-mark { background: var(--badge-rose-bg); color: var(--badge-rose-fg); }
.ba-after .ba-mark { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.ba-row .ba-after { border-color: var(--color-ink); font-weight: 500; }
.ba-row .ba-arrow { align-self: center; font-size: 20px; }
@media (max-width: 640px) { .ba-row { grid-template-columns: 1fr; } .ba-row .ba-arrow { display: none; } }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-yellow); box-shadow: inset 0 0 0 5px var(--color-yellow); }
.checklist li::after { content: ""; position: absolute; left: 6px; top: 9px; width: 6px; height: 9px; border: solid var(--color-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.honest { background: var(--color-white); border: 1px dashed var(--color-ink-muted); border-radius: var(--radius-lg); padding: var(--space-8); }
.honest h3 { font-size: 22px; margin-bottom: var(--space-4); }
.honest ul { margin: 0; padding-left: 20px; display: grid; gap: var(--space-2); color: var(--color-ink); }

.faq { display: grid; gap: var(--space-3); }
/* Heading left (stays in view), questions right: the FAQ uses the full width like the other sections. */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-12); align-items: start; }
.faq-head { position: sticky; top: 110px; margin-bottom: 0; }
@media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr; gap: var(--space-8); } .faq-head { position: static; } }
.faq details { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-sans); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-yellow); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 var(--space-6) var(--space-6); color: var(--color-ink-muted); }
.faq .answer p + p { margin-top: var(--space-3); }

.guides { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.guides a { display: inline-block; padding: 10px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-full); background: var(--color-white); text-decoration: none; font-weight: 500; font-size: 15px; }
.guides a:hover { border-color: var(--color-ink); }
.guides a::after { content: " \2197"; color: var(--color-ink-muted); }

.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }
.tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .2s; min-height: 150px; }
.tile:hover { border-color: var(--color-ink); }
.tile strong { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.tile span { color: var(--color-ink-muted); font-size: 15px; }
.tile .tile-go { margin-top: auto; font-weight: 600; font-size: 14px; }
.tile .tile-go::after { content: " \2192"; }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 960px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }
.flow .card { position: relative; }

.cta-band { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); text-align: left; }
.cta-band h2 { font-size: 48px; }
.cta-band p { color: var(--color-ink-muted); font-size: 18px; margin: var(--space-3) 0 0; max-width: 36em; }
.cta-band .btn { flex-shrink: 0; }
@media (max-width: 860px) { .cta-band { flex-direction: column; align-items: flex-start; padding: var(--space-8) var(--space-6); } }
@media (max-width: 640px) { .cta-band h2 { font-size: 34px; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; gap: var(--space-8); } }


.prose { max-width: 760px; }
.prose p { color: var(--color-ink-muted); font-size: 17px; }
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--color-ink); }

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-16) 0 var(--space-8); }
.site-footer .footer-card { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 60% at 50% 115%, rgba(254, 214, 0, 0.30), rgba(254, 214, 0, 0.10) 45%, transparent 70%), linear-gradient(to top, var(--color-yellow-tint), var(--color-white) 45%); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-12); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-8); }
.footer-top img { height: 32px; width: auto; }
.footer-top .footer-brand { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.01em; }
@media (max-width: 560px) { .footer-top .footer-brand { font-size: 22px; } }
.footer-cols { display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr; gap: var(--space-8) var(--space-8); }
.footer-cols .fc-stack { display: grid; gap: var(--space-8); align-content: start; }
@media (max-width: 960px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } .site-footer .footer-card { padding: var(--space-8) var(--space-6); } }
.footer-cols h2, .footer-cols .footer-col-title { font: 600 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (max-width: 560px) {
  .footer-cols > div:first-child, .footer-cols > div:nth-child(2) { grid-column: span 2; }
  .footer-cols > div:first-child ul { display: block; columns: 2; column-gap: var(--space-6); }
  .footer-cols > div:first-child li { break-inside: avoid; margin-bottom: var(--space-2); }
}
.footer-cols a { text-decoration: none; font-size: 15px; }
/* Hand-drawn arrow bullets (our arrow-right icon as a mask, so it takes any colour). */
.footer-cols li { position: relative; padding-left: 20px; }
.footer-cols li::before { content: ""; position: absolute; z-index: 1; left: 0; top: .42em; width: 13px; height: 13px; background: var(--color-ink); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M4.2 12.3c4.9-.2 9.8-.3 14.9-.1'/%3E %3Cpath d='M13.6 6.9c1.9 1.9 3.8 3.6 5.8 5.2-2 1.7-3.9 3.4-5.6 5.3'/%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M4.2 12.3c4.9-.2 9.8-.3 14.9-.1'/%3E %3Cpath d='M13.6 6.9c1.9 1.9 3.8 3.6 5.8 5.2-2 1.7-3.9 3.4-5.6 5.3'/%3E %3C/svg%3E") center / contain no-repeat; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s, background-color .2s; }
.footer-cols li:hover::before { transform: translateX(3px); opacity: 1; }
/* A small yellow dab behind each arrow, like the icons. */
.footer-cols li::after { content: ""; position: absolute; left: 3px; top: calc(.42em + 4px); width: 11px; height: 11px; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; background: var(--color-yellow); opacity: .55; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.footer-cols li:hover::after { transform: scale(1.35); opacity: .9; }
.footer-cols a:hover { text-decoration: underline; }
.footer-bottom { margin-top: var(--space-6); font-size: 13px; color: var(--color-ink-muted); text-align: center; }
.footer-bottom p { margin: 0; }
/* Second line: the legal links and the build stamp, inline (Hanny, 5 Oct 2026). */
.footer-legal { margin-top: 6px !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; }
.footer-bottom a { color: var(--color-ink-muted); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--color-ink); text-decoration-color: var(--color-yellow); }
.footer-build { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; opacity: .8; }
/* Phones: the copyright takes its own line and wraps in balanced lines, so "(1486062-H)" never splits. */
@media (max-width: 560px) { .footer-bottom > p:first-child { text-wrap: balance; } }

/* Legacy pages (WordPress markup) under the new sticky header: drop the old negative offset */
.legacy #begin { margin-top: 0; padding-top: 3rem; }

/* ---------- Payment method logos ---------- */
.pay-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-8); }
@media (max-width: 960px) { .pay-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pay-groups { grid-template-columns: 1fr; } }
.pay-group { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pay-head strong { display: block; font: 600 17px/1.3 var(--font-sans); }
.pay-head span { display: block; font-size: 14px; color: var(--color-ink-muted); margin-top: 2px; }
.pay-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pay-logos { gap: var(--space-4) var(--space-5, 20px); }
.pay-logos li { height: 36px; display: flex; align-items: center; gap: 6px; }
.pay-logos img { height: 28px; width: auto; max-width: 150px; object-fit: contain; }
.pay-text { font: 600 14px/1.2 var(--font-sans); }

/* ---------- Product videos (Remotion, video/ in this repo) ---------- */
.video-frame { margin-bottom: var(--space-8); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-cream); aspect-ratio: 16 / 10; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Section tones: each homepage section gets its own ground ----------
   cream = page ground; white = alternate (its cards turn cream so they still read as surfaces);
   deep = darker cream band; ink = one strong break (brand ink with cream text, no extra yellow). */
.tone-cream { background: var(--color-cream); }
.tone-deep { background: var(--color-cream-deep); }
.tone-white { background: var(--color-white); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.tone-white .card, .tone-white .tile, .tone-white .step, .tone-white .pay-group, .tone-white .faq details,
.tone-white .ba-row > div, .tone-white .honest, .tone-white .cta-band, .tone-white .guides a { background: var(--color-cream); }
.tone-white .app-label { background: var(--color-white); }
.tone-white .video-frame { background: var(--color-cream); }
.tone-ink { background: var(--color-ink); color: var(--color-cream); }
.tone-ink .h2, .tone-ink h3 { color: var(--color-cream); }
.tone-ink .lead, .tone-ink .card p { color: rgba(247, 242, 226, 0.72); }
.tone-ink .card { background: #2B2A27; border-color: #3A3833; }
.tone-ink a.card:hover { border-color: var(--color-cream); }
.tone-ink .link-arrow { color: var(--color-cream); text-decoration-color: rgba(247, 242, 226, 0.4); }
.tone-ink .link-arrow:hover { text-decoration-color: var(--color-yellow); }

/* ---------- Icons (our own hand-drawn set in src/icons) with a yellow dab behind ---------- */
.ico { position: relative; display: inline-flex; flex: none; width: 24px; height: 24px; color: var(--color-ink); }
.ico::before { content: ""; position: absolute; width: 62%; height: 62%; right: -3px; bottom: -2px; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; background: var(--color-yellow); opacity: .55; }
.ico svg { position: relative; width: 100%; height: 100%; }
.mega ul .ico { margin-top: 1px; }
.mega ul a:hover .ico::before, .mega ul a:focus-visible .ico::before { opacity: .9; }
.ico-lg { width: 40px; height: 40px; margin-bottom: var(--space-1); }
.ico-lg::before { right: -5px; bottom: -3px; }
.ico-lg svg { stroke-width: 1; }
.ico-md { width: 32px; height: 32px; margin-bottom: var(--space-2); }
.ico-md::before { right: -4px; bottom: -3px; }
.ico-md svg { stroke-width: 1; }

/* ---------- Phones: compact type scale (Hanny, 30 Sep 2026) ---------- */
@media (max-width: 640px) {
  .hero { padding-bottom: var(--space-12); }
  .hero h1 { font-size: 36px; line-height: 1.08; }
  .hero .hero-sub { font-size: 16.5px; margin: var(--space-4) 0 var(--space-6); }
  .h2 { font-size: 30px; line-height: 1.12; }
  .lead { font-size: 16.5px; }
  .cta-band h2 { font-size: 30px; }
  .card { padding: var(--space-6); }
  .card h3 { font-size: 19px; }
  .card p { font-size: 15px; }
  .btn-lg { padding: 13px 24px; font-size: 16px; }
  .micro { font-size: 13px; }
  .ico-lg { width: 34px; height: 34px; }
}
.tone-ink .ico { color: var(--color-cream); }
.tone-ink .ico::before { opacity: .9; }

/* ---------- Highlights: small dark cards for standout features (AI agents) ---------- */
.hl-single { display: flex; justify-content: center; }
/* One highlight: a centred single line on the page background (Hanny, 30 Sep 2026). */
.hl-single .hl-card { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-6); width: auto; height: auto; padding: 0; background: none; color: var(--color-ink); }
.hl-single .hl-card:hover { transform: none; }
.hl-single .hl-logos { min-height: 0; gap: 10px; }
.hl-single .hl-mark { width: 24px; height: 24px; color: var(--color-ink); }
.hl-single .hl-line { color: var(--color-ink-muted); text-align: center; }
.hl-single .hl-line strong { color: var(--color-ink); }
/* Two rows: logos, then one line of copy (Hanny, 30 Sep 2026). The whole card is the link. */
.section.highlights { padding: var(--space-8) 0 var(--space-12); }
.hl-card { display: flex; flex-direction: column; gap: var(--space-5, 20px); height: 100%; padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-cream); text-decoration: none; transition: transform .2s; }
.hl-card:hover { transform: translateY(-2px); }
.hl-logos { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.hl-mark { display: inline-flex; width: 30px; height: 30px; color: var(--color-cream); }
.hl-mark svg { width: 100%; height: 100%; }
.hl-line { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(247, 242, 226, 0.72); }
.hl-line > * { margin-right: 8px; vertical-align: middle; }
.hl-line strong { font: 600 18px/1.3 var(--font-display); color: var(--color-cream); }
.hl-line .tag { background: var(--color-success); color: var(--color-white); }
.hl-card:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .hl-card { padding: var(--space-6); } .hl-mark { width: 26px; height: 26px; } }

/* Sliding word in the highlight line: the next word rises in as the last one leaves upward. */
.rotator { position: relative; display: inline-block; height: 1.5em; line-height: 1.5; overflow: hidden; vertical-align: top; transition: width .45s cubic-bezier(.2,.7,.2,1); color: var(--color-ink); font-weight: 600; }
.rot-word { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(100%); opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease; }
.rot-word.on { position: relative; transform: none; opacity: 1; }
.rot-word.off { transform: translateY(-100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rot-word { transition: none; } }

/* ---------- Icon hover: a small hand-drawn wiggle, and the yellow dab swells (Hanny, 30 Sep 2026) ---------- */
.ico svg { transform-origin: 50% 60%; }
.ico::before { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
:is(a, .card, .tile):is(:hover, :focus-visible) .ico svg { animation: ico-wiggle .55s ease both; }
:is(a, .card, .tile):is(:hover, :focus-visible) .ico::before { transform: scale(1.3) translate(-2px, -1px); opacity: .9; }
@keyframes ico-wiggle {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(-9deg) scale(1.08); }
  60%  { transform: rotate(6deg) scale(1.08); }
  100% { transform: rotate(0) scale(1.05); }
}
/* AI logos on the highlight line hop one after another. */
.hl-card:is(:hover, :focus-visible) .hl-mark { animation: logo-hop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.hl-card .hl-mark:nth-child(2) { animation-delay: .05s; }
.hl-card .hl-mark:nth-child(3) { animation-delay: .1s; }
.hl-card .hl-mark:nth-child(4) { animation-delay: .15s; }
.hl-card .hl-mark:nth-child(5) { animation-delay: .2s; }
@keyframes logo-hop { 0% { transform: none; } 45% { transform: translateY(-5px) rotate(-6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :is(a, .card, .tile):is(:hover, :focus-visible) .ico svg, .hl-card:is(:hover, :focus-visible) .hl-mark { animation: none; }
}

/* Line under the hero button, led by the Malaysian flag. */
.micro-my { display: flex; align-items: center; gap: 8px; }
.flag-wave { --w: 30px; --h: 15px; flex: none; display: inline-flex; width: var(--w); height: calc(var(--h) + 4px); align-items: center; filter: drop-shadow(0 0 .5px rgba(34, 34, 34, .35)); }

.flag-wave span { flex: 1 0 0; height: var(--h); margin-right: -0.1px; background: url(/assets/images/flags/my.svg) no-repeat; background-size: var(--w) var(--h);
  background-position: calc(var(--i) * var(--w) / -30) 0; --amp: calc(0.1px + var(--i) * 0.06px);
  animation: flag-wave 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.04s); }
.flag-wave span:first-child { border-radius: 1px 0 0 1px; }
@keyframes flag-wave {
  0%, 100% { transform: translateY(calc(var(--amp) * -1)); filter: brightness(1.06); }
  50% { transform: translateY(var(--amp)); filter: brightness(.86); }
}
@media (prefers-reduced-motion: reduce) { .flag-wave span { animation: none; } }

/* Hand-drawn arrow in the main button: nudges right on hover. No yellow dab on a yellow button. */
.btn .ico-btn { color: inherit; width: 22px; height: 22px; margin: -2px -4px -2px 2px; vertical-align: middle; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.btn .ico-btn::before { display: none; }
.btn .ico-btn svg { stroke-width: 2; }
.btn:is(:hover, :focus-visible) .ico-btn { transform: translateX(4px); }
.btn:is(:hover, :focus-visible) .ico-btn svg { animation: none; }
@media (max-width: 640px) { .btn .ico-btn { width: 19px; height: 19px; } }
.btn-sm .ico-btn { width: 17px; height: 17px; margin-left: 0; }

/* Footer social icons: centred along the bottom of the footer card; round chips that turn yellow on hover. */
.social { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-ink); transition: background-color .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.social a:is(:hover, :focus-visible) { background: var(--color-yellow); border-color: var(--color-yellow); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

/* Footer card texture (Hanny's reference): a faint diagonal diamond grid rising from the bottom and fading
   upward, a thin baseline, and a dashed vertical guide with a small yellow square where they meet. */
.site-footer .footer-card::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 70%; pointer-events: none;
  background:
    repeating-linear-gradient(30deg, rgba(34, 34, 34, 0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(150deg, rgba(34, 34, 34, 0.07) 0 1px, transparent 1px 44px);
  -webkit-mask: linear-gradient(to top, #000 20%, transparent); mask: linear-gradient(to top, #000 20%, transparent); }
.footer-deco { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.footer-deco .fd-h { position: absolute; left: var(--space-12); right: var(--space-12); bottom: 34px; height: 1px; background: var(--color-line); }
.footer-deco .fd-v { position: absolute; right: var(--space-12); top: 45%; bottom: 14px; width: 0; border-left: 1px dashed rgba(34, 34, 34, 0.18); }
.footer-deco .fd-dot { position: absolute; right: calc(var(--space-12) - 4px); bottom: 30px; width: 9px; height: 9px; background: var(--color-yellow); box-shadow: 0 0 0 1px rgba(34, 34, 34, 0.25); }
@media (max-width: 560px) { .footer-deco .fd-h { left: var(--space-6); right: var(--space-6); } .footer-deco .fd-v { right: var(--space-6); } .footer-deco .fd-dot { right: calc(var(--space-6) - 4px); } }

/* ---------- Customer logos: full-width loop on white, right under the hero ---------- */
.logos { padding: var(--space-8) 0 var(--space-10, 40px); background: var(--color-white); border-top: 1px solid var(--color-line); }
.logos + .tone-white { border-top: 0; } /* same white, so no line between them */
.logos-title { margin: 0 0 var(--space-6); text-align: center; font: 600 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.marquee-group img { display: block; width: auto; } /* logos in their own colours (Hanny, 30 Sep 2026) */
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marquee-group { gap: 44px; padding: 0 22px; } .marquee-group img { zoom: .8; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee-track { animation: none; width: auto; justify-content: center; }
  .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-6); }
  .marquee-group:last-child, .marquee-group li[aria-hidden] { display: none; }
}

/* ---------- How it works: clickable steps + live visual (replaces the video) ---------- */
.how { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; }
.how-tabs { display: grid; gap: var(--space-3); }
.how-tab { display: flex; gap: var(--space-4); align-items: flex-start; width: 100%; text-align: left; padding: var(--space-5, 20px) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-lg); background: none; font: inherit; color: var(--color-ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
@media (hover: hover) { .how-tab:hover { background: var(--color-cream); } }
.how-tab.on { background: var(--color-cream); border-color: var(--color-line); }
.how-tab:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.how-ico { position: relative; flex: none; display: inline-flex; }
.how-ico .ico-lg { width: 40px; height: 40px; margin: 0; }
.how-ico .step-n { position: absolute; top: -8px; left: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font: 600 12px/1 var(--font-sans); }
.how-tab:not(.on) .how-ico { opacity: .55; }
.how-tab.on .ico svg, .how-tab:hover .ico svg { animation: ico-wiggle .55s ease both; }
.how-text { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.how-text strong { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.01em; }
.how-tab:not(.on) strong { color: var(--color-ink-muted); }
.how-body { display: grid; gap: var(--space-3); color: var(--color-ink-muted); font-size: 15.5px; line-height: 1.55; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease; }
.how-tab.on .how-body { max-height: 400px; opacity: 1; }
.how-body .app-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.how-bar { display: block; height: 3px; border-radius: 2px; background: var(--color-line); overflow: hidden; margin-top: var(--space-2); }
.how-bar i { display: block; height: 100%; width: 0; background: var(--color-success); } /* green, not yellow: yellow stays for the one button per view (Hanny, 5 Oct 2026) */
.how-tab.on .how-bar i { width: 100%; }
.how.auto .how-tab.on .how-bar i { width: 0; animation: how-progress var(--how-dur, 7s) linear forwards; }
@keyframes how-progress { to { width: 100%; } }

.how-stage { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius-lg); background: var(--color-cream); border: 1px solid var(--color-line); overflow: hidden; }
.how-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; }
.how-panel[hidden] { display: none; }
.how-browser { margin: 0; width: 100%; background: var(--color-white); border: 2px solid var(--color-line-strong); border-radius: 12px; overflow: hidden; }
.how-browser img { display: block; width: 100%; height: auto; }
.how-panel.on .how-browser { animation: how-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes how-rise { from { opacity: 0; transform: translateY(24px); } }

/* Step 2 */
.share-cards { position: relative; width: 100%; height: 100%; }
.sc { position: absolute; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 18px; padding: 18px; font-size: 14px; display: grid; gap: 10px; }
.sc-profile { left: 2%; top: 12%; width: 40%; transform: rotate(-5deg); }
.sc-chat { right: 4%; top: 4%; width: 44%; background: var(--color-cream); }
.sc-qr { right: 10%; bottom: 4%; width: 32%; text-align: center; justify-items: center; transform: rotate(5deg); }
.sc-head { display: flex; gap: 10px; align-items: center; }
.sc-head b, .sc-head small { display: block; } .sc-head small { color: var(--color-ink-muted); }
.sc-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-yellow); display: grid; place-items: center; font: 600 18px/1 var(--font-display); }
.sc p { margin: 0; line-height: 1.4; }
.sc-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; white-space: nowrap; background: var(--color-yellow-tint); border: 1.5px solid var(--color-yellow); border-radius: 10px; padding: 7px 10px; font-weight: 600; }
.sc-link-ico { width: 18px; height: 18px; } .sc-link-ico::before { display: none; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .sc-grid i { aspect-ratio: 1; border-radius: 6px; background: var(--color-cream); }
.sc-in, .sc-out { max-width: 90%; padding: 8px 12px; border-radius: 14px; }
.sc-in { justify-self: start; background: var(--color-white); border: 1px solid var(--color-line); }
.sc-out { justify-self: end; background: var(--color-ink); color: var(--color-cream); }
.sc-chat .sc-link { justify-self: end; }
.sc-qr-box { width: 70%; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 12px; display: grid; place-items: center; }
.sc-qr-ico { width: 78%; height: 78%; } .sc-qr-ico::before { display: none; }
.sc-qr b { font: 600 18px/1.1 var(--font-display); } .sc-qr small { color: var(--color-ink-muted); }
.how-panel.on .sc { animation: sc-in .55s cubic-bezier(.2, .7, .2, 1) both; }
.how-panel.on .sc-chat { animation-delay: .18s; } .how-panel.on .sc-qr { animation-delay: .36s; }
@keyframes sc-in { from { opacity: 0; translate: 0 30px; } }

/* Step 3 */
.paid-scene { position: relative; width: 100%; height: 100%; }
.paid-tx { position: absolute; right: 0; top: 16%; width: 78%; }
.phone { position: absolute; left: 0; top: 4%; width: 32%; aspect-ratio: 9 / 18.5; border-radius: 30px; background: var(--color-ink); padding: 7px; z-index: 2; }
.phone-screen { position: relative; height: 100%; border-radius: 24px; background: var(--color-white); padding: 16% 8% 8%; display: flex; flex-direction: column; gap: 7px; font-size: 11px; overflow: hidden; }
.phone-logo { height: 14px; width: auto; align-self: flex-start; }
.ph-item { display: flex; gap: 8px; align-items: center; background: var(--color-cream); border-radius: 10px; padding: 8px; }
.ph-item i { flex: none; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #6B4A2B, #3A2716); }
.ph-item b, .ph-item small { display: block; } .ph-item small { color: var(--color-ink-muted); font-size: 10px; }
.ph-total { display: flex; justify-content: space-between; font-weight: 600; } .ph-total span { color: var(--color-ink-muted); }
.ph-label { color: var(--color-ink-muted); font-weight: 600; }
.ph-method { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--color-line); border-radius: 9px; padding: 6px; font-weight: 500; }
.ph-method i { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--color-ink); }
.ph-method img { height: 14px; width: 34px; object-fit: contain; }
.ph-method.sel { border-color: var(--color-ink); background: var(--color-yellow-tint); } .ph-method.sel i { background: radial-gradient(var(--color-ink) 45%, transparent 50%); }
.ph-secure { margin-top: auto; text-align: center; color: var(--color-ink-muted); font-size: 9.5px; }
.ph-pay { display: block; text-align: center; background: var(--color-yellow); border-radius: 99px; padding: 9px 0; font-weight: 600; }
.ph-done { position: absolute; inset: 0; background: var(--color-white); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; opacity: 0; }
.ph-done b { font: 600 15px/1.2 var(--font-display); } .ph-done small { color: var(--color-ink-muted); }
.tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-success); }
.tick::after { content: ""; width: 16px; height: 9px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.paid-toast { position: absolute; right: 2%; top: 2%; z-index: 3; display: flex; gap: 12px; align-items: center; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 16px; padding: 12px 16px; font-size: 13px; opacity: 0; }
.paid-toast .tick { width: 34px; height: 34px; flex: none; } .paid-toast .tick::after { width: 12px; height: 7px; }
.paid-toast b, .paid-toast small { display: block; } .paid-toast small { color: var(--color-ink-muted); }
.paid-chips { position: absolute; right: 4%; bottom: 3%; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.paid-chips > span { display: inline-flex; align-items: center; gap: 8px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 99px; padding: 6px 12px 6px 8px; font-size: 13px; font-weight: 600; opacity: 0; }
.chip-ico { width: 22px; height: 22px; }
/* The sequence plays each time step 3 opens: pick FPX, tap Pay, success, then the owner's side. */
.how-panel.on .phone { animation: how-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.how-panel.on .paid-tx { animation: how-rise .5s .1s cubic-bezier(.2, .7, .2, 1) both; }
.how-panel.on .ph-pay { animation: ph-press .3s 1.4s ease both; }
.how-panel.on .ph-done { animation: fade-in .35s 1.8s ease forwards; }
.how-panel.on .paid-toast { animation: toast-in .45s 2.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.how-panel.on .paid-chips > span { animation: toast-in .4s 3s ease forwards; }
.how-panel.on .paid-chips > span + span { animation-delay: 3.3s; }
@keyframes ph-press { 50% { transform: scale(.94); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .how-panel.on *, .how-panel.on .how-browser { animation: none !important; }
  .ph-done, .paid-toast, .paid-chips > span { opacity: 1; }
}
@media (max-width: 960px) {
  .how { grid-template-columns: 1fr; gap: var(--space-6); }
  .how-stage { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 560px) {
  .how-tab { padding: var(--space-4); }
  .how-stage { aspect-ratio: 3 / 3.4; }
  .sc { font-size: 11px; padding: 12px; gap: 7px; } .sc-profile { width: 62%; left: 3%; top: 4%; } .sc-chat { width: 60%; top: auto; bottom: 5%; right: 3%; } .sc-qr { width: 36%; right: 3%; left: auto; top: 6%; bottom: auto; }
  .sc-grid { display: none; }
  .phone { width: 46%; } .paid-tx { width: 90%; top: 30%; } .paid-toast { font-size: 11px; padding: 8px 10px; } .paid-chips > span { font-size: 11px; }
}

/* Small hand-drawn icon inside a link chip (related jobs and features). */
.chip-link { display: inline-flex; align-items: center; gap: 8px; }
.ico-sm { width: 20px; height: 20px; }
.ico-sm::before { right: -2px; bottom: -1px; }

/* ---------- QR Terminal hero scene (QrScene.astro): key in, show QR, customer scans, Payment Received ---------- */
.qrs { --cyc: 11s; position: relative; aspect-ratio: 16 / 12; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(to bottom, var(--color-cream) 0 64%, #E9DDBF 64% 100%); border: 1px solid var(--color-line); font-family: var(--font-sans); }
.qrs::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 10px; background: linear-gradient(rgba(34,34,34,.10), transparent); } /* counter edge */
.qrs-sign { position: absolute; left: 5%; top: 6%; display: inline-flex; align-items: center; gap: 8px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 99px; padding: 6px 14px 6px 10px; font-size: 13px; font-weight: 600; }
/* The terminal: a phone on a stand, like the real BCL Terminal screen */
.qrs-term { position: absolute; left: 14%; top: 12%; width: 34%; aspect-ratio: 9 / 16.5; background: #1C1C1C; border-radius: 26px; padding: 9% 5% 6%; z-index: 2; }
.qrs-term-top { position: absolute; top: 3.2%; left: 8%; right: 8%; display: flex; justify-content: space-between; align-items: center; font: 700 9px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .25em; color: var(--color-yellow); }
.qrs-term-top i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.qrs-term-foot { position: absolute; bottom: 2.2%; left: 0; right: 0; text-align: center; font: 600 7px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; color: #BBB; }
.qrs-screen { position: relative; height: 100%; background: var(--color-white); border-radius: 16px; overflow: hidden; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.qrs-pane { position: absolute; inset: 0; padding: 9% 7%; display: flex; flex-direction: column; gap: 6px; opacity: 0; }
.qrs-amt { background: #E3E8F0; border-radius: 10px; padding: 8px 10px; text-align: right; }
.qrs-amt small { display: block; font-size: 7px; color: #64748B; letter-spacing: .08em; }
.qrs-amt span { font-size: 11px; color: #334155; font-weight: 700; } .qrs-amt b { font-size: 22px; color: #1E293B; }
.qrs-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.qrs-pad span { display: grid; place-items: center; aspect-ratio: 1.7; border: 1px solid #E5E7EB; border-radius: 7px; font-size: 12px; font-weight: 700; color: #222; }
.qrs-pad span.c { color: #E5484D; }
.qrs-gen { margin-top: auto; text-align: center; background: var(--color-yellow); border-radius: 8px; padding: 9px 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; box-shadow: 0 3px 0 #D4B200; }
.qrs-scan { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #EEE; padding-bottom: 6px; }
.qrs-scan small { font-size: 7px; letter-spacing: .15em; color: #777; } .qrs-scan b { font-size: 13px; }
.qrs-duitnow { width: 26%; height: auto; align-self: center; margin-top: 2px; }
.qrs-code { width: 74%; align-self: center; }
.qrs-meta { display: flex; justify-content: space-between; font-size: 8px; color: #666; }
.qrs-count { color: #E5484D; font-weight: 700; }
.qrs-wait { text-align: center; font-size: 8px; color: #777; letter-spacing: .04em; }
.qrs-paid { align-items: center; justify-content: center; text-align: center; gap: 8px; }
.qrs-paid b { font-size: 12px; letter-spacing: .12em; color: var(--color-success); }
.qrs-paid > span:not(.qrs-tick):not(.qrs-new) { font-size: 20px; font-weight: 700; }
.qrs-paid small { font-size: 7.5px; color: #666; }
.qrs-new { margin-top: 10px; font-size: 9px; font-weight: 700; letter-spacing: .12em; border: 1.5px solid #222; border-radius: 8px; padding: 7px 12px; }
.qrs-tick { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-success); }
.qrs-tick::after { content: ""; width: 17px; height: 9px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
/* Chime: rings from the terminal when the payment lands */
.qrs-chime { position: absolute; right: -14%; top: 30%; width: 34%; aspect-ratio: 1; pointer-events: none; }
.qrs-chime i { position: absolute; inset: 0; border: 2.5px solid var(--color-yellow); border-radius: 50%; opacity: 0; }
/* The customer's phone, scanning */
.qrs-phone { position: absolute; right: 9%; top: 20%; width: 27%; aspect-ratio: 9 / 18; background: #222; border-radius: 22px; padding: 6px; z-index: 3; opacity: 0; }
.qrs-phone-screen { position: relative; height: 100%; border-radius: 17px; background: linear-gradient(160deg, #3A3A3A, #1E1E1E); overflow: hidden; display: grid; place-items: center; }
.qrs-cam { position: absolute; inset: 22% 16%; }
.qrs-cam i { position: absolute; width: 22%; height: 16%; border: 3px solid #fff; }
.qrs-cam i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; } .qrs-cam i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; }
.qrs-cam i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; } .qrs-cam i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
.qrs-phone-ok { position: absolute; inset: 0; background: var(--color-white); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; opacity: 0; font-size: 11px; }
.qrs-phone-ok .qrs-tick { width: 36px; height: 36px; } .qrs-phone-ok small { color: var(--color-ink-muted); }
.qrs-toast { position: absolute; right: 5%; bottom: 7%; z-index: 4; display: flex; gap: 10px; align-items: center; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 14px; padding: 10px 14px; font-size: 12.5px; opacity: 0; }
.qrs-toast b, .qrs-toast small { display: block; } .qrs-toast small { color: var(--color-ink-muted); }

/* Timeline (one loop = --cyc): 0-24% key in, 24-58% Scan to Pay (phone scans from 32%), 58-100% Payment Received */
.qrs-key { animation: qrs-key var(--cyc) infinite; } @keyframes qrs-key { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
.qrs-show { animation: qrs-show var(--cyc) infinite; } @keyframes qrs-show { 0%, 23% { opacity: 0; } 26%, 56% { opacity: 1; } 59%, 100% { opacity: 0; } }
.qrs-paid { animation: qrs-paid var(--cyc) infinite; } @keyframes qrs-paid { 0%, 57% { opacity: 0; transform: scale(.94); } 61%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.qrs-gen { animation: qrs-press var(--cyc) infinite; } @keyframes qrs-press { 0%, 19% { transform: none; } 21% { transform: translateY(2px); box-shadow: 0 1px 0 #D4B200; } 23%, 100% { transform: none; } }
.qrs-amt b { animation: qrs-type var(--cyc) infinite; } @keyframes qrs-type { 0%, 3% { opacity: .15; } 12%, 100% { opacity: 1; } }
.qrs-phone { animation: qrs-phone var(--cyc) infinite; }
@keyframes qrs-phone { 0%, 28% { opacity: 0; transform: translate(40%, 18%) rotate(12deg); } 36%, 90% { opacity: 1; transform: translate(-10%, 0) rotate(-6deg); } 98%, 100% { opacity: 0; transform: translate(40%, 18%) rotate(12deg); } }
.qrs-phone-ok { animation: qrs-phone-ok var(--cyc) infinite; } @keyframes qrs-phone-ok { 0%, 56% { opacity: 0; } 60%, 100% { opacity: 1; } }
.qrs-chime i { animation: qrs-ring var(--cyc) infinite; } .qrs-chime i:nth-child(2) { animation-delay: .18s; } .qrs-chime i:nth-child(3) { animation-delay: .36s; }
@keyframes qrs-ring { 0%, 58% { opacity: 0; transform: scale(.3); } 60% { opacity: .9; } 68%, 100% { opacity: 0; transform: scale(1.25); } }
.qrs-toast { animation: qrs-toast var(--cyc) infinite; } @keyframes qrs-toast { 0%, 63% { opacity: 0; transform: translateY(10px); } 67%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qrs *, .qrs-key, .qrs-show { animation: none !important; }
  .qrs-key, .qrs-show { opacity: 0; } .qrs-paid, .qrs-phone, .qrs-phone-ok, .qrs-toast { opacity: 1; }
}
@media (max-width: 560px) { .qrs-toast { font-size: 10.5px; padding: 7px 10px; } .qrs-sign { font-size: 11px; } }

/* ---------- AI Agents hero scene (AiScene.astro): apps -> bcl.my/mcp -> BCL, then a chat with tool calls ---------- */
.ais { --cyc: 15s; position: relative; aspect-ratio: 16 / 12.5; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, var(--color-yellow-tint), var(--color-cream) 60%); border: 1px solid var(--color-line); padding: 4% 5%; display: flex; flex-direction: column; gap: clamp(16px, 3vw, 26px); } /* a fixed gap: 4% resolved to 0 on phones, where the scene has no fixed height (Hanny, 6 Oct 2026) */
.ais-link { display: flex; align-items: center; gap: 10px; }
.ais-apps { display: inline-flex; gap: 6px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 99px; padding: 7px 10px; }
.ais-apps .hl-mark { width: 20px; height: 20px; color: var(--color-ink); }
.ais-wire { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--color-ink-muted) 0 5px, transparent 5px 10px); opacity: .5; }
.ais-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-yellow); box-shadow: 0 0 0 2px var(--color-ink); animation: ais-flow 1.8s linear infinite; }
.ais-wire + .ais-mcp + .ais-wire i { animation-delay: .9s; }
@keyframes ais-flow { from { left: 0; } to { left: calc(100% - 8px); } }
.ais-mcp { font: 600 12px/1 ui-monospace, Menlo, monospace; background: var(--color-ink); color: var(--color-cream); border-radius: 8px; padding: 7px 10px; }
.ais-bcl { height: 18px; width: auto; }
.ais-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--color-white); border: 2px solid var(--color-line-strong); border-radius: 14px; overflow: hidden; }
.ais-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--color-cream); border-bottom: 1px solid var(--color-line); }
.ais-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-error); } .ais-bar span:nth-child(2) { background: var(--color-yellow); } .ais-bar span:nth-child(3) { background: var(--color-success); }
.ais-bar em { margin-left: 8px; font: 500 11px/1 var(--font-sans); font-style: normal; color: var(--color-ink-muted); }
.ais-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 14px; overflow: hidden; font-size: 13px; line-height: 1.4; }
.ais-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; }
.ais-msg p { margin: 0; }
.ais-msg.you { align-self: flex-end; background: var(--color-ink); color: var(--color-cream); border-bottom-right-radius: 4px; }
.ais-msg.ai { align-self: flex-start; background: var(--color-cream); border-bottom-left-radius: 4px; }
.ais-chart { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 8px; }
.ais-chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--color-yellow); box-shadow: inset 0 0 0 1px rgba(34,34,34,.15); }
.ais-chart i:last-child { background: var(--color-ink); }
.ais-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px dashed var(--color-ink-muted); border-radius: 8px; font-size: 11.5px; background: var(--color-white); }
.ais-tool code { font: 600 11.5px/1 ui-monospace, Menlo, monospace; }
.ais-tool small { color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; }
.ais-tool.write small { color: #B45309; }
.ais-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--color-line); border-top-color: var(--color-ink); animation: ais-spin .8s linear infinite; }
@keyframes ais-spin { to { transform: rotate(360deg); } }
.ais-tool-ok { display: none; color: var(--color-success); font-weight: 700; }
.ais-approve { background: var(--color-yellow); border: 1px solid rgba(34,34,34,.35); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.ais-log { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 99px; background: var(--color-yellow-tint); font-size: 11px; font-weight: 600; }
/* Timeline: each line appears in turn, holds, then the chat clears and plays again. */
.ais-body > * { display: none; animation: ais-in var(--cyc) infinite both; }
@keyframes ais-in { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: none; } 94% { opacity: 1; } 100% { opacity: 0; } }
.ais-body > .m1 { display: block; animation-name: ais-m1; } .ais-body > .m2 { display: inline-flex; animation-name: ais-m2; } .ais-body > .m3 { display: block; animation-name: ais-m3; }
.ais-body > .m4 { display: block; animation-name: ais-m4; } .ais-body > .m5 { display: inline-flex; animation-name: ais-m5; } .ais-body > .m6 { display: block; animation-name: ais-m6; }
@keyframes ais-m1 { 0%, 3% { opacity: 0; transform: translateY(8px); max-height: 0; } 6%, 94% { opacity: 1; transform: none; max-height: 80px; } 100% { opacity: 0; } }
@keyframes ais-m2 { 0%, 11% { opacity: 0; max-height: 0; padding-block: 0; border-width: 0; } 14%, 94% { opacity: 1; max-height: 40px; } 100% { opacity: 0; } }
@keyframes ais-m3 { 0%, 21% { opacity: 0; max-height: 0; padding-block: 0; } 25%, 94% { opacity: 1; max-height: 160px; } 100% { opacity: 0; } }
@keyframes ais-m4 { 0%, 37% { opacity: 0; max-height: 0; padding-block: 0; } 41%, 94% { opacity: 1; max-height: 80px; } 100% { opacity: 0; } }
@keyframes ais-m5 { 0%, 46% { opacity: 0; max-height: 0; padding-block: 0; border-width: 0; } 49%, 94% { opacity: 1; max-height: 40px; } 100% { opacity: 0; } }
@keyframes ais-m6 { 0%, 62% { opacity: 0; max-height: 0; padding-block: 0; } 66%, 94% { opacity: 1; max-height: 120px; } 100% { opacity: 0; } }
/* Tool calls: spinner, then a tick. The write call waits for Approve first. */
.m2 .ais-spin { animation: ais-spin .8s linear infinite, ais-hide-2 var(--cyc) infinite; } .m2 .ais-tool-ok { display: inline; animation: ais-show-2 var(--cyc) infinite; }
@keyframes ais-hide-2 { 0%, 19% { opacity: 1; } 20%, 100% { opacity: 0; width: 0; border-width: 0; } }
@keyframes ais-show-2 { 0%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } }
.m5 .ais-spin { animation: ais-spin .8s linear infinite, ais-hide-5 var(--cyc) infinite; } .m5 .ais-tool-ok { display: inline; animation: ais-show-5 var(--cyc) infinite; }
.m5 .ais-approve { animation: ais-approve var(--cyc) infinite; }
@keyframes ais-hide-5 { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0; width: 0; border-width: 0; } }
@keyframes ais-show-5 { 0%, 59% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes ais-approve { 0%, 52% { transform: none; } 55% { transform: scale(.92); background: var(--color-ink); color: var(--color-cream); } 58% { transform: none; } 59%, 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .ais *, .ais-body > * { animation: none !important; }
  .ais-body > * { opacity: 1; } .ais-spin { display: none; } .ais-tool-ok { opacity: 1; }
}
@media (max-width: 560px) { .ais { aspect-ratio: auto; min-height: 460px; } .ais-body { font-size: 12px; } .ais-apps .hl-mark { width: 16px; height: 16px; } }

/* ---------- Good to know: honest limits as note tiles with icons ---------- */
.pay-note { max-width: 760px; }
.pay-note + .gtk { margin-top: var(--space-12); }
.gtk-title { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: var(--space-2); }
.gtk-sub { margin: 0 0 var(--space-6); max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--color-ink-muted); text-wrap: balance; }
.gtk-grid { --gap: var(--space-4); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.gtk-grid > li { flex: 0 0 calc((100% - (var(--gtk-cols, 3) - 1) * var(--gap)) / var(--gtk-cols, 3)); }
@media (max-width: 960px) { .gtk-grid > li { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) { .gtk-grid > li { flex-basis: 100%; } }
.gtk-note { display: flex; gap: 14px; align-items: flex-start; padding: var(--space-5, 20px); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.tone-white .gtk-note { background: var(--color-cream); }
.gtk-note .ico-md { flex: none; width: 30px; height: 30px; margin: 0; }
.gtk-note.addon { background: var(--color-yellow-tint); border-color: var(--color-yellow); font-weight: 600; }

/* ---------- Booking templates (Bookings feature page) ---------- */
.tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
.tpl-chip { font: 600 14px/1 var(--font-sans); color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-line); border-radius: 99px; padding: 10px 16px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tpl-chip span { margin-left: 4px; color: var(--color-ink-muted); font-weight: 500; }
.tpl-chip:hover { border-color: var(--color-ink); }
.tpl-chip.on { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }
.tpl-chip.on span { color: rgba(247, 242, 226, .7); }
.tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tpl-grid > li[hidden] { display: none; }
.tpl-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: var(--space-5, 20px); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-ink); transition: border-color .2s, transform .2s; }
.tpl-card:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.tpl-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tpl-top .ico-lg { width: 34px; height: 34px; margin: 0; }
.tpl-badge { font: 600 10.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--color-white); color: var(--color-ink-muted); }
.tpl-card strong { font: 600 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
.tpl-services { display: flex; flex-wrap: wrap; gap: 5px; }
.tpl-services span { font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: var(--color-white); color: var(--color-ink); }
.tpl-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-ink-muted); }
.tpl-use { font-weight: 600; color: var(--color-ink); }
.tpl-use::after { content: " \2192"; }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tpl-grid { grid-template-columns: 1fr; } }

/* ---------- Live example cards (example.bcl.my) ---------- */
.ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ex-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-ink); transition: border-color .2s, transform .2s; }
.tone-white .ex-card { background: var(--color-cream); }
.tone-white .ex-card .tpl-badge { background: var(--color-white); }
.ex-card:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.ex-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.ex-top .ico-lg { width: 36px; height: 36px; margin: 0; }
.ex-card strong { font: 600 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.ex-shows { font-weight: 600; font-size: 14px; }
.ex-persona { color: var(--color-ink-muted); font-size: 14.5px; line-height: 1.5; }
.ex-open { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; }
.ex-open::after { content: " \2197"; }
@media (max-width: 960px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ex-grid { grid-template-columns: 1fr; } }

.tpl-badge[data-color] { font-weight: 700; }
.tpl-badge[data-color="green"] { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.tpl-badge[data-color="blue"] { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.tpl-badge[data-color="orange"] { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.tpl-badge[data-color="violet"] { background: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.tpl-badge[data-color="teal"] { background: var(--badge-teal-bg); color: var(--badge-teal-fg); }
.tpl-badge[data-color="rose"] { background: var(--badge-rose-bg); color: var(--badge-rose-fg); }

/* ---------- Zig-zag showcase: text beside a close-up of the app (feature pages with `showcase`) ---------- */
.zz { display: grid; gap: var(--space-16); }
.zz-row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; }
.zz-row.flip .zz-copy { order: 2; }
.zz-n { display: inline-block; margin-bottom: var(--space-3); font: 600 13px/1 var(--font-sans); letter-spacing: .1em; color: var(--color-ink-muted); padding: 6px 10px; border-radius: 99px; background: var(--color-yellow-tint); }
.zz-copy h3 { font-size: 30px; line-height: 1.15; margin-bottom: var(--space-3); }
.zz-copy p { color: var(--color-ink-muted); font-size: 17px; line-height: 1.6; max-width: 34em; }
.zz-shot { margin: 0; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-cream); display: grid; place-items: center; }
.tone-cream .zz-shot { background: var(--color-yellow-tint); }
.zz-shot img { display: block; width: 100%; height: auto; border: 2px solid var(--color-line-strong); border-radius: 12px; background: var(--color-white); padding: clamp(8px, 1.6vw, 18px); box-sizing: border-box; }
/* Tall panels (pickers, action lists): show the top part at a readable size, fading out at the bottom. */
.zz-shot.wide { padding: var(--space-4); }
.zz-row.flip { grid-template-columns: 7fr 5fr; }
.zz-row:has(.zz-shot.wide) { grid-template-columns: 4fr 8fr; }
.zz-row.flip:has(.zz-shot.wide) { grid-template-columns: 8fr 4fr; }
.zz-shot.tall img { width: min(100%, 380px); height: 420px; object-fit: cover; object-position: top; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
@media (max-width: 960px) { .zz-row, .zz-row.flip, .zz-row:has(.zz-shot.wide), .zz-row.flip:has(.zz-shot.wide) { grid-template-columns: 1fr; gap: var(--space-6); } .zz-row.flip .zz-copy { order: 0; } .zz { gap: var(--space-12); } .zz-copy h3 { font-size: 24px; } .zz-shot { padding: var(--space-5, 20px); } }

/* Courier logos (Shipping page) */
.courier-row { list-style: none; margin: 0; padding: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--space-8) var(--space-12); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.courier-row img { display: block; width: auto; }
@media (max-width: 640px) { .courier-row { gap: var(--space-6); padding: var(--space-6); } .courier-row img { zoom: .8; } }

/* Platform cards with official logos (Marketing Pixels) */
.plat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.plat-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s; }
.plat-card:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--color-ink); }
.plat-logo { display: block; width: 64px; height: 64px; margin-bottom: 8px; }
.plat-logo svg { width: 100%; height: 100%; }
.plat-card .step-n { position: absolute; top: 18px; right: 18px; left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-yellow); color: var(--color-ink); font: 700 13px/1 var(--font-sans); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.plat-card h3 { font-size: 19px; line-height: 1.25; }
.plat-card p { color: var(--color-ink-muted); font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 960px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .plat-grid { grid-template-columns: 1fr; } }

/* Section headings: a yellow highlighter stroke under the last part of the text (Hanny, 30 Sep 2026). */
.h2 { text-decoration: underline double; text-decoration-color: var(--color-yellow); text-decoration-thickness: .09em; text-underline-offset: .06em; text-decoration-skip-ink: none; }
.tone-ink .h2 { text-decoration-color: rgba(254, 214, 0, .85); }

/* ---------- Multi-tier spotlight (Affiliates): commission flowing up the chain ---------- */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.spot-eyebrow { display: inline-block; margin-bottom: var(--space-4); padding: 5px 12px; border-radius: 99px; background: var(--color-yellow); color: var(--color-ink); font: 700 12px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.tier-spot .checklist li { color: var(--color-cream); }
.tier-spot .link-arrow { color: var(--color-cream); }
.tier-chain > div { position: relative; display: grid; gap: 12px; padding: var(--space-8); border-radius: var(--radius-lg); background: #2B2A27; border: 1px solid #3A3833; }
.tier-chain > div::before { content: ""; position: absolute; left: calc(var(--space-8) + 23px); top: 60px; bottom: 150px; border-left: 2px dashed rgba(254, 214, 0, .55); }
.tier-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px; background: var(--color-white); color: var(--color-ink); animation: tier-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc((3 - var(--i)) * .15s); }
.tier-row.seller { box-shadow: inset 0 0 0 2px var(--color-yellow); }
.tier-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-yellow-tint); font: 700 13px/1 var(--font-sans); }
.tier-row.seller .tier-av { background: var(--color-yellow); }
.tier-who { flex: 1; } .tier-who b, .tier-who small { display: block; } .tier-who small { color: var(--color-ink-muted); font-size: 13px; }
.tier-earn { font: 600 18px/1 var(--font-display); color: var(--badge-green-fg); }
.tier-sale { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed rgba(247,242,226,.4); color: var(--color-cream); font-size: 14px; }
.tier-sale .ico { color: var(--color-cream); }
.tier-total { text-align: right; color: var(--color-yellow); font: 600 16px/1.3 var(--font-display); }
@keyframes tier-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .tier-row { animation: none; } }
@media (max-width: 960px) { .tier-grid { grid-template-columns: 1fr; } }

/* Scroll buttons (bottom-right): to the bottom and back to the top */
.scroll-btns { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.scroll-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-yellow); color: var(--color-ink); border: 2px solid rgba(34,34,34,.35); box-shadow: 0 3px 0 rgba(34,34,34,.22); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.scroll-btn:not(.show) { height: 0; margin-top: -10px; border-width: 0; }
.to-bottom { background: var(--color-white); }
.scroll-btn.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-btn:hover { transform: translateY(-3px); }
.scroll-btn .ico-btn { width: 24px; height: 24px; margin: 0; }
.scroll-btn .ico-btn::before { display: none; }
.scroll-btn .ico-btn svg { stroke-width: 2; }
@media (max-width: 640px) { .scroll-btns { right: 14px; bottom: 14px; } .scroll-btn.show { width: 44px; height: 44px; } }

.pay-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* Partner logo band at the top of a use-case page (e.g. pay-later providers) */
.uc-logos { margin-bottom: var(--space-12); padding: var(--space-6) var(--space-8); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); text-align: center; }
.uc-logos .logos-title { margin-bottom: var(--space-4); }
.uc-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-12); }
.uc-logos img { display: block; width: auto; }


/* "All businesses / All use cases / All examples" links under a card grid: centred. */
.section > .container > p:has(> a.link-arrow:only-child) { text-align: center; margin-top: var(--space-8) !important; }

/* Headings that wrap split into even lines, not a long line and a short one (Hanny, 1 Oct 2026). */
.h2, h1, h2, h3, .hl-line strong { text-wrap: balance; }
/* Longer section headings break into two balanced lines instead of running the full width. */
.h2 { max-width: 12em; }
.cta-band h2, .section-head[style*="center"] .h2 { max-width: none; }
.zz-copy .h2 { font-size: 36px; max-width: none; }
@media (max-width: 640px) { .zz-copy .h2 { font-size: 28px; } }
/* Feature pages: a line between "Used by" and "Jobs it helps with". */
.jobs-head { margin-bottom: var(--space-6); max-width: none; }
.jobs-head.split { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-line-strong); }
/* Docs guides card under the FAQ. */
.guide-card { margin-top: var(--space-8); padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.tone-white .guide-card { background: var(--color-cream); }
.guide-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: var(--space-4); }
.guide-card-head .ico-md { flex: none; margin: 0; }
.guide-card h3 { font-size: 20px; }
.guide-card-head p { color: var(--color-ink-muted); font-size: 15px; margin-top: 2px; }
.guide-card ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
.guide-card li a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.guide-card li a .ico-sm { flex: none; color: var(--color-ink-muted); transition: transform .2s; }
.guide-card li a:hover span { text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.guide-card li a:hover .ico-sm { transform: translateX(3px); color: var(--color-ink); }
@media (max-width: 640px) { .guide-card ul { grid-template-columns: 1fr; } }
/* Footer: "You're in good company" team band (between the brand row and the link columns). */
.team-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; padding: var(--space-8) 0 var(--space-16); margin-bottom: var(--space-12); border-bottom: 1px solid var(--color-line); }
.team-photos { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; aspect-ratio: 1; }
.team-photos .tp { overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); background: var(--color-cream); }
.team-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.team-photos .tp:hover img { transform: scale(1.04); }
.team-photos .tp1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.team-photos .tp2 { grid-column: 3; grid-row: 1; }
.team-photos .tp3 { grid-column: 3; grid-row: 2; }
.team-photos .tp4 { grid-column: 1; grid-row: 3; }
.team-photos .tp5 { grid-column: 2 / 4; grid-row: 3; }
.team-copy .eyebrow { display: block; margin-bottom: var(--space-2); }
.team-copy h2 { font: 600 34px/1.1 var(--font-display); letter-spacing: -0.01em; }
.team-copy > p { color: var(--color-ink-muted); font-size: 16px; margin: var(--space-3) 0 var(--space-6); max-width: 32em; }
.team-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.team-cards li > a, .team-cards li > div { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-md); text-decoration: none; color: var(--color-ink); transition: border-color .2s; }
.team-cards li > a:hover { border-color: var(--color-ink); }
.team-cards li > * > span:not(.ico):not(.tc-g) { flex: 1; display: grid; gap: 2px; }
.team-cards b { font-weight: 600; font-size: 15px; }
.team-cards small { color: var(--color-ink-muted); font-size: 14px; line-height: 1.45; }
.team-cards .ico-md { flex: none; margin: 0; }
.team-cards .tc-go { flex: none; color: var(--color-ink-muted); transition: transform .2s; }
.team-cards a:hover .tc-go { transform: translateX(3px); color: var(--color-ink); }
.tc-g { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.tc-g .hl-mark, .tc-g svg { width: 24px; height: 24px; display: block; }
.tc-stars { display: flex; align-items: center; gap: 2px; }
.tc-stars svg { width: 16px; height: 16px; }
.tc-stars b { margin-left: 6px; font-size: 14px; }
@media (max-width: 960px) { .team-band { grid-template-columns: 1fr; gap: var(--space-8); } }
@media (max-width: 640px) { .team-copy h2 { font-size: 28px; } }
/* When the last section is cream (same as the page), the footer area turns white so the two never merge. */
main:has(> section:last-of-type.tone-cream) + .site-footer { background: var(--color-white); border-top: 1px solid var(--color-line); }
/* Business type pages: one live example as a panel, details on the left and the open button on the right. */
.live-ex { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8) var(--space-12); align-items: center; padding: var(--space-8) var(--space-12); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.tone-white .live-ex { background: var(--color-cream); }
.live-ex-copy h3 { font-size: 26px; margin: var(--space-2) 0 var(--space-4); }
.live-ex-go { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.live-ex-go .micro { color: var(--color-ink-muted); }
@media (max-width: 860px) { .live-ex { grid-template-columns: 1fr; padding: var(--space-6); } .live-ex-go { justify-items: start; text-align: left; } }
/* "How your customers pay" on business type pages: text on the left, payment groups as rows on the right. */
.pay-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
.pay-wrap .pay-note { max-width: none; }
.pay-wrap .pay-note .lead { font-size: 17px; }
.pay-wrap .pay-note .lead + .lead { margin-top: var(--space-4); }
.pay-wrap + .gtk { margin-top: var(--space-12); }
.bt-pay { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line-strong); }
.bt-pay li { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-line-strong); }
.pl-label { font: 600 12px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; min-height: 30px; }
.pl-row img { width: auto; display: block; max-height: 26px; max-width: 140px; object-fit: contain; }
.pl-text { font-size: 14px; font-weight: 600; }
.pl-row img[src*="fpx"], .pl-row img[src*="duitnow"] { height: 34px !important; max-height: 34px; }
@media (max-width: 960px) { .pay-wrap { grid-template-columns: 1fr; gap: var(--space-8); } }
@media (max-width: 520px) { .bt-pay li { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; } }
/* The sliding word under the AI Agents line gets the same double yellow underline as section headings. */
.rotator .rw { text-decoration: underline double; text-decoration-color: var(--color-yellow); text-decoration-thickness: .12em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
/* Mosaic: 3-column card grids never leave a gap in the last row (Hanny, 1 Oct 2026).
   One card over (4, 7): the first and last span two columns. Two over (5, 8): the first spans two.
   On tablets (2 columns), an odd last card spans the full row. */
@media (min-width: 961px) {
  :is(.grid-3, .ex-grid, .pay-groups):has(> :last-child:nth-child(3n+1)) > :first-child,
  :is(.grid-3, .ex-grid, .pay-groups):has(> :last-child:nth-child(3n+1)) > :last-child,
  :is(.grid-3, .ex-grid, .pay-groups):has(> :last-child:nth-child(3n+2)) > :first-child { grid-column: span 2; }
  /* Template galleries (4 columns): close a short last row by widening its last cards. */
  .tpl-grid:has(> :last-child:nth-child(4n+2)) > :nth-last-child(-n+2) { grid-column: span 2; }
  .tpl-grid:has(> :last-child:nth-child(4n+3)) > :last-child { grid-column: span 2; }
  .grid-3 > .card[style*="span"] p, .grid-3 > :first-child:not(:only-child) p { max-width: 44em; }
}
@media (min-width: 641px) and (max-width: 960px) {
  :is(.grid-3, .ex-grid, .pay-groups) > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 961px) {
  .steps[style*="--cols: 3"] > li:last-child:nth-child(3n+2) { grid-column: span 2; }
  .steps[style*="--cols: 3"] > li:last-child:nth-child(3n+1) { grid-column: span 3; }
  .steps[style*="--cols: 4"] > li:last-child:nth-child(4n+3) { grid-column: span 2; }
}
.guide-card ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.guides a.chip-link { display: inline-flex; align-items: center; gap: 10px; }
.guides a.chip-link .ico-sm { margin: 0; flex: none; }
/* Template pages (/features/<bookings|automation>/templates/<slug>/). */
.hero-single { margin: 0; background: var(--color-white); border: 2px solid var(--color-line-strong); border-radius: 14px; overflow: hidden; }
.hero-single img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: top center; padding: clamp(10px, 2vw, 22px); box-sizing: border-box; }
.tp-setup, .tp-fits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5, 20px); }
.tp-setup li { display: flex; gap: 14px; align-items: flex-start; }
.tp-setup li span { display: grid; gap: 4px; color: var(--color-ink-muted); font-size: 16px; line-height: 1.55; }
.tp-setup li strong { color: var(--color-ink); font: 600 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.tp-check { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--badge-green-bg); color: var(--badge-green-fg); margin: 0; }
.tp-check::before { display: none; }
.tp-check svg { width: 16px; height: 16px; stroke-width: 2; }
.tp-fits { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.tp-fits li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.tp-flow-wrap { display: grid; gap: var(--space-12); }
.tp-flow { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; padding: var(--space-8); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-image: radial-gradient(rgba(34,34,34,.08) 1px, transparent 1px); background-size: 18px 18px; }
.tp-branches { display: grid; gap: var(--space-4); }
.tp-branch { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.tp-branch .tp-node + .tp-node::before, .tp-branches::before { content: none; }
.tp-node { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: var(--color-white); border: 1.5px solid var(--color-line-strong); border-radius: 12px; font-weight: 600; font-size: 15px; }
.tp-node .ico-md { width: 28px; height: 28px; margin: 0; }
.tp-node span { display: grid; line-height: 1.25; }
.tp-node small { font: 600 10.5px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); }
.tp-node.trigger { border-color: var(--color-ink); }
.tp-node.condition { background: var(--badge-orange-bg); }
.tp-node.delay { background: var(--badge-violet-bg); }
.tp-node.action { background: var(--badge-green-bg); }
.tp-branch .tp-node:not(:last-child) { margin-right: 34px; }
.tp-branch .tp-node:not(:last-child)::after { content: ""; position: absolute; right: -28px; top: 50%; width: 22px; height: 2px; background: var(--color-ink); opacity: .5; }
.tp-flow > .tp-node::after { content: ""; position: absolute; right: -22px; top: 50%; width: 18px; height: 2px; background: var(--color-ink); opacity: .5; }
.tp-needs { padding: var(--space-6); background: var(--color-yellow-tint); border: 1px solid var(--color-yellow); border-radius: var(--radius-lg); }
.tp-needs strong { display: block; font: 600 18px/1.3 var(--font-display); margin-bottom: 6px; }
.tp-needs p { color: var(--color-ink); font-size: 16px; line-height: 1.55; }
.tp-more { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .tp-flow { grid-template-columns: 1fr; } .tp-flow > .tp-node::after { display: none; } .tp-more { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tp-branch { flex-direction: column; align-items: flex-start; gap: 22px; } .tp-branch .tp-node:not(:last-child) { margin-right: 0; } .tp-branch .tp-node:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -18px; width: 2px; height: 14px; } }
.tpl-grid.tp-more > * { grid-column: auto !important; }
/* Template cards follow their section, like other cards: white on cream, cream on white. */
.tpl-card { background: var(--color-white); }
.tpl-card .tpl-services span { background: var(--color-cream); }
.tone-white .tpl-card { background: var(--color-cream); }
.tone-white .tpl-card .tpl-services span { background: var(--color-white); }
/* Zig-zag on cream sections: white number pill and white backing for the screenshot (pale yellow looked muddy on cream). */
.tone-cream .zz-n { background: var(--color-white); border: 1px solid var(--color-line); }
.tone-cream .zz-shot { background: var(--color-white); border: 1px solid var(--color-line); }
.tp-node.else { background: var(--color-cream); border-style: dashed; }
/* Zig-zag number badges (01, 02, 03) in pastel green on every section. */
.zz-n, .tone-cream .zz-n { background: var(--badge-green-bg); color: var(--badge-green-fg); border: 1px solid rgba(30, 107, 58, 0.15); }
/* How it works on a cream section: the active step and the stage go white so they stand out. */
.tone-cream .how-tab.on, .tone-cream .how-stage { background: var(--color-white); }
@media (hover: hover) { .tone-cream .how-tab:not(.on):hover { background: rgba(255, 255, 255, 0.6); } }
/* How it works: every step's text stays open so the list never changes height while it plays (Hanny, 1 Oct 2026:
   "why got that jump"). The active step is highlighted; the others are dimmed. */
.how-body, .how-tab.on .how-body { max-height: none; overflow: visible; opacity: 1; transition: color .3s ease; }
.how-tab:not(.on) .how-body { color: rgba(102, 98, 90, 0.7); }
@media (max-width: 576px) { .hero-copy > .eyebrow:has(.brand-line-break) { white-space: nowrap; letter-spacing: .06em; } }
@media (max-width: 960px) { .nav-list .nav-mobile-cta a.btn { background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-full); padding: 14px 20px; } }
/* Phones: full-screen menu. Layer 1 lists the sections; a section with a submenu slides in from the right
   (Hanny, 1 Oct 2026). */
.mnav-top { display: none; }
@media (max-width: 960px) {
  html.mnav-lock { overflow: hidden; }
  .site-header.open nav { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--color-white); overflow: hidden; }
  .mnav-top { display: flex; align-items: center; gap: var(--space-3); flex: none; height: 68px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--color-line); }
  .mnav-top .logo img { height: 28px; width: auto; display: block; }
  .mnav-back { display: none; align-items: center; gap: 8px; margin-left: -8px; padding: 8px; background: none; border: 0; font: 600 17px/1 var(--font-sans); color: var(--color-ink); cursor: pointer; }
  .mnav-back svg { width: 22px; height: 22px; }
  .mnav-close { margin-left: auto; padding: 10px; background: none; border: 0; cursor: pointer; color: var(--color-ink); }
  .mnav-close svg { width: 24px; height: 24px; display: block; }
  .site-header.sub .mnav-logo { display: none; }
  .site-header.sub .mnav-back { display: inline-flex; }
  .site-header.open .nav-list { flex: 1; overflow-y: auto; padding: var(--space-4) 24px var(--space-8); gap: 0; }
  .site-header.open .nav-list > li > a, .site-header.open .nav-list > li > button { width: 100%; justify-content: space-between; padding: 16px 0; border-radius: 0; border-bottom: 1px solid var(--color-line); font: 600 22px/1.2 var(--font-display); background: none; }
  .site-header.open .nav-list > li > button .caret { width: 14px; height: 14px; transform: rotate(-90deg); }
  .site-header.open .nav-list > li.nav-mobile-only > a:not(.btn) { font: 500 17px/1.2 var(--font-sans); border-bottom: 0; padding-top: 24px; }
  .site-header.open .nav-mobile-cta { padding-top: var(--space-4); }
  .site-header.open .nav-list > li.nav-mobile-cta > a.btn { justify-content: center; gap: 8px; border-bottom: 0; padding: 16px 20px; font: 600 16px/1 var(--font-sans); background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-full); }
  /* The submenu panel covers the screen under the top bar and slides in from the right. */
  .site-header.open .mega { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 2; display: block; visibility: hidden; margin: 0; border: 0; border-radius: 0; background: var(--color-white); overflow-y: auto; transform: translateX(100%); transition: transform .3s ease, visibility 0s linear .3s; padding-bottom: var(--space-8); }
  .site-header.open .has-menu.open .mega { visibility: visible; transform: translateX(0); transition: transform .3s ease; }
  .site-header.open .mega .mega-col { border-top: 0; padding: var(--space-4) 24px 0; }
  .site-header.open .mega .mega-label:not([aria-hidden]) { margin-bottom: var(--space-2); }
  .site-header.open .mega-foot { padding: var(--space-6) 24px; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .site-header.open .mega { transition: none; } }
/* Phones: a slimmer header bar that uses the width, with a small margin all round. */
@media (max-width: 960px) {
  .site-header { padding: 8px 0; }
  .site-header .container-fluid { padding-left: 10px; padding-right: 10px; }
  .site-header .bar { padding: 6px 6px 6px 16px; border-radius: 14px; gap: var(--space-3); }
  .site-header .bar .logo img { height: 24px; }
  .nav-toggle { padding: 8px; }
  .mnav-top { height: 56px; padding: 0 10px 0 16px; }
  .mnav-top .logo img { height: 24px; }
  .site-header.open .mega { top: 56px; }
  .site-header.open .nav-list { padding-left: 16px; padding-right: 16px; }
  .site-header.open .mega .mega-col, .site-header.open .mega-foot { padding-left: 16px; padding-right: 16px; }
}
/* Phones: the submenu's footer strip runs to the bottom edge, with no white gap below it. */
@media (max-width: 960px) {
  .site-header.open .mega { display: flex; flex-direction: column; padding-bottom: 0; }
  .site-header.open .mega-cols { flex: none; }
  .site-header.open .mega-foot { margin-top: auto; flex: none; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}
/* Phones: the full-screen menu fades and rises in; menu items follow one after another; closing reverses it. */
@keyframes mnav-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mnav-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px) scale(.98); } }
@keyframes mnav-item { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .site-header.open nav { animation: mnav-in .28s cubic-bezier(.2,.7,.2,1) both; transform-origin: 100% 0; }
  .site-header.open.closing nav { animation: mnav-out .22s ease both; }
  /* Animate the link or button, never the <li>: an animated <li> would trap the fixed submenu inside it. */
  .site-header.open .nav-list > li > a, .site-header.open .nav-list > li > button { animation: mnav-item .32s cubic-bezier(.2,.7,.2,1) both; }
  .site-header.open .nav-list > li:nth-child(1) > :is(a, button) { animation-delay: .05s; }
  .site-header.open .nav-list > li:nth-child(2) > :is(a, button) { animation-delay: .09s; }
  .site-header.open .nav-list > li:nth-child(3) > :is(a, button) { animation-delay: .13s; }
  .site-header.open .nav-list > li:nth-child(4) > :is(a, button) { animation-delay: .17s; }
  .site-header.open .nav-list > li:nth-child(5) > :is(a, button) { animation-delay: .21s; }
  .site-header.open .nav-list > li:nth-child(6) > :is(a, button) { animation-delay: .25s; }
  .site-header.open .nav-list > li:nth-child(7) > :is(a, button) { animation-delay: .29s; }
}
/* Phones: the menu's top bar in pastel yellow; dividers under Solutions and Features too. */
@media (max-width: 960px) {
  .site-header.open .mnav-top { background: var(--color-yellow-tint); border-bottom-color: rgba(254, 214, 0, 0.45); }
  .site-header.open .nav-list > li.has-menu > button { border: 0; border-bottom: 1px solid var(--color-line); }
}
/* Phones: "AI Agents (MCP)" on one line, "Ask your agent about your …" on the line below. */
@media (max-width: 640px) { .hl-single .hl-line > strong { display: block; margin: 0 0 4px; } }
@media (max-width: 960px) { .site-header.open .mega-cols { padding-bottom: var(--space-6); } }
/* A small brand logo after a menu item name (SPayLater on "Let customers pay later"). */
.mega-text .mega-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.mega-text .mega-logos img { display: block; height: 15px; width: auto; }
.mega-text .mega-logos img[src*="lhdn"] { height: 22px; }
/* LHDN E-Invoice highlight card in the Features menu: fills the empty space under the last two columns. */
.mega-cols { position: relative; }
.mega-promo { position: absolute; right: 16px; bottom: 16px; width: calc(40% - 32px); display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--color-yellow-tint); border: 1px solid rgba(254, 214, 0, 0.5); text-decoration: none; color: var(--color-ink); transition: border-color .2s, transform .2s; }
.mega-promo:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.mega-promo-logos img { display: block; height: 44px; width: auto; }
.mega-promo-text { display: grid; gap: 4px; }
.mega-promo-text .mega-label { margin: 0; }
.mega-promo-text strong { font: 600 17px/1.25 var(--font-display); }
.mega-promo-go { margin-top: 6px; font-weight: 600; font-size: 14px; }
.mega-promo-go::after { content: " \2192"; }
@media (max-width: 960px) {
  .site-header.open .mega-promo { position: static; width: auto; margin: var(--space-4) 16px var(--space-6); }
}
.mega-promo-logos { display: grid; justify-items: center; gap: 6px; flex: none; }
.mega-promo-logos img.mi { height: 18px; }
.mega-promo { right: 8px; bottom: 8px; width: calc(40% - 24px); border-radius: 10px; }
.mega-promo { align-items: center; }
.mega-promo-logos { align-self: center; align-content: center; }
.mega-promo:hover { border-color: rgba(254, 214, 0, 0.95); box-shadow: 0 0 0 1px rgba(254, 214, 0, 0.35); }
.mega-ai { gap: 8px; }
.mega-ai .hl-mark { display: inline-grid; width: 18px; height: 18px; }
.mega-ai .hl-mark svg { width: 100%; height: 100%; }
.mega-ai .hl-mark { color: var(--color-ink); opacity: 1; filter: none; }
/* Log in link: same soft hover background as the other menu links. */
.nav-actions .login { border-radius: var(--radius-full); padding: 8px 14px; transition: background-color .15s; }
.nav-actions .login:hover { background: var(--color-cream); }
/* Homepage hero: "Get paid." gets the double yellow underline used on section headings. */
.hero h1 .line-mark { --u: .2em; padding-bottom: .12em; width: fit-content; padding-right: 0;
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% var(--u);
  animation: mark-draw .55s cubic-bezier(.65,0,.35,1) .25s both; }
/* One thick yellow bar that draws in from the left. */
@keyframes mark-draw { from { background-size: 0 var(--u); } to { background-size: 100% var(--u); } }
@media (prefers-reduced-motion: reduce) { .hero h1 .line-mark { animation: none; } }
/* A partner logo beside a card's icon (LHDN + MyInvois on the e-invoice card). */
.card-top { display: flex; align-items: center; gap: 16px; }
.card-top .ico-lg { margin-bottom: 0; }
.card-badge { display: block; height: 48px; width: auto; }
/* FAQ: answers open smoothly. Modern browsers animate the height; every browser gets a fade-and-slide on the text,
   and the + turns as it becomes a minus. */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details[open] .answer { animation: faq-in .35s ease both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq summary::after { transition: transform .3s ease, background-color .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details { transition: border-color .2s; }
.faq details[open] { border-color: var(--color-line-strong); }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } .faq details[open] .answer { animation: none; } .faq summary::after { transition: none; } }
/* "Read the guide" in FAQ answers, and every "->" link: the arrow nudges right on hover. */
.faq a.faq-guide::after { content: "\2192"; }
.faq a.faq-guide::after, .link-arrow::after { display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.link-arrow::after { content: "\2192"; }
.faq a.faq-guide:hover::after, .link-arrow:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .faq a.faq-guide::after, .link-arrow::after { transition: none; } }
/* iPhone Safari gives buttons a blue text colour by default; the menu icon draws in that colour, so set it to ink. */
.nav-toggle, .mnav-close, .mnav-back { color: var(--color-ink); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
/* Phones: the secondary link under the hero button lines up on the left with everything else. */
@media (max-width: 640px) { .hero-actions { align-items: flex-start; } .hero-actions > .link-arrow { margin-left: 26px; } }
/* A marked phrase inside a headline line: same yellow bar, sized to the words. */
.hero h1 .line > .line-mark { display: inline; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Intros and short descriptions wrap into balanced lines: no lone word on the last line (Hanny, 1 Oct 2026). */
.section-head .lead, .lead, .hero-sub, .zz-copy p, .card p, .tile span, .step p, .gtk-note span, .faq-head .lead { text-wrap: balance; }
.section-head .lead { max-width: 46em; }
/* Longer paragraphs (FAQ answers, notes): never leave one word alone on the last line. */
main p, .faq .answer p, main li { text-wrap: pretty; }
.section-head .lead, .hero-sub, .zz-copy p, .card p, .step p { text-wrap: balance; }
/* Tile grids (4 across) never leave a gap: 2, 3 or 6 tiles use 2 or 3 columns; 5 and 7 fill with wide tiles. */
@media (min-width: 961px) {
  .tiles:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
  .tiles:has(> :last-child:nth-child(3)), .tiles:has(> :last-child:nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
  .tiles:has(> :last-child:nth-child(5)) > :nth-child(-n+2) { grid-column: span 2; }
  .tiles:has(> :last-child:nth-child(7)) > :last-child { grid-column: span 2; }
}
/* Good to know notes read as two balanced lines (Hanny, 1 Oct 2026). */
.gtk-note > span { text-wrap: balance; }
.gtk-note { align-items: center; }
/* Add-on tags on cream sections: the pale yellow tint blended into the cream, so use the soft orange badge. */
.tone-cream .tag { background: var(--badge-orange-bg); color: var(--badge-orange-fg); border: 1px solid rgba(162, 72, 15, 0.18); }
/* Payment rows: lines only between groups, not above the first or below the last. */
.bt-pay { border-top: 0; }
.bt-pay li:last-child { border-bottom: 0; }
.bt-pay li:first-child { padding-top: 0; }
.pay-wrap { align-items: center; }
/* Phones: a row of logos that does not fit scrolls sideways instead of wrapping (Hanny, 1 Oct 2026). */
@media (max-width: 640px) {
  .pl-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .pl-row::-webkit-scrollbar { display: none; }
  .pl-row > * { flex: none; }
  .pl-row:has(> :nth-child(3)) { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
}
/* Eyebrow with a hand-drawn icon in front. */
.hero-copy > .eyebrow.has-ico { display: flex; align-items: center; gap: 10px; }
.hero-copy > .eyebrow.has-ico .ico-md { width: 26px; height: 26px; margin: 0; flex: none; }
/* Zig-zag screen stack: several screens in one frame, the front slides up and the next comes forward. */
.zz-stack { display: grid; place-items: start center; padding-bottom: calc(var(--space-8) + 28px); }
.zz-stack img { grid-area: 1 / 1; transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.zz-stack img[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.zz-stack img[data-pos="1"] { transform: translateY(14px) scale(.95); opacity: .9; z-index: 2; }
.zz-stack img[data-pos="2"] { transform: translateY(28px) scale(.9); opacity: .7; z-index: 1; }
.zz-stack img[data-pos="out"] { transform: translateY(-10%) scale(1.02); opacity: 0; z-index: 4; }
@media (prefers-reduced-motion: reduce) { .zz-stack img { transition: none; } }
.zz-stack img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top center; }
/* Each stack takes the shape of its first screen; other screens fit inside it whole, never cut. */
.zz-stack img { aspect-ratio: var(--ar, 1); object-fit: contain; object-position: top center; background: var(--color-white); }
.courier-row { background: var(--color-white); }
.zz-stack img { object-position: center; }
/* Use-case cards with a short list of settings (feature pages). */
.case-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.case-card { display: flex; flex-direction: column; gap: 12px; padding: var(--space-8) var(--space-6); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.tone-cream .case-card { background: var(--color-white); }
.case-card h3 { font: 600 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.case-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.case-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--color-ink-muted); }
.case-points .tp-check { width: 22px; height: 22px; margin-top: 1px; }
.case-points .tp-check svg { width: 13px; height: 13px; }
@media (max-width: 960px) { .case-grid { grid-template-columns: 1fr; } }
/* Automation flow box: white panel (its section is cream after the tone pass). */
.tp-flow { background-color: var(--color-white); }
/* On a template page, the gallery marks the template you are reading. */
.tpl-current .tpl-card { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-yellow); }
/* Flow box fits its nodes and sits centred, so there is no empty band on the right. */
@media (min-width: 961px) {
  .tp-flow-wrap { justify-items: start; }
  .tp-needs { max-width: 760px; }
  .tp-flow { width: fit-content; max-width: 100%; padding: var(--space-8) var(--space-12); }
}
/* Automation template "How it runs": the flow keeps one line per branch; the action's full settings sit beside it
   when there is room, else below. */
.tp-run { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); align-items: flex-start; }
.tp-run .tp-flow-wrap { flex: 0 1 auto; justify-items: start; }
.tp-run .tp-flow { width: fit-content; max-width: 100%; padding: var(--space-6) var(--space-8); }
@media (min-width: 961px) { .tp-run .tp-branch { flex-wrap: nowrap; } }
.tp-run .tp-needs { max-width: 640px; }
.tp-run-shot { margin: 0; flex: 1 1 360px; max-width: 560px; }
.tp-run-shot img { max-height: 620px; object-fit: cover; object-position: top; }
/* Long flows (3+ steps in a branch): flow across the top, then the note and the settings side by side. */
@media (min-width: 961px) {
  .tp-run.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-run.wide .tp-flow-wrap { display: contents; }
  .tp-run.wide .tp-flow { grid-column: 1 / -1; }
  .tp-run.wide .tp-needs { align-self: start; }
  .tp-run.wide .tp-run-shot { max-width: none; }
}
/* Automation template "How it runs": heading, flow and note centred (Hanny, 5 Oct 2026). */
.tp-run-sec .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.tp-run-sec .section-head .lead { margin-left: auto; margin-right: auto; }
.tp-run-sec .tp-run { display: grid; justify-items: center; }
.tp-run-sec .tp-run .tp-flow-wrap { justify-items: center; }
.tp-run-sec .tp-needs { max-width: 640px; text-align: center; }
.tp-run-sec .section-head .h2 { margin-left: auto; margin-right: auto; }
/* Flow connectors: a thin line with an arrowhead, and a small yellow dot that travels towards the arrow
   (Hanny, 5 Oct 2026; replaces moving dashes, which flickered next to the arrowhead). */
.tp-branch .tp-node:not(:last-child) { margin-right: 60px; }
.tp-flow { column-gap: 48px; }
.tp-branch .tp-node:not(:last-child)::after, .tp-flow > .tp-node::after {
  height: 10px; margin-top: -5px; opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1.5 1.5 6 5l-4.5 3.5' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 8px 10px no-repeat,
    radial-gradient(circle, #E2BE00 0 2.5px, transparent 3px) 0 center / 6px 6px no-repeat,
    linear-gradient(rgba(34,34,34,.45), rgba(34,34,34,.45)) left center / calc(100% - 4px) 1.5px no-repeat;
  animation: tp-dot 1.4s ease-in-out infinite;
}
.tp-branch .tp-node:not(:last-child)::after { right: -54px; width: 48px; }
.tp-flow > .tp-node::after { right: -44px; width: 40px; }
@keyframes tp-dot {
  0% { background-position: right center, 0% center, left center; opacity: 1; }
  80% { background-position: right center, 62% center, left center; }
  100% { background-position: right center, 62% center, left center; }
}
@media (max-width: 960px) {
  .tp-flow { row-gap: 38px; }
  .tp-flow > .tp-node::after {
    display: block; right: auto; left: 20px; top: auto; bottom: -34px; width: 10px; height: 30px; margin-top: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1.5 1.5 5 6l3.5-4.5' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 10px 8px no-repeat,
      radial-gradient(circle, #E2BE00 0 2.5px, transparent 3px) center 0 / 6px 6px no-repeat,
      linear-gradient(rgba(34,34,34,.45), rgba(34,34,34,.45)) center top / 1.5px calc(100% - 4px) no-repeat;
    animation-name: tp-dot-down;
  }
}
@media (max-width: 640px) {
  .tp-branch { gap: 34px; }
  .tp-branch .tp-node:not(:last-child) { margin-right: 0; }
  .tp-branch .tp-node:not(:last-child)::after {
    right: auto; left: 20px; top: auto; bottom: -30px; width: 10px; height: 26px; margin-top: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1.5 1.5 5 6l3.5-4.5' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 10px 8px no-repeat,
      radial-gradient(circle, #E2BE00 0 2.5px, transparent 3px) center 0 / 6px 6px no-repeat,
      linear-gradient(rgba(34,34,34,.45), rgba(34,34,34,.45)) center top / 1.5px calc(100% - 4px) no-repeat;
    animation-name: tp-dot-down;
  }
}
@keyframes tp-dot-down {
  0% { background-position: center bottom, center 0%, center top; }
  80%, 100% { background-position: center bottom, center 55%, center top; }
}
@media (prefers-reduced-motion: reduce) { .tp-branch .tp-node::after, .tp-flow > .tp-node::after { animation: none; } }

/* /examples/ hero: tilted columns of example pages on a phone that drift up and down (Hanny, 5 Oct 2026). */
.ex-scene { position: relative; height: 560px; overflow: hidden; border-radius: var(--radius-lg); background: #FDF0B0;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.ex-scene-tilt { position: absolute; inset: -30% -10%; display: flex; justify-content: center; gap: 18px; transform: rotate(-10deg); }
.ex-scene-col { width: 31%; max-width: 210px; overflow: hidden; }
.ex-scene-track { display: flex; flex-direction: column; gap: 18px; animation: ex-drift 38s linear infinite; }
.ex-scene-col.c1 .ex-scene-track { animation-direction: reverse; animation-duration: 44s; }
.ex-scene-col.c2 .ex-scene-track { animation-duration: 34s; }
.ex-scene-track img { width: 100%; height: auto; display: block; border-radius: 16px; background: var(--color-white); box-shadow: 0 10px 24px rgba(34,34,34,.14), 0 0 0 1px rgba(34,34,34,.08); }
@keyframes ex-drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--ex-gap, 18px) / 2)); } }
@media (max-width: 960px) { .ex-scene { height: 420px; } }
@media (prefers-reduced-motion: reduce) { .ex-scene-track { animation: none; } }
/* Desktop: like lamanweb.my, the collage fills the right half of the hero edge to edge, from the top of the page
   (behind the header) to the bottom of the hero, with no frame (Hanny, 5 Oct 2026). */
@media (min-width: 961px) {
  body:has(.ex-scene) .site-header { background: none; }
  .hero:has(.ex-scene) { position: relative; overflow: hidden; margin-top: calc(-1 * var(--hdr-h, 86px)); padding-top: calc(var(--hdr-h, 86px) + var(--space-16)); padding-bottom: var(--space-20, 80px); }
  .hero:has(.ex-scene) .hero-copy { position: relative; z-index: 1; }
  .hero .ex-scene { position: absolute; top: 0; right: 0; bottom: 0; left: 42%; height: auto; border-radius: 0; background: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(#000 82%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(#000 82%, transparent); mask-composite: intersect; }
  .hero .ex-scene-tilt { inset: -45% -20% -45% -5%; gap: 26px; transform: rotate(-22deg); }
  .hero .ex-scene-col { width: 30%; max-width: 280px; }
  /* Wide monitors: the columns start near the text, not centred in the wide free space (Hanny, 5 Oct 2026). */
  @media (min-width: 1600px) { .hero .ex-scene-tilt { justify-content: flex-start; padding-left: 4%; } }
  .hero .ex-scene-track { gap: 26px; --ex-gap: 26px; }
  .hero .ex-scene-track img { border-radius: 22px; }
}
@media (max-width: 960px) { .hero .ex-scene { margin-inline: calc(50% - 50vw); border-radius: 0; background: none; } .hero .ex-scene-tilt { transform: rotate(-16deg); } }

/* Customer quotes (Testimonials.astro): sans-serif quote with a big yellow quote mark, photo and name below. */
.tm-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.tm-grid > li { grid-column: span 2; }
.tm-grid > li:nth-child(4), .tm-grid > li:nth-child(5) { grid-column: span 3; }
.tm-grid.single { grid-template-columns: 1fr; max-width: 820px; }
.tm-grid.single > li { grid-column: auto; }
.tm-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-8); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.tone-white .tm-card { background: var(--color-cream); }
.tm-card::before { content: "\201C"; position: absolute; z-index: -1; left: 18px; top: 2px; font: 700 110px/1 Georgia, "Times New Roman", serif; color: var(--color-yellow); opacity: .55; pointer-events: none; }
.tm-card blockquote { margin: 0; padding-top: var(--space-4); font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--color-ink); text-wrap: pretty; }
.tm-grid.single .tm-card blockquote { font-size: 22px; }
.tm-who { display: flex; align-items: center; gap: var(--space-3); }
.tm-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-yellow); }
.tm-who b { display: block; font-weight: 600; }
.tm-who small { display: block; color: var(--color-ink-muted); font-size: 14px; }
@media (max-width: 960px) { .tm-grid { grid-template-columns: 1fr 1fr; } .tm-grid > li, .tm-grid > li:nth-child(4), .tm-grid > li:nth-child(5) { grid-column: auto; } .tm-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .tm-grid { grid-template-columns: 1fr; } }

/* "Used by" with a picture on the right (QR Terminal phones in a V, Hanny 5 Oct 2026): tiles in 2 columns on the left, no motion. */
.ub-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--space-12); align-items: center; }
.ub-split .tiles { grid-template-columns: repeat(2, 1fr); }
.ub-img { margin: 0 calc(-1 * var(--space-6)) 0 0; }
.ub-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(34,34,34,.07)); }
@media (max-width: 960px) { .ub-split { grid-template-columns: 1fr; } .ub-img { order: -1; max-width: 460px; margin: 0 auto; } }
@media (max-width: 640px) { .ub-split .tiles { grid-template-columns: 1fr; } }

/* QR Terminal hero on phones (Hanny, 5 Oct 2026: broken on mobile): a taller scene, a wider terminal below the
   stall sign, and the terminal kept to its own size (its text no longer stretches it past the scene). */
.qrs-term { min-height: 0; overflow: hidden; }
@media (max-width: 560px) {
  .qrs { aspect-ratio: 4 / 5; background: linear-gradient(to bottom, var(--color-cream) 0 70%, #E9DDBF 70% 100%); }
  .qrs::after { top: 70%; }
  .qrs-sign { left: 50%; transform: translateX(-50%); top: 4%; white-space: nowrap; }
  .qrs-term { left: 7%; top: 15%; width: 54%; border-radius: 22px; }
  .qrs-phone { right: 4%; top: 30%; width: 34%; }
  .qrs-toast { left: 5%; right: 5%; bottom: 4%; justify-content: center; }
}

/* ---------- Cookie preferences panel (CookieSettings.astro, Hanny 5 Oct 2026) ---------- */
.footer-cookies { padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink-muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
.footer-cookies:hover { color: var(--color-ink); text-decoration-color: var(--color-yellow); }
.ckset { position: fixed; inset: 0; z-index: 1000; background: rgba(34,34,34,.55); display: flex; align-items: center; justify-content: center; padding: 20px; text-align: left; }
.ckset[hidden] { display: none; }
.ckset-card { position: relative; width: 100%; max-width: 480px; padding: 26px 26px 22px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.25); color: var(--color-ink); }
.ckset-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: none; color: var(--color-ink-muted); cursor: pointer; }
.ckset-x:hover { background: var(--color-cream); color: var(--color-ink); }
.ckset-card h2 { margin: 0 40px 6px 0; font: 600 22px/1.2 var(--font-display); }
.ckset-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--color-ink-muted); }
.ckset-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-line); }
.ckset-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ckset-t b { font-size: 15px; }
.ckset-t small { font-size: 13px; color: var(--color-ink-muted); }
.ckset-row input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--color-line-strong); cursor: pointer; transition: background .15s; }
.ckset-row input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ckset-row input[type=checkbox]:checked { background: var(--color-success); }
.ckset-row input[type=checkbox]:checked::after { transform: translateX(18px); }
.ckset-row input[type=checkbox]:disabled { opacity: .55; cursor: default; }
.ckset-row input[type=checkbox]:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.ckset-save { width: 100%; justify-content: center; margin-top: 18px; }
.ckset-note { margin: 14px 0 0; font-size: 13px; text-align: center; color: var(--color-ink-muted); }
.ckset-note a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-yellow); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ckset-row input[type=checkbox], .ckset-row input[type=checkbox]::after { transition: none; } }

/* Speed (audit, 5 Oct 2026): sections below the first screen are laid out and painted only when they come
   near the viewport, so a slow phone shows the hero first. The intrinsic size keeps the scrollbar stable. */
main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Legal pages in the site design (privacy, 5 Oct 2026). */
.legal-page .prose h1 { margin-bottom: var(--space-2); }
.legal-page .legal-updated { font-size: 14px; margin-bottom: var(--space-8); }
.legal-page .prose h2 { margin: var(--space-10, 40px) 0 var(--space-3); font: 600 22px/1.25 var(--font-display); color: var(--color-ink); }
.legal-page .prose p + p { margin-top: var(--space-3); }