/* ============================================================
   Side by Side Indonesia - Landing styles
   Identitas: editorial kafe, mood roastery specialty. UI netral
   (hitam/putih/abu hangat), warna kuat datang dari fotografi.
   Serif display + monospace untuk harga/label. Lihat DESIGN.md.
   ============================================================ */

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

:root {
  /* Palet "Tinta Batu": biru tinta di atas kertas sejuk.
     Menggantikan teal "Highland Mist" karena hue teal satu keluarga
     dengan aksen janus.coffee. Studi varian: variants/README.md. */
  --ink: #101820;          /* teks utama, 15.74:1 di atas paper */
  --paper: #eef1f0;        /* latar utama, kertas sejuk */
  --cream: #dee4e3;        /* latar section alt */
  --charcoal: #4a565c;     /* teks sekunder, 6.65 paper / 5.87 cream */
  --line: #c2cbc9;         /* garis pemisah, dekoratif (1.46) */
  --accent: #2f5d7c;       /* aksen biru tinta, 6.20 di atas paper */
  --accent-text: #24475e;  /* aksen versi teks, 8.64 paper / 7.63 cream */
  --card: #ffffff;         /* permukaan kartu */
  --black: #0a1218;        /* blok gelap, footer/CTA */

  /* Teks di atas scrim hero, diukur ke titik paling terang hero-loop. */
  --hero-lead: #d8dfdd;    /* 8.15 */
  --hero-note: #c2cbc9;    /* 6.66 */
  --hero-kicker: #a8c6d6;  /* 6.15 */

  /* Display grotesque: serif dibuang supaya tidak satu keluarga dengan
     situs roastery lain. Mono tinggal untuk angka rupiah. */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-label: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-price: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Deprecated: pakai --font-label untuk UI, --font-price untuk angka. */
  --font-mono: var(--font-price);

  --display-weight: 600;
  --display-tracking: -0.02em;
  --display-leading: 1.03;
  --label-tracking: 0.08em;
}

html {
  scroll-behavior: smooth;
  /* Tiap section jadi titik snap vertikal. 'proximity' (bukan
     'mandatory') dipakai supaya section yang isinya lebih tinggi
     dari layar tetap bisa di-scroll penuh, tidak terjebak di satu
     layar. scroll-padding-top menyelaraskan anchor + snap ke bawah
     header sticky. */
  scroll-snap-type: y proximity;
  scroll-padding-top: 60px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Texture kertas halus di seluruh halaman: garis 4px menyilang
   dengan opacity sangat rendah (<=0.03) sehingga tidak mengurangi
   kontras teks (tetap AA). Fixed di belakang konten, pointer-events
   none agar tidak mengganggu interaksi. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
}
/* Pastikan konten di atas lapisan texture. */
.site-nav, main, .site-footer, #mobileMenu { position: relative; z-index: 1; }

/* ── Full-viewport snap sections ───────────────────────────
   Tiap section memenuhi tinggi layar (100svh) dan jadi titik
   snap vertikal. Isi disejajarkan ke tengah agar tidak menggantung
   di atas. 'proximity' (bukan 'mandatory') dipakai agar section
   yang isinya lebih tinggi dari layar, seperti daftar 6 coffee
   shop, tetap bisa di-scroll penuh tanpa terjebak di satu layar.
   Antarmuka ini dimatikan saat pengguna memilih reduced-motion. */
.hero,
.section,
.mood-strip,
.collab {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}
/* Saat section jadi flex (snap), container harus mengisi lebar
   dan boleh mengecil agar isinya ikut mengecil, bukan meluap. */
.section > .container,
.hero > .container {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1120px;
}

/* Strip pendek: tinggi tetap, BUKAN layar penuh dan bukan
   titik snap. Dipakai untuk "sore di kota batu". */
.mood-strip--short {
  min-height: 300px;
  height: 300px;
  scroll-snap-align: none;
  align-items: center;
}
.mood-strip--short { padding: 0; overflow: hidden; position: relative; }
.mood-strip--short .split__media-inner { padding: 24px 28px; max-width: 620px; }
.mood-strip--short .split__quote { font-size: 26px; }

@media (max-width: 768px) {
  .mood-strip--short .split__quote { font-size: 22px; }
}

a { color: var(--accent-text); }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.container--narrow { max-width: 760px; }

.prototype-banner {
  background: var(--accent);
  color: #2b1d05;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(238, 241, 240, 0.96);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav__logo {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  flex-shrink: 0;
}
.site-nav__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-nav__links { display: flex; align-items: center; gap: 22px; }
.site-nav__links a {
  color: var(--charcoal);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav__links a:hover { color: var(--accent); }

.site-nav__cta {
  background: var(--ink);
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.site-nav__cta:hover { background: var(--accent); }

.site-nav__mobile { display: none; }

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

#mobileMenu {
  position: fixed;
  top: 59px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
  flex-direction: column;
  padding: 24px;
  gap: 6px;
  overflow-y: auto;
  display: none;
}
#mobileMenu.open { display: flex; }
#mobileMenu a {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
#mobileMenu a:hover { color: var(--accent); }
#mobileMenu .mobile-cta {
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-align: center;
  margin-top: 12px;
  border-bottom: none;
}
#mobileMenu .mobile-cta:hover { background: var(--accent); }

@media (max-width: 768px) {
  .site-nav__links { display: none; }
  .site-nav__mobile { display: flex; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 72px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}
/* Gambar fallback: tersembunyi sampai video gagal diputar (JS menambah
   kelas is-video-failed ke .hero__media). Saat terbuka, menutupi video. */
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.hero__media.is-video-failed .hero__fallback {
  opacity: 1;
  visibility: visible;
}
.hero__media.is-video-failed .hero__video {
  display: none;
}
.hero__photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,24,0.62) 0%, rgba(10,18,24,0.55) 50%, rgba(10,18,24,0.86) 100%),
    linear-gradient(90deg, rgba(10,18,24,0.60) 0%, rgba(10,18,24,0.32) 50%, rgba(10,18,24,0.55) 100%);
}
.hero__grid { position: relative; z-index: 1; }
.hero__grid {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.hero__copy { flex: 1 1 360px; min-width: 0; }
.hero__kicker {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: var(--display-leading);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin-top: 14px;
  text-wrap: balance;
  color: var(--paper);
}
.hero__lead {
  font-size: 17px;
  color: var(--hero-lead);
  margin-top: 18px;
  max-width: 520px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero__note {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--hero-note);
  margin-top: 20px;
  letter-spacing: 0.04em;
}
.hero__kicker { color: var(--hero-kicker); }

.hero__visual {
  flex: 1 1 300px;
  min-width: 0;
  position: relative;
  height: 320px;
}
.hero__card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__card--main {
  width: 240px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.hero__card--float {
  width: 200px;
  bottom: 8px;
  right: 4px;
  transform: rotate(2deg);
}
.hero__card-tag {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hero__card-price {
  font-family: var(--font-price);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.hero__card-sub {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.hero__card--float .hero__card-tag { color: var(--accent-text); }
.hero__card--float .hero__card-title { color: var(--ink); }
.hero__card--float .hero__card-sub { color: var(--charcoal); opacity: 1; }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section--alt { background: var(--cream); }

/* Paket memakai foto latar subscription dengan lapisan krem agar
   teks heading dan kartu tetap terbaca (kontras AA). Gambar
   di-cover; kartu di atasnya memakai permukaan putih sendiri. */
#paket {
  position: relative;
  background-color: var(--cream);
  overflow: hidden;
}
#paket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/subs-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
#paket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(222,228,227,0.86) 0%, rgba(222,228,227,0.74) 100%);
}
#paket > .container { position: relative; z-index: 1; }

.section__head { max-width: 640px; margin-bottom: 36px; }
.section__head h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.section__head p { color: var(--charcoal); margin-top: 12px; font-size: 16px; }
.section__footnote {
  font-family: var(--font-label);
  color: var(--charcoal);
  font-size: 12px;
  margin-top: 20px;
  letter-spacing: 0.04em;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  min-height: 48px;
  padding: 0 24px;
  justify-content: center;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost-light { background: transparent; color: var(--paper); border: 1px solid var(--hero-note); }
.btn--ghost-light:hover { border-color: var(--paper); color: var(--paper); }
.btn--white { background: #fff; color: var(--ink); }

/* ── Bundles (3 tier paket) ──────────────────────────────── */
/* Layout melintang: satu baris selebar container (1120px) agar
   lebarnya sama dengan section lain. Ketiga kartu bagi ruang sama
   rata. Di layar sempit, baris bisa digeser horizontal (scroll
   terselubung) tanpa membelah teks jadi terlalu sempit. */
.bundles {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.bundle-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bundle-card--featured {
  border: 2px solid var(--accent);
  box-shadow: 0 10px 30px rgba(10, 18, 24, 0.10);
}
.bundle-card__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-text);
}
.bundle-card__price {
  font-family: var(--font-price);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.bundle-card__shop { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.bundle-card__meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
}
.bundle-card__meta li {
  font-size: 14px;
  color: var(--charcoal);
  padding-left: 22px;
  position: relative;
}
.bundle-card__meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--accent);
}
.bundle-card .btn--primary { margin-top: auto; align-self: flex-start; }

@media (max-width: 720px) {
  /* Baris tetap melintang di layar kecil: digeser, bukan mengecil. */
  .bundles {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .bundle-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}


/* ── Dua cara ────────────────────────────────────────────── */
.dua-cara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.cara {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.cara--accent { border-color: var(--accent); }
.cara h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.cara p { color: var(--charcoal); font-size: 15px; }
.cara ul { list-style: none; margin-top: 16px; }
.cara li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink);
}
.cara li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--accent);
}
/* Daftar bernomor (tata cara): penomoran mono di sebelah kiri. */
.cara__steps {
  list-style: none;
  counter-reset: step;
  margin-top: 16px;
}
.cara__steps li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink);
  counter-increment: step;
}
.cara__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--cream);
  border-radius: 3px;
}
.cara__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--charcoal);
  font-style: italic;
}

#coffee-shop .container { position: relative; z-index: 1; }

/* ── Kedai gallery (marquee satu baris + hover reveal) ─────── */
/* Kartu bergaya arsip blog: foto memenuhi kartu, judul duduk di bawah,
   alamat + jam buka + CTA menyusul naik saat hover/fokus. Satu baris
   saja; bila kartu melebihi lebar layar, JS menggandakan isi dan memberi
   .is-running sehingga track bergeser mulus tanpa putus (translateX -50%).
   Jarak antar kartu memakai margin-right (bukan gap) supaya lebar 2 set
   persis 2x satu set dan loop -50% tidak menyisakan sambungan. */
.kedai-gallery { --shop-gap: 20px; --shop-ease: cubic-bezier(0.19, 1, 0.22, 1); }
.kedai-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.kedai-track {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: max-content;
  min-width: 100%;
}
.kedai-track.is-running {
  justify-content: flex-start;
  animation: kedai-scroll 60s linear infinite;
}
.kedai-track.is-running:hover,
.kedai-track.is-running:focus-within { animation-play-state: paused; }
/* Jeda permanen lewat tombol (WCAG 2.2.2: konten bergerak harus bisa
   dihentikan tanpa bergantung pada hover). */
.kedai-track.is-paused { animation-play-state: paused; }

.kedai-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-text);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.kedai-toggle:hover { border-color: var(--accent); }
.kedai-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.kedai-toggle[hidden] { display: none; }

@keyframes kedai-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.kedai-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  width: clamp(232px, 27vw, 320px);
  height: 360px;
  margin-right: var(--shop-gap);
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream);
  color: var(--paper);
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow 320ms ease;
}
.kedai-card__media,
.kedai-card__media > img,
.kedai-card__media > .kedai-card__initial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kedai-card__media > img {
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 900ms var(--shop-ease);
}
.kedai-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 18, 24, 0.94) 0%,
    rgba(10, 18, 24, 0.62) 36%,
    rgba(10, 18, 24, 0.16) 68%,
    rgba(10, 18, 24, 0) 100%
  );
  transition: background 600ms var(--shop-ease);
}
.kedai-card__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Default: hanya judul yang terlihat. 5.1rem cukup untuk judul
     dua baris (22px padding + 2 x 26.4px) tanpa memotong huruf. */
  max-height: 5.1rem;
  overflow: hidden;
  transition: max-height 700ms var(--shop-ease);
}
.kedai-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.kedai-card__copy {
  color: rgba(238, 241, 240, 0.9);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 8px;
}
.kedai-card__meta {
  color: rgba(238, 241, 240, 0.72);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.kedai-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid rgba(238, 241, 240, 0.55);
  border-radius: 999px;
  background: rgba(10, 18, 24, 0.3);
  color: #fff;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kedai-card__copy,
.kedai-card__meta,
.kedai-card__cta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms ease, transform 620ms var(--shop-ease);
}
.kedai-card__initial {
  align-items: center;
  color: var(--accent);
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7rem);
  justify-content: center;
}
.kedai-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Hover-reveal hanya untuk perangkat berhover. Di layar sentuh tidak ada
   hover, jadi seluruh isi kartu langsung terbaca (aturan di bawah). */
@media (hover: hover) and (min-width: 769px) {
  .kedai-card:hover,
  .kedai-card:focus-visible {
    box-shadow: 0 18px 36px rgba(10, 18, 24, 0.18);
  }
  .kedai-card:hover .kedai-card__media > img,
  .kedai-card:focus-visible .kedai-card__media > img { transform: scale(1.06); }
  .kedai-card:hover .kedai-card__shade,
  .kedai-card:focus-visible .kedai-card__shade {
    background: linear-gradient(
      to top,
      rgba(10, 18, 24, 0.97) 0%,
      rgba(10, 18, 24, 0.78) 45%,
      rgba(10, 18, 24, 0.28) 78%,
      rgba(10, 18, 24, 0) 100%
    );
  }
  .kedai-card:hover .kedai-card__content,
  .kedai-card:focus-visible .kedai-card__content { max-height: 260px; }
  .kedai-card:hover .kedai-card__copy,
  .kedai-card:hover .kedai-card__meta,
  .kedai-card:hover .kedai-card__cta,
  .kedai-card:focus-visible .kedai-card__copy,
  .kedai-card:focus-visible .kedai-card__meta,
  .kedai-card:focus-visible .kedai-card__cta {
    opacity: 1;
    transform: none;
    transition-delay: 90ms;
  }
}

/* Layar sentuh / lebar sempit: kartu lebih pendek, isi selalu tampil.
   Gradien dibuat lebih pekat karena judul/alamat duduk di tengah kartu. */
@media (hover: none), (max-width: 768px) {
  .kedai-card { width: 236px; height: 320px; }
  .kedai-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .kedai-card__shade {
    background: linear-gradient(
      to top,
      rgba(10, 18, 24, 0.95) 0%,
      rgba(10, 18, 24, 0.8) 45%,
      rgba(10, 18, 24, 0.45) 75%,
      rgba(10, 18, 24, 0.12) 100%
    );
  }
  .kedai-card__content { max-height: none; }
  .kedai-card__copy,
  .kedai-card__meta,
  .kedai-card__cta { opacity: 1; transform: none; }
}

/* Tanpa gerak: marquee dimatikan, kartu digeser manual (satu baris) dan
   seluruh isi kartu langsung terbaca tanpa perlu hover. */
@media (prefers-reduced-motion: reduce) {
  .kedai-track.is-running { animation: none; }
  .kedai-rail { overflow-x: auto; scroll-snap-type: x mandatory; }
  .kedai-card { scroll-snap-align: center; }
  .kedai-card__content { max-height: none; }
  .kedai-card__copy,
  .kedai-card__meta,
  .kedai-card__cta { opacity: 1; transform: none; }
}
.shop__empty { color: var(--charcoal); font-family: var(--font-label); font-size: 13px; }

/* ── Duo: FAQ (kiri) + Kontributor (kanan) ─────────────────── */
/* Dua konten pendek digabung jadi satu layar penuh, split dua.
   Masuk grup snap full-viewport di atas; di layar sempit bertumpuk
   (FAQ atas, Kontributor bawah). Kedua kolom di tengah vertikal. */
.duo {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.duo__col {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.duo__col--collab {
  background: var(--cream);
  align-items: center;
}
/* Kontainer di dalam kolom: batasi lebar dan ratakan kiri agar
   teks tidak tegas ke pinggir layar lebar. */
.duo__col .container { width: 100%; max-width: 520px; }

@media (max-width: 768px) {
  .duo { flex-direction: column; }
  .duo__col { padding: 40px 24px; }
  .duo__col .container { max-width: 640px; }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.faq__item summary {
  cursor: pointer;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-label);
  font-size: 20px;
  color: var(--accent-text);
  font-weight: 500;
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 20px 18px; color: var(--charcoal); font-size: 15px; }

/* ── CTA banner ──────────────────────────────────────────── */
.cta-banner {
  background: var(--ink);
  border-radius: 6px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--display-weight);
  line-height: 1.08;
  letter-spacing: var(--display-tracking);
  color: var(--paper);
}
.cta-banner__desc { color: var(--hero-note); margin-top: 8px; font-size: 15px; max-width: 460px; }
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 24px 32px;
  background: var(--paper);
}
.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.site-footer__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }

.site-footer__cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.site-footer__col-title {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.site-footer__links { list-style: none; }
.site-footer__links li { margin-bottom: 8px; }
.site-footer__links a {
  font-size: 14px;
  color: var(--charcoal);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__links li:not(:has(a)) {
  font-size: 14px;
  color: var(--charcoal);
}

.site-footer__copy {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  max-width: 1120px;
  margin: 32px auto 0;
}

/* ── Focus visibility ────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Di atas latar gelap, cincin --accent hanya 2.54:1, jadi pakai --paper
   (15.74:1). Menutup celah yang tercatat di docs/styleguide.md §7. */
.hero a:focus-visible,
.hero button:focus-visible,
.cta-banner a:focus-visible,
.cta-banner button:focus-visible {
  outline-color: var(--paper);
}

/* ── Scroll reveal ───────────────────────────────────────── */
/* Elemen berlabel [data-reveal] muncul saat masuk viewport:
   fade + naik 24px, durasi 550ms, stagger ringan antar anak.
   Dipasang lewat JS (IntersectionObserver). Jika JS mati,
   elemen tetap tampil karena kelas .is-hidden tidak ditambahkan. */
/* Elemen [data-reveal] disembunyikan oleh JS (kelas .is-hidden).
   Saat .is-visible ditambahkan, transisi opacity + transform + delay
   berjalan: elemen naik 24px dan memudar masuk. Stagger lewat
   variabel --reveal-delay yang diset per elemen. */
[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-hidden.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 550ms ease,
    transform 550ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-hidden {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-reveal].is-hidden.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Collaborator logos ───────────────────────────────────── */
/* .collab masuk dalam grup snap full-viewport di atas, tapi punya
   dua anak (judul + track logo) sehingga disusun vertikal.
   align-items: stretch (bukan 'center' dari aturan snap umum) agar
   track marquee tidak melebar mengikuti isinya dan memicu overflow
   horizontal di layar sempit. */
.collab {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-bottom: 64px;
}
.collab__viewport { max-width: 100%; }
.collab__head { max-width: 640px; margin-bottom: 32px; }
.collab__head h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.collab__head p { color: var(--charcoal); margin-top: 12px; font-size: 16px; }

.collab__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.collab__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 8px 24px;
}
.collab__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tiap logo dalam box putih, margin 10px agar tidak overflow
   (termasuk logo Treum, Selai, Janus yang lebih lebar/horizontal). */
.collab__item img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.78;
  filter: saturate(0.96);
  transition: opacity 220ms ease;
  background: #ffffff;
  margin: 10px;
  padding: 8px;
  border-radius: 10px;
}
.collab__item img:hover { opacity: 1; }
.collab__item a { align-items: center; display: flex; justify-content: center; }
.collab__item a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Saat logo melebihi satu baris, JS menambah .is-running dan
   menggandakan isi untuk loop mulus. Track berjalan 50% (satu set). */
.collab__logos.is-running {
  justify-content: flex-start;
  width: max-content;
  animation: collab-scroll 32s linear infinite;
}
.collab__logos.is-running:hover,
.collab__logos.is-running:focus-within { animation-play-state: paused; }

@keyframes collab-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .collab__logos.is-running { animation: none; justify-content: center; flex-wrap: wrap; }
}

/* Logo kolaborator: section dipadatkan tinggi ~300px dengan margin
   atas/bawah kecil agar tidak memakan banyak ruang vertikal. */
.collab-thumbs {
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 300px;
  display: flex;
  align-items: center;
}
.collab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.collab-card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 1px 0 rgba(10,18,24,0.05);
}
.collab-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.collab-card figcaption {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-display);
}
@media (min-width: 760px) {
  .collab-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Peta + Tanya Jawab: satu section full-viewport, split dua.
   Peta (kiri) memenuhi box; FAQ (kanan) di tengah secara vertikal.
   Masuk grup snap full-viewport (.section). */
.split-duo {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.split-duo__media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-duo__media .coffee-map { border-radius: 0; position: absolute; inset: 0; }
.split-duo__faq {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--paper);
  padding: 48px 40px;
}
.split-duo__faq .section__head { margin-bottom: 28px; }

@media (max-width: 768px) {
  .split-duo { flex-direction: column; }
  .split-duo__media { flex: 0 0 42vh; min-height: 0; }
  .split-duo__faq { flex: 1 1 auto; padding: 40px 24px; }
}

/* ── Peta coffee shop ─────────────────────────────────────── */
/* Sub-elemen suasana (foto, overlay, kicker, quote) dipakai ulang
   oleh .mood-strip--short di atas. */
.split__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.split__overlay {
  position: absolute;
  inset: 0;
  /* Dua lapis: vertikal untuk kedalaman, horizontal supaya area teks di
     kiri cukup gelap. Diukur ke piksel paling terang foto: tanpa lapis
     horizontal, kicker 12px hanya 1,39:1 (gagal AA). */
  background:
    linear-gradient(180deg, rgba(10,18,24,0.58) 0%, rgba(10,18,24,0.80) 100%),
    linear-gradient(90deg, rgba(10,18,24,0.72) 0%, rgba(10,18,24,0.50) 62%, rgba(10,18,24,0.16) 100%);
}
.split__media-inner {
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 560px;
}
.split__kicker {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--hero-kicker);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.split__quote {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.12;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}

/* Section peta: peta memenuhi seluruh box panel (crop diperbolehkan).
   Rasio 2048/878 tidak dijaga; SVG pin pakai preserveAspectRatio
   slice agar tetap selaras dengan foto yang di-cover. Animasi pin
   (appear + pulse) hanya berjalan saat motion diizinkan. */
.map-section { background: var(--cream); }
.coffee-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.coffee-map > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coffee-map__pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.coffee-map__pins { /* scoping agar animasi tidak bocor ke SVG lain */ }
.pin {
  transform-origin: 0 0;
  animation: map-appear 5s ease-in-out infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 5px 4px rgba(0,0,0,0.27));
}
.pulse {
  fill: none;
  stroke: #ef4436;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pulse 5s ease-out infinite;
  animation-delay: calc(var(--delay) + 0.7s);
  opacity: 0;
}
@keyframes map-appear {
  0%, 8%, 28%, 100% { transform: translateY(0) scale(1); }
  14% { transform: translateY(-13px) scale(1.08); }
  20% { transform: translateY(0) scale(0.95); }
  24% { transform: translateY(-4px) scale(1.02); }
}
@keyframes map-pulse {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15% { opacity: 0.7; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
  .pin { animation: none; }
  .pulse { display: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: 34px; }
  .hero__lead { font-size: 16px; }
  /* Kartu hero hanya untuk desktop; di mobile disembunyikan agar
     teks hero memenuhi layar tanpa kartu melayang menutupi. */
  .hero__visual { display: none; }
  .hero__copy { flex-basis: 100%; }
  .section { padding: 48px 0; }
  .section__head h2 { font-size: 28px; }
  .cta-banner { padding: 32px 24px; }
  /* Section logo kolaborator: pertahankan padding kecil di mobile
     (override .section padding 48px agar tidak berjarak jauh). */
  .collab-thumbs { padding-top: 16px; padding-bottom: 16px; }
}
/* Portal / customer account / backoffice */
.portal-body { background: #f4f2ec; color: #1f2a2e; min-height: 100vh; }
.portal-body::before { display: none; }
.portal-nav { align-items: center; background: #1f2a2e; color: #f4f2ec; display: flex; justify-content: space-between; padding: 18px 5vw; position: sticky; top: 0; z-index: 5; }
.portal-brand { color: inherit; font-family: Georgia, serif; font-size: 1.1rem; text-decoration: none; }
.portal-nav__links { align-items: center; display: flex; gap: 22px; }
.portal-nav a { color: inherit; text-decoration: none; }
.portal-nav__links a, .link-button { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .04em; }
.link-button { background: none; border: 0; color: #f4f2ec; cursor: pointer; }
.portal-main { margin: 0 auto; max-width: 1180px; padding: 64px 5vw 100px; }
.portal-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 42px; }
.portal-heading h1, .auth-card h1, .checkout-layout h1, .narrow-content > h1 { font-family: Georgia, serif; font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 500; line-height: .95; margin: 8px 0 16px; }
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .13em; margin: 0 0 12px; opacity: .68; }
.muted { color: #667176; display: block; font-size: .92rem; line-height: 1.55; }
.button { border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .73rem; letter-spacing: .03em; padding: 13px 20px; text-decoration: none; }
.button--dark { background: #1f2a2e; color: #fff; }
.button--outline { border-color: #1f2a2e; color: #1f2a2e; }
.button--small { font-size: .65rem; padding: 8px 13px; }
.panel, .metric, .payment-card, .auth-card { background: #fff; border: 1px solid #dedbd2; border-radius: 4px; padding: 26px; }
.panel { margin-bottom: 26px; }
.panel__heading { align-items: center; border-bottom: 1px solid #ebe8df; display: flex; justify-content: space-between; margin-bottom: 5px; padding-bottom: 16px; }
.panel__heading h2 { font-family: Georgia, serif; font-size: 1.7rem; font-weight: 500; margin: 0; }
.panel__heading a, .back-link, .text-link, .form-foot a { color: #b25536; text-decoration: none; }
.portal-grid, .shop-grid, .metric-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.mini-card { border-top: 2px solid #b25536; padding: 22px 0; }
.mini-card h3 { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; margin: 10px 0; }
.mini-card .button { margin-top: 20px; }
.price { display: block; font-size: 1.2rem; margin-top: 18px; }
.voucher-row, .order-row, .menu-row { align-items: center; border-bottom: 1px solid #ebe8df; display: flex; gap: 18px; justify-content: space-between; padding: 17px 0; }
.voucher-row:last-child, .order-row:last-child, .menu-row:last-child { border-bottom: 0; }
.voucher-row strong, .order-row strong, .menu-row h3 { display: block; font-size: .96rem; margin-bottom: 5px; }
.voucher-code { background: #f1dfd8; color: #9b422a; display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; letter-spacing: .1em; margin: 0 12px 6px 0; padding: 8px; }
.status, .pill { background: #eeeae0; border-radius: 20px; color: #546064; display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .65rem; padding: 7px 10px; text-transform: capitalize; white-space: nowrap; }
.status--active { background: #e0efe4; color: #237144; }
.status--redeemed { background: #ebe7e4; color: #8a5a4a; }
.empty { color: #7d8385; padding: 25px 0; }
.auth-card { margin: 40px auto; max-width: 500px; padding: 42px; }
.auth-card h1 { font-size: 3rem; }
.form-stack { display: grid; gap: 16px; margin-top: 24px; }
.form-stack label { color: #4e595d; display: grid; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; gap: 7px; }
.form-stack input, .form-stack textarea, .form-stack select { background: #faf9f5; border: 1px solid #d6d2c8; border-radius: 2px; color: #1f2a2e; font: inherit; padding: 12px; }
.form-stack input:focus, .form-stack textarea:focus { border-color: #b25536; outline: 2px solid #f0d3c8; }
.check { align-items: center; display: flex !important; gap: 8px !important; }
.check input { width: auto; }
.form-foot { border-top: 1px solid #ebe8df; margin-top: 28px; padding-top: 20px; }
.checkout-layout, .bo-columns { display: grid; gap: 40px; grid-template-columns: 1.3fr .7fr; }
.checkout-layout > section { padding-top: 22px; }
.checkout-summary { align-items: center; border-bottom: 1px solid #d6d2c8; border-top: 1px solid #d6d2c8; display: flex; justify-content: space-between; margin: 32px 0; padding: 22px 0; }
.checkout-summary strong { font-family: Georgia, serif; font-size: 1.5rem; }
.payment-card { align-self: start; background: #1f2a2e; color: #f4f2ec; }
.payment-card .muted { color: #c2c9c6; }
.bank-box { background: #314044; border-radius: 3px; display: grid; gap: 6px; margin: 25px 0; padding: 20px; }
.bank-box b { font-family: 'IBM Plex Mono', monospace; font-size: 1.4rem; }
.narrow-content { margin: 0 auto; max-width: 760px; }
.back-link { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; margin-bottom: 48px; }
.order-detail { align-items: center; border-bottom: 1px solid #d6d2c8; border-top: 1px solid #d6d2c8; display: flex; gap: 38px; margin: 30px 0; padding: 20px 0; }
.order-detail p { margin: 0; }
.notice { background: #eeeae0; border-left: 3px solid #b25536; margin: 20px 0; padding: 16px 18px; }
.notice--success { background: #e0efe4; border-color: #237144; }
.notice--error { background: #f7e2df; border-color: #a83f32; }
.shop-card { background: #fff; border: 1px solid #dedbd2; color: #1f2a2e; display: block; text-decoration: none; transition: transform .2s; }
.shop-card:hover { transform: translateY(-4px); }
.shop-card__visual { align-items: center; background: #d9c2a7; display: flex; height: 170px; justify-content: center; overflow: hidden; }
.shop-card__visual img { height: 100%; object-fit: cover; width: 100%; }
.shop-card__visual span { font-family: Georgia, serif; font-size: 5rem; opacity: .5; }
.shop-card__body { padding: 23px; }
.shop-card__body h2 { font-family: Georgia, serif; font-size: 1.8rem; font-weight: 500; margin: 6px 0; }
.shop-card__body p { color: #667176; margin: 0 0 22px; }
.shop-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 25px 0 45px; }
.shop-meta span { color: #667176; font-size: .86rem; }
.menu-list { display: grid; }
.menu-row h3 { font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }
.menu-row p { margin: 0; }
.metric-grid { margin-bottom: 28px; }
.metric { border-top: 3px solid #b25536; }
.metric span { color: #667176; display: block; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; text-transform: uppercase; }
.metric strong { display: block; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; margin-top: 12px; }
.bo-columns .panel { height: max-content; }
.redeem-panel { max-width: 600px; }
.redeem-result { background: #e0efe4; border: 1px solid #9fc4aa; margin-top: 25px; padding: 24px; }
.redeem-result h2 { font-family: 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.redeem-result p { color: #41654b; }
@media (max-width: 760px) {
  .portal-nav__links { gap: 10px; }
  .portal-nav__links a:nth-child(n+3) { display: none; }
  .portal-main { padding-top: 36px; }
  .portal-heading { align-items: start; display: block; }
  .portal-heading .button { margin-top: 20px; }
  .portal-grid, .shop-grid, .metric-grid, .checkout-layout, .bo-columns { grid-template-columns: 1fr; }
  .auth-card { padding: 28px; }
  .voucher-row, .order-row { align-items: start; flex-direction: column; }
  .status { align-self: flex-start; }
}