/* 4everpeople / 帛事平台 — shared design system.
   A separate visual identity from FookOn (legacy fook-on-flower-app is UX
   reference only, never copied wholesale — Phase 1D §8). Calm, legible,
   funeral-appropriate: muted slate/teal primary, warm restrained gold accent,
   no harsh color, no AI-cliché palette. */

:root {
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-ink: #1f2a2e;
  --color-ink-muted: #5a6b70;
  --color-border: #e2e0d8;
  --color-primary: #2c4a4e;
  --color-primary-dark: #1b3033;
  --color-on-primary: #ffffff;
  --color-accent: #a9834f;
  --color-accent-dark: #8a6a3d;
  --color-success-bg: #eef4ee;
  --color-success-ink: #33553a;
  --color-warn-bg: #faf3e6;
  --color-warn-ink: #7a5a1f;
  --color-danger-bg: #fbecec;
  --color-danger-ink: #7a2f2f;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(31, 42, 46, 0.06), 0 4px 16px rgba(31, 42, 46, 0.06);
  --font-display: "Noto Serif TC", "Songti TC", serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --max-width: 1120px;
  --fab-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #16201f;
    --color-surface: #1d2a29;
    --color-ink: #eef1ee;
    --color-ink-muted: #9fb0ac;
    --color-border: #33413f;
    --color-primary: #7fa39f;
    --color-primary-dark: #9fc0bb;
    --color-on-primary: #10211f;
    --color-accent: #cba86c;
    --color-accent-dark: #ddbf8b;
    --color-success-bg: #1e2f20;
    --color-success-ink: #a9d3ad;
    --color-warn-bg: #302a1a;
    --color-warn-ink: #e0c07f;
    --color-danger-bg: #331f1f;
    --color-danger-ink: #e2a3a3;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --color-bg: #16201f;
  --color-surface: #1d2a29;
  --color-ink: #eef1ee;
  --color-ink-muted: #9fb0ac;
  --color-border: #33413f;
  --color-primary: #7fa39f;
  --color-primary-dark: #9fc0bb;
  --color-on-primary: #10211f;
  --color-accent: #cba86c;
  --color-accent-dark: #ddbf8b;
  --color-success-bg: #1e2f20;
  --color-success-ink: #a9d3ad;
  --color-warn-bg: #302a1a;
  --color-warn-ink: #e0c07f;
  --color-danger-bg: #331f1f;
  --color-danger-ink: #e2a3a3;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--color-ink-muted); }
a { color: var(--color-primary); }
img { max-width: 100%; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.section { padding: 40px 0; }
.section + .section { border-top: 1px solid var(--color-border); }

/* ── Header / nav ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  max-width: var(--max-width); margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; font-family: var(--font-display); }

/* Layout Refresh — three-tier header: Header (brand · global search · account
   actions) → Navbar (primary navigation) → mobile panel. The search is a plain
   GET form to /services.html?search=, the same real parameter that page has
   always read; nothing here invents a new capability. */
.header-search { display: none; position: relative; flex: 1 1 auto; max-width: 520px; }
.header-search input {
  width: 100%; padding: 10px 76px 10px 16px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-ink);
  font: inherit; font-size: 0.92rem;
}
.header-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.header-search button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.header-search button:hover { background: var(--color-primary-dark); }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
@media (min-width: 768px) { .header-search { display: block; } }
.site-navbar { display: none; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.site-navbar__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 2px; }
.site-header .nav-cta { padding: 8px 18px; font-size: 0.9rem; }
.site-navbar a {
  padding: 10px 14px; color: var(--color-ink); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.site-navbar a:hover { color: var(--color-primary); }
.site-navbar a[aria-current="page"] { color: var(--color-primary-dark); border-bottom-color: var(--color-accent); font-weight: 700; }
.site-navbar__aside { margin-left: auto; }
.nav-mobile__search { display: flex; gap: 8px; padding: 8px 0 12px; }
.nav-mobile__search input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-ink); font: inherit; }
.nav-mobile__search button { padding: 0 16px; border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 768px) { .nav-mobile__search { display: none; } }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-ink); font-size: 1.2rem; cursor: pointer;
}
/* Scoped to .site-header so these outrank .btn's own `display` regardless of
   source order — .nav-cta also carries .btn (equal 1-class specificity), and
   without this extra scope .btn's `display: inline-flex` (declared later, in
   the Buttons section) would silently win the cascade and show the WhatsApp
   CTA button on mobile even though it's meant to be desktop-only. Caught
   visually verifying the Phase 1D frontend at the 375px breakpoint. */
.site-header .nav-cta { display: none; }
/* Desktop-only login entry point — at <1024px the hamburger's own
   .nav-mobile already carries a login link, so .nav-login would otherwise
   duplicate it; found missing entirely at desktop width during Point 01 of
   the marketplace development pass (the hamburger toggle itself is hidden
   there, so there was no way to reach /login.html from the header at all
   above 1024px). */
.nav-login { display: none; color: var(--color-ink); text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.nav-login:hover { color: var(--color-primary); }
/* 1024px, not 768px: 6 nav labels + brand + CTA button don't fit comfortably
   at exactly 768px (verified — they wrapped to 2 lines per label and clipped
   the CTA button off the right edge). The hamburger/mobile-nav pattern is
   kept through tablet width instead; .mobile-cta-bar's own breakpoint below
   is aligned to the same 1024px so there's never a width range with no
   reachable WhatsApp CTA at all. */
@media (min-width: 1024px) {
  .site-navbar { display: block; }
  .nav-login { display: inline-flex; }
  .site-header .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
.nav-mobile {
  display: none; flex-direction: column; gap: 2px; padding: 8px 20px 16px;
  border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a { padding: 10px 4px; color: var(--color-ink); text-decoration: none; border-radius: 6px; }
.nav-mobile a:hover { background: var(--color-bg); }
/* Forces the dropdown closed at desktop width regardless of its JS `is-open`
   state — otherwise a nav opened at mobile width and left open through a
   resize/rotation to desktop would show duplicated under .nav-desktop.
   Caught the same way as the .nav-cta cascade bug above. */
@media (min-width: 1024px) {
  .nav-mobile.is-open { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 999px; font-size: 0.95rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-accent { background: var(--color-accent); color: #241a0c; }
.btn-accent:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-ink); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-block { width: 100%; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}
.card__body { padding: 18px; }
/* Listing image thumbnail (Point 06 — service_listings.images existed in
   the schema but no card ever rendered it). Fixed aspect ratio so cards in
   the same row stay the same height whether or not a given listing has an
   image; object-fit avoids stretching/cropping distortion. */
.card__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--color-bg); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* Phase 2A §F: provider/service directory grids — explicit density cap
   (desktop max 3/row, tablet 2, mobile 1), a SEPARATE class from the fluid
   .card-grid above so venues.html/funeral-records.html keep their existing
   auto-fill behavior unchanged. */
.card-grid--capped { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .card-grid--capped { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .card-grid--capped { grid-template-columns: repeat(3, 1fr); } }

/* ── Status chips (availability wording — Rev 3 §4, NEVER stronger claims) */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.chip--query { background: var(--color-success-bg); color: var(--color-success-ink); }
.chip--seen { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.chip--busy { background: var(--color-danger-bg); color: var(--color-danger-ink); }
.chip--unknown { background: var(--color-border); color: var(--color-ink-muted); }

/* ── Forms ────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--color-ink); }
.field input, .field select, .field textarea {
  padding: 11px 12px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-ink); font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.mode-picker { margin: 0 0 16px; padding: 0; border: 0; }
.mode-picker legend { margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; }
.mode-picker label { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: pointer; }
.mode-picker label:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.mode-picker input { margin-top: 4px; accent-color: var(--color-primary); }
.mode-picker span { display: grid; gap: 2px; }
.mode-picker small { color: var(--color-ink-muted); line-height: 1.45; }
[hidden] { display: none !important; }

/* ── Async states ─────────────────────────────────────────────── */
.state { padding: 32px 16px; text-align: center; color: var(--color-ink-muted); }
.state--loading::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px;
  border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .state--loading::before { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.state--error { color: var(--color-danger-ink); }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { padding: 48px 0 36px; }
.hero__eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__disclaimer { font-size: 0.82rem; color: var(--color-ink-muted); margin-top: 14px; }

/* ── Footer ───────────────────────────────────────────────────── */
/* Layout Refresh: a dedicated dark surface (own tokens so light AND dark
   colour schemes both keep readable contrast — --color-primary-dark flips to
   a LIGHT teal in dark mode and can't be reused as a background here). */
/* --band-bg / --band-bg-2: the dark content bands (常用資料, 商戶選項, final
   CTA). They previously used --color-primary(-dark), which flips to a LIGHT
   teal in dark mode while their text stays white (contrast ~1.3). */
:root { --footer-bg: #1b3033; --footer-ink: #b9c7c4; --footer-heading: #f1f5f4; --footer-line: rgba(255, 255, 255, 0.14); --band-bg: #1b3033; --band-bg-2: #2c4a4e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --footer-bg: #0f1918; --footer-ink: #9fb0ac; --footer-heading: #eef1ee; --footer-line: rgba(255, 255, 255, 0.1); --band-bg: #1f3331; --band-bg-2: #28403e; } }
:root[data-theme="dark"] { --footer-bg: #0f1918; --footer-ink: #9fb0ac; --footer-heading: #eef1ee; --footer-line: rgba(255, 255, 255, 0.1); --band-bg: #1f3331; --band-bg-2: #28403e; }
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 40px 0 0; font-size: 0.88rem; margin-top: 0; }
.site-footer__grid { display: grid; gap: 24px; grid-template-columns: 1fr; padding-bottom: 28px; }
/* 4 columns since the "關於" trust-page column joined 品牌/平台/支援
   (Point 12) — 2x2 at tablet, 4x1 once there's room, so the last column
   never wraps alone into an unbalanced row. */
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer a { color: var(--footer-ink); text-decoration: none; }
.site-footer a:hover { color: var(--footer-heading); text-decoration: underline; }
.site-footer h3 { color: var(--footer-heading); font-family: var(--font-body); font-size: 0.95rem; margin: 0 0 12px; }
.site-footer p { color: var(--footer-ink); margin: 0 0 8px; }
.site-footer .brand { color: var(--footer-heading); }
.site-footer__bottom { border-top: 1px solid var(--footer-line); }
.site-footer__bottom .container { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-top: 16px; padding-bottom: 96px; font-size: 0.8rem; }
.site-footer__bottom p { margin: 0; }
/* extra room at desktop width so the floating WhatsApp button never sits on
   top of the last footer row when scrolled to the very bottom */
@media (min-width: 1024px) { .site-footer__bottom .container { padding-bottom: 88px; } }

/* ── Floating action (real function: WhatsApp enquiry) ─────────────
   <1024px: the full-width bottom bar below. ≥1024px: a compact floating
   button. Same two entry points the site always had (/enquiry.html), never a
   decorative or fake "compare" control. */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 8px; padding: 10px 14px; background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .mobile-cta-bar { display: none; } } /* matches the navbar's breakpoint — no width range with no reachable CTA */
.fab-whatsapp {
  position: fixed; right: 24px; bottom: var(--fab-bottom, 24px); z-index: 50; display: none;
  align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--color-accent);
  color: #241a0c; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 6px 24px rgba(31, 42, 46, 0.28);
}
.fab-whatsapp:hover { background: var(--color-accent-dark); }
@media (min-width: 1024px) { .fab-whatsapp { display: inline-flex; } }

/* ── Data table (venue halls, funeral records list) ──────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.data-table th { color: var(--color-ink-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }
.table-scroll { overflow-x: auto; }

.eyebrow-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 700; color: var(--color-accent-dark); }

/* ── Marketplace home ────────────────────────────────────────── */
.market-hero { padding: 72px 0 64px; background: radial-gradient(circle at 85% 15%, rgba(169, 131, 79, 0.16), transparent 30%), linear-gradient(145deg, var(--color-surface), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.market-hero__grid { display: grid; gap: 40px; align-items: center; }
.market-hero h1 { max-width: 10em; font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: 1.12; letter-spacing: -0.045em; }
.market-hero__lead { max-width: 42em; font-size: clamp(1rem, 1.8vw, 1.16rem); line-height: 1.85; }
.market-hero__panel { padding: 28px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.market-hero__panel h2 { margin-top: 8px; }
.market-hero__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 0.82rem; }
.feature-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.feature-list li { display: flex; align-items: center; gap: 12px; color: var(--color-ink); font-weight: 600; }
.feature-list span { color: var(--color-accent-dark); font-size: 0.76rem; letter-spacing: 0.08em; }
.section-heading-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 24px; }
.section-heading-row p { margin-bottom: 0; }
.text-link { font-weight: 700; text-decoration: none; }
.directory-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.directory-filters a { padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-ink); font-size: 0.86rem; text-decoration: none; }
.directory-filters a:hover, .directory-filters a[aria-current="page"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.category-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.category-card { position: relative; min-height: 235px; padding: 24px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; box-shadow: var(--shadow-card); transition: transform 160ms ease, border-color 160ms ease; }
.category-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.category-card__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg); color: var(--color-primary); font-family: var(--font-display); font-size: 1.25rem; }
.category-card__number { position: absolute; top: 22px; right: 22px; color: var(--color-border); font-size: 1.8rem; font-weight: 700; }
.category-card h3 { margin-top: 24px; font-size: 1.25rem; }
.category-card p { min-height: 3.2em; font-size: 0.92rem; }
.category-card__link { color: var(--color-primary); font-size: 0.88rem; font-weight: 700; }
.utility-section { background: var(--band-bg); }
.utility-section h2, .utility-section strong { color: #fff; }
.utility-section p { color: #c8d3d1; }
.utility-section .eyebrow-label { color: #d7b77f; }
.utility-grid { display: grid; gap: 28px; }
.utility-links { display: grid; gap: 10px; }
.utility-links a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; color: #fff; text-decoration: none; }
.utility-links a:hover { border-color: var(--color-accent); }
.utility-links span { color: #c8d3d1; font-size: 0.88rem; text-align: right; }
.merchant-options { display: grid; gap: 18px; }
.merchant-option { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.merchant-option--dark { background: var(--band-bg-2); color: #fff; }
.merchant-option--dark h3 { color: #fff; }
.merchant-option--dark p { color: #d6dfdd; }
.merchant-option__tag { display: inline-block; margin-bottom: 18px; color: var(--color-accent-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.merchant-option--dark .merchant-option__tag { color: #d9bd8d; }
.partner-grid { display: grid; gap: 28px; }
.partner-cards { display: grid; gap: 14px; }
.partner-card { padding: 24px; border-left: 3px solid var(--color-accent); background: var(--color-surface); box-shadow: var(--shadow-card); }
.partner-card > span { color: var(--color-accent-dark); font-size: 0.78rem; font-weight: 700; }
.partner-card h3 { margin-top: 8px; }
.partner-card p { margin-bottom: 0; }
.final-cta-section { padding-bottom: 64px; }
.final-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 48px); border-radius: 18px; background: var(--band-bg); }
.final-cta h2 { color: #fff; margin-top: 8px; }
.final-cta p { color: #c8d3d1; margin-bottom: 0; }
.final-cta .eyebrow-label { color: #d7b77f; }
.final-cta__outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.final-cta__outline:hover { border-color: #fff; color: #fff; }

@media (min-width: 700px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .merchant-options, .partner-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .market-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .utility-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
  .partner-grid { grid-template-columns: 0.7fr 1.3fr; align-items: center; }
}
@media (max-width: 560px) {
  .market-hero { padding: 48px 0 42px; }
  .market-hero__panel { padding: 22px; }
  .utility-links a { flex-direction: column; }
  .utility-links span { text-align: left; }
  .final-cta .hero__actions, .final-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .category-card { transition: none; } }

/* ════════════════════════════════════════════════════════════════════
   Layout Refresh — shared components
   Reference: the "網頁常見位置名稱對照圖" (Header → Navbar → Hero →
   Filter/Search → Category Tabs → Card/Grid → Floating Action → Footer;
   Header → Sidebar → Dashboard Cards → Table/List → Tabs → Action Bar →
   Modal). Structure only — 4everpeople keeps its own palette, type and
   wording. Every component below is rendered from real API data; nothing
   here is a mock.
   ════════════════════════════════════════════════════════════════════ */
.btn-primary { color: var(--color-on-primary); }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger-ink); border-color: var(--color-danger-ink); }
.btn-danger:hover { filter: brightness(0.96); }
.btn:focus-visible, .tab:focus-visible, .category-tabs a:focus-visible, .category-tabs button:focus-visible, .app-nav a:focus-visible, .app-nav button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Inner-page title band (list/detail pages) */
.page-head { padding: 28px 0 8px; }
.page-head h1 { margin-bottom: 6px; }
.page-head p { max-width: 62ch; margin-bottom: 0; }

/* Filter / search bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); }
.filter-bar__field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-bar__field label { font-size: 0.78rem; font-weight: 700; color: var(--color-ink-muted); }
.filter-bar input, .filter-bar select { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-ink); font: inherit; }
.filter-bar input:focus, .filter-bar select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.filter-bar .btn { flex: 0 0 auto; align-self: flex-end; }
@media (max-width: 559px) { .filter-bar .btn { flex: 1 1 100%; } }
.filter-bar--overlap { position: relative; z-index: 2; margin-top: -34px; }

/* Category tabs — horizontally scrollable on narrow screens (the strip
   scrolls inside itself; the page never gains a horizontal scrollbar) */
.category-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px; margin: 22px 0 18px; border-bottom: 1px solid var(--color-border); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.category-tabs a, .category-tabs button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.category-tabs a:hover, .category-tabs button:hover { border-color: var(--color-primary); }
.category-tabs a[aria-current="page"], .category-tabs button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.category-tabs__icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg); color: var(--color-primary); font-family: var(--font-display); font-size: 0.85rem; }
.category-tabs [aria-current="page"] .category-tabs__icon, .category-tabs [aria-selected="true"] .category-tabs__icon { background: rgba(255, 255, 255, 0.2); color: inherit; }

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.list-toolbar__count { margin: 0; font-size: 0.9rem; }
.list-toolbar label { font-size: 0.85rem; color: var(--color-ink-muted); margin-right: 6px; }
.list-toolbar select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 0.88rem; }

/* Card / grid — real listings & providers */
.listing-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
.listing-grid > .state { grid-column: 1 / -1; }
.listing-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: transform 160ms ease, border-color 160ms ease; }
.listing-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.listing-card__media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg), var(--color-border)); }
.listing-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.listing-card__ph { font-family: var(--font-display); font-size: 2.8rem; color: var(--color-primary); opacity: 0.5; }
.listing-card__badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: 0.75rem; font-weight: 700; }
.listing-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.listing-card__meta { margin: 0; font-size: 0.8rem; }
.listing-card h3 { margin: 0; font-size: 1.05rem; }
.listing-card__desc { margin: 0; font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.listing-card__price { font-weight: 700; color: var(--color-ink); }
.listing-card__cta { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.provider-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color 160ms ease; }
.provider-card:hover { border-color: var(--color-accent); }
.provider-card__avatar { flex: none; display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-size: 1.3rem; }
.provider-card__main { min-width: 0; }
.provider-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.provider-card__desc { margin: 0 0 8px; font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink-muted); font-size: 0.76rem; font-weight: 600; }
.tag--mode { background: var(--color-warn-bg); border-color: transparent; color: var(--color-warn-ink); }

/* Form pages (login, activate, apply, enquiry, quote): one consistent card */
.form-card { padding: clamp(18px, 4vw, 28px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); }
.form-card .field:last-of-type { margin-bottom: 20px; }

/* Detail pages: breadcrumb, provider hero, gallery + info */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.85rem; color: var(--color-ink-muted); }
.breadcrumb a { color: var(--color-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb span:last-child { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
.provider-hero { display: flex; flex-direction: column; gap: 16px; }
.provider-hero__avatar { width: 72px; height: 72px; font-size: 1.9rem; }
.provider-hero__main { min-width: 0; flex: 1; }
.provider-hero__main h1 { margin: 4px 0 10px; }
.provider-hero__desc { max-width: 62ch; margin: 12px 0; }
.tag-row__label { align-self: center; font-size: 0.85rem; color: var(--color-ink-muted); }
@media (min-width: 640px) { .provider-hero { flex-direction: row; align-items: flex-start; gap: 24px; } }
.listing-card__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
a.listing-card__media { text-decoration: none; }
.detail-layout { display: grid; gap: 24px; }
@media (min-width: 860px) { .detail-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.gallery__main { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: linear-gradient(135deg, var(--color-bg), var(--color-border)); }
.gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__main .listing-card__ph { font-size: 4.5rem; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gallery__thumbs img { width: 88px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--color-border); border-radius: 8px; }
.detail-info__desc { max-width: 60ch; }
.detail-info__price { margin: 14px 0 6px; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--color-ink); }

/* ── Back-office shell: Header → Sidebar → main ───────────────────── */
.app-body { background: var(--color-bg); }
.app-shell { --app-header-h: 56px; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.app-header { position: sticky; top: 0; z-index: 45; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: var(--app-header-h); padding: 8px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.app-header__menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: 1.2rem; cursor: pointer; }
.app-header__brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; }
.app-header__brand .brand { font-size: 1.1rem; }
.app-header__section { color: var(--color-ink-muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header__user { display: none; font-size: 0.85rem; color: var(--color-ink-muted); }
.app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 272px; max-width: 86vw; padding: 16px 12px; overflow-y: auto; background: var(--color-surface); border-right: 1px solid var(--color-border); transform: translateX(-100%); transition: transform 200ms ease; display: flex; flex-direction: column; gap: 2px; }
.app-sidebar.is-open { transform: none; }
.app-scrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(15, 25, 24, 0.45); }
.app-scrim.is-open { display: block; }
.app-nav__label { padding: 14px 12px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.app-nav a, .app-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--color-ink); font: inherit; font-size: 0.92rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.app-nav a:hover, .app-nav button:hover { background: var(--color-bg); }
.app-nav [aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.app-nav__icon { flex: none; width: 22px; text-align: center; font-family: var(--font-display); }
.app-nav__hint { margin-left: auto; font-size: 0.72rem; opacity: 0.8; }
.app-main { min-width: 0; padding: 20px 16px 56px; }
.app-main__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.app-main__head h1 { margin: 2px 0 0; }
@media (min-width: 640px) { .app-header__user { display: inline; } }
/* the section name is already the page's h1 — on a phone the header row is
   too tight for it (it was being ellipsis-clipped), so drop the duplicate */
@media (max-width: 479px) { .app-header__section { display: none; } }
@media (min-width: 768px) { .app-main { padding: 28px 32px 64px; } }
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: 252px minmax(0, 1fr); }
  .app-header__menu { display: none; }
  .app-sidebar { position: sticky; top: var(--app-header-h); z-index: 1; width: auto; max-width: none; height: calc(100vh - var(--app-header-h)); transform: none; grid-row: 2; }
  .app-scrim { display: none !important; }
}
body.app-lock { overflow: hidden; }

/* Dashboard cards (KPIs from real list endpoints) */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi-grid--auto { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
@media (min-width: 768px) { .kpi-grid:not(.kpi-grid--auto) { grid-template-columns: repeat(4, 1fr); } }
.kpi-card { padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.kpi-card__label { font-size: 0.8rem; font-weight: 600; color: var(--color-ink-muted); }
.kpi-card__value { margin-top: 6px; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--color-ink); }
.kpi-card__sub { margin-top: 4px; font-size: 0.78rem; color: var(--color-ink-muted); }
.kpi-card--alert .kpi-card__value { color: var(--color-warn-ink); }

/* Panels, table/list, tabs, action bar */
/* overflow: clip (not hidden): still rounds/clips the corners but does NOT
   create a scroll container, so the mobile action bar's position: sticky
   keeps sticking to the viewport instead of to the panel. */
.panel { margin-bottom: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; overflow: clip; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.panel__head h2, .panel__head h3 { margin: 0; font-size: 1.05rem; }
.panel__body { padding: 16px; }
.panel__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.panel__tools .field { margin: 0; flex-direction: row; align-items: center; }
.panel__tools select { padding: 8px 10px; }
.table-scroll, .table-wrap { overflow-x: auto; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.grid-table th, .grid-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.grid-table th { font-size: 0.78rem; font-weight: 700; color: var(--color-ink-muted); background: var(--color-bg); white-space: nowrap; }
.grid-table tbody tr:last-child td { border-bottom: 0; }
.grid-table tr[data-row] { cursor: pointer; }
.grid-table tr[data-row]:hover, .grid-table tr[aria-selected="true"] { background: var(--color-bg); }
.grid-table tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.grid-table--wide td, .grid-table--wide th { white-space: nowrap; }
/* controls inside table cells (e.g. the plan selector) — unstyled they render
   ~19px tall, too small to tap */
.grid-table select { min-height: 36px; padding: 6px 28px 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 0.88rem; }
.grid-table select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
@media (max-width: 767px) {
  .grid-table--stack thead { display: none; }
  .grid-table--stack, .grid-table--stack tbody, .grid-table--stack tr, .grid-table--stack td { display: block; width: 100%; }
  .grid-table--stack tr { padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
  .grid-table--stack td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border: 0; text-align: right; white-space: normal; }
  .grid-table--stack td::before { content: attr(data-label); flex: none; font-weight: 600; color: var(--color-ink-muted); text-align: left; }
  .grid-table--stack td[data-label=""]::before, .grid-table--stack td:not([data-label])::before { content: none; }
  .grid-table--stack td > .row-actions, .grid-table--stack td > select { margin-left: auto; }
  .grid-table--stack tr[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--color-accent); }
}
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--color-border); padding: 0 8px; }
.tab { flex: none; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-ink-muted); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--color-ink); }
.tab[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.tab-panel { padding: 16px; }
.tab-panel[hidden] { display: none; }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.action-bar__note { margin: 0 auto 0 0; font-size: 0.85rem; }
@media (max-width: 767px) { .action-bar { position: sticky; bottom: 0; z-index: 5; } .action-bar .btn { flex: 1 1 auto; } .action-bar__note { flex: 1 1 100%; margin: 0; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 0.92rem; }
.kv dt { color: var(--color-ink-muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--color-ink); min-width: 0; overflow-wrap: anywhere; }

/* Modal + toast (replace native confirm()/alert()) */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 25, 24, 0.55); }
.modal { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--color-surface); color: var(--color-ink); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.modal--wide { max-width: 640px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.modal__title { margin: 0; font-size: 1.15rem; }
.modal__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--color-ink-muted); font-size: 1.3rem; cursor: pointer; }
.modal__close:hover { background: var(--color-bg); }
.modal__body { padding: 14px 20px; }
.modal__body p:last-child { margin-bottom: 0; }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 6px 20px 18px; }
@media (max-width: 479px) { .modal__foot .btn { flex: 1 1 100%; } }
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 110; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast { padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-ink); font-size: 0.9rem; box-shadow: var(--shadow-card); }
.toast--ok { background: var(--color-success-bg); color: var(--color-success-ink); border-color: transparent; }
.toast--error { background: var(--color-danger-bg); color: var(--color-danger-ink); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .app-sidebar, .listing-card { transition: none; } }

/* ════════════════════════════════════════════════════════════════════
   Content Enrichment — information density on top of the Layout Refresh.
   Every block below is rendered from real /public data (or the platform's
   real, existing flows); a block with no data is simply not rendered.
   ════════════════════════════════════════════════════════════════════ */

/* Cards are <article>s with ONE stretched detail link, so their own action
   links (quote / merchant site / provider) stay real, separate links. */
.listing-card { position: relative; }
.listing-card:hover { transform: translateY(-2px); }
.listing-card__link { color: inherit; text-decoration: none; }
.listing-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.listing-card__link:focus-visible { outline: none; }
.listing-card:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.listing-card__meta a { position: relative; z-index: 1; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.listing-card__meta a:hover { text-decoration: underline; }
.listing-card__areas { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 0.8rem; }
.listing-card__areas span { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink-muted); font-weight: 600; }
.listing-card__price--tbc { color: var(--color-ink-muted); font-weight: 600; }
.listing-card__actions { position: relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.listing-card__actions:empty { display: none; }

.provider-card { position: relative; flex-direction: column; align-items: stretch; gap: 12px; }
.provider-card:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.provider-card__top { display: flex; align-items: center; gap: 14px; }
.provider-card__link { color: inherit; text-decoration: none; }
.provider-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.provider-card__link:focus-visible { outline: none; }
.provider-card__desc { margin: 0; }
.mini-facts { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; font-size: 0.85rem; }
.mini-facts > div { display: flex; gap: 10px; }
.mini-facts dt { flex: none; width: 4.6em; color: var(--color-ink-muted); font-weight: 600; }
.mini-facts dd { margin: 0; min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.provider-card__preview { list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--color-bg); display: grid; gap: 6px; font-size: 0.85rem; }
.provider-card__preview li { display: flex; justify-content: space-between; gap: 12px; }
.provider-card__preview a { position: relative; z-index: 1; color: var(--color-ink); text-decoration: none; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.provider-card__preview a:hover { text-decoration: underline; }
.provider-card__preview span { flex: none; color: var(--color-ink-muted); }
.provider-card__more { color: var(--color-ink-muted); }
.provider-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Platform figures strip — real counts from the public lists */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 18px 0 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-border); }
.stat-strip > div { padding: 14px 16px; background: var(--color-surface); }
.stat-strip dt { font-size: 0.78rem; font-weight: 600; color: var(--color-ink-muted); }
.stat-strip dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-ink); line-height: 1.2; }
@media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip[hidden] { display: none; }

/* Category entrance cards (name · what it covers · real counts · samples) */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.cat-card__head { display: flex; align-items: center; gap: 12px; }
.cat-card__icon { flex: none; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg); color: var(--color-primary); font-family: var(--font-display); font-size: 1.2rem; }
.cat-card h3 { margin: 0; font-size: 1.1rem; }
.cat-card__need { margin: 0; font-size: 0.78rem; color: var(--color-ink-muted); }
.cat-card__desc { margin: 0; font-size: 0.9rem; }
.cat-card__counts { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-card__samples { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; }
.cat-card__samples li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--color-border); padding-bottom: 4px; }
.cat-card__samples a { color: var(--color-ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.cat-card__samples a:hover { text-decoration: underline; }
.cat-card__samples span { flex: none; color: var(--color-ink-muted); }
.cat-card__empty { margin: 0; font-size: 0.85rem; color: var(--color-ink-muted); }
.cat-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }

/* Process steps (real customer / merchant flows) */
.flow-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
.flow-card { padding: clamp(18px, 3vw, 28px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); }
.flow-card h3 { margin-bottom: 14px; }
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: step; }
.steps li::before { content: counter(step); flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.85rem; font-weight: 700; }
.steps strong { display: block; color: var(--color-ink); }
.steps span { font-size: 0.88rem; color: var(--color-ink-muted); }

/* Platform principles (only what the system really does) */
.trust-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.trust-item h3 { margin: 0 0 6px; font-size: 1rem; }
.trust-item p { margin: 0; font-size: 0.88rem; }

/* Region entrances */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.chip-link small { color: var(--color-ink-muted); font-weight: 500; }
.chip-link:hover, .chip-link[aria-current="true"] { border-color: var(--color-primary); }
.chip-link[aria-current="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.chip-link[aria-current="true"] small { color: inherit; }
.chip-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Resources (dark band reuses .utility-section) */
.resource-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .resource-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.resource-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
.resource-card strong { font-size: 1rem; }
.resource-card span { font-size: 0.86rem; color: var(--color-ink-muted); }
.resource-card em { margin-top: 4px; font-style: normal; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); }
.resource-card:hover { border-color: var(--color-accent); }
.resource-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.utility-section .resource-card { background: transparent; border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.utility-section .resource-card span { color: #c8d3d1; }
.utility-section .resource-card em { color: #e3c791; }
.utility-section .resource-card:hover { border-color: var(--color-accent); }
.utility-section .resource-card:focus-visible { outline-color: #fff; }

/* FAQ teaser (native <details>) */
.faq-list { display: grid; gap: 10px; max-width: 820px; }
.faq-list details { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.faq-list summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--color-ink); list-style-position: inside; }
.faq-list summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 12px; }
.faq-list details p { margin: 0; padding: 0 18px 16px; font-size: 0.92rem; }

/* Category panel on the directory page */
.cat-panel { margin: 0 0 18px; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: grid; gap: 8px; }
.cat-panel h2 { margin: 0; font-size: 1.2rem; }
.cat-panel p { margin: 0; }
.cat-panel__providers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.cat-panel__providers > span { font-size: 0.82rem; font-weight: 600; color: var(--color-ink-muted); }

/* Profile / detail pages: main column + decision aside */
.profile-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .profile-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.profile-main { min-width: 0; display: grid; gap: 28px; }
.profile-aside { display: grid; gap: 16px; }
@media (min-width: 960px) { .profile-aside { position: sticky; top: 132px; } }
.info-block { display: grid; gap: 10px; }
.info-block > h2 { margin: 0; font-size: 1.25rem; }
.info-block > p { margin: 0; max-width: 68ch; }
.facts-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-border); }
@media (min-width: 720px) { .facts-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.facts-grid > div { padding: 12px 14px; background: var(--color-surface); min-width: 0; }
.facts-grid dt { font-size: 0.76rem; font-weight: 700; color: var(--color-ink-muted); }
.facts-grid dd { margin: 3px 0 0; font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.facts-grid dd small { display: block; font-weight: 400; color: var(--color-ink-muted); }
.aside-card { padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-card); display: grid; gap: 10px; }
.aside-card h2, .aside-card h3 { margin: 0; font-size: 1.05rem; }
.aside-card p { margin: 0; font-size: 0.88rem; }
.aside-card .btn { width: 100%; justify-content: center; text-align: center; }
.aside-price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--color-ink); line-height: 1.2; }
.aside-price--tbc { font-size: 1.2rem; color: var(--color-ink-muted); }
.callout { padding: 14px 16px; border-radius: 12px; background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: 0.88rem; }
.callout p { margin: 0; color: inherit; }
.photo-strip { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .photo-strip { grid-template-columns: repeat(4, 1fr); } }
.photo-strip a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.group-head h3 { margin: 0; }
.group-head small { color: var(--color-ink-muted); }
.mini-provider { display: flex; gap: 12px; align-items: center; }
.mini-provider .provider-card__avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.mini-provider strong { display: block; color: var(--color-ink); }
.mini-provider span { font-size: 0.82rem; color: var(--color-ink-muted); }
.helper-note { margin: 0; font-size: 0.82rem; color: var(--color-ink-muted); }

/* Author display rules (e.g. flex) would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }

/* Mobile rails: on a phone the homepage's card sections scroll sideways inside
   themselves (snap, one card ≈ 82% wide so the next one peeks) instead of
   stacking into a very long page. Desktop/tablet layouts are untouched. */
@media (max-width: 639px) {
  .rail { display: flex; gap: 14px; overflow-x: auto; margin: 0 -20px; padding: 4px 20px 14px; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .rail > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .rail > .state { flex: 1 0 100%; }
}

/* ── Information-first batch ───────────────────────────────────────── */
/* "Questions people start from": four question cards, one job each */
.q-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .q-grid { grid-template-columns: repeat(4, 1fr); } }
.q-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none; transition: border-color 160ms ease; }
.q-card:hover { border-color: var(--color-accent); }
.q-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.q-card__q { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--color-ink); }
.q-card__a { font-size: 0.88rem; color: var(--color-ink-muted); }
.q-card em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }

/* Guide pages: readable measure, real headings */
.guide { max-width: 760px; }
.guide h2 { margin-top: 28px; font-size: 1.2rem; }
.guide p, .guide li { color: var(--color-ink); }
.guide p { margin-bottom: 0.9em; }
.guide a { color: var(--color-primary); }
.guide-list { margin: 0 0 1em; padding-left: 1.2em; display: grid; gap: 6px; }
.guide-list li { color: var(--color-ink); }

/* Category intro on the directory page */
.cat-intro { margin: 0 0 16px; }

/* ── Official information cards (source named, summary ours) ── */
.info-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
.info-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.info-card__org { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent-dark); text-transform: uppercase; }
.info-card h3 { margin: 0; font-size: 1.02rem; }
.info-card p { margin: 0; font-size: 0.9rem; }
.info-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding-top: 6px; }

/* Mobile: a section shows its first four cards; the rest stay one swipe away
   inside the rail rather than making the homepage a 20-screen wall. */
@media (max-width: 639px) {
  .rail--cap4 > :nth-child(n+5) { display: none; }
}

/* Phone homepage: the region chips and the utility band repeat entrances that
   the guides band and the directory already provide, so they are hidden below
   640px rather than adding another full screen of links. Desktop is unchanged. */
@media (max-width: 639px) {
  #fp-regions-section, .utility-section { display: none; }
}

/* Phone: the information grid is a swipe rail like the other card sections.
   (.info-grid's own display:grid is declared later and would otherwise win.) */
@media (max-width: 639px) {
  .info-grid.rail { display: flex; }
}

/* Progressive disclosure: a secondary block with a clear, tappable summary row.
   Phones start collapsed (see the script in index.html); desktop starts open. */
.disclose { margin: 0 0 18px; }
.disclose > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
  font-family: var(--font-display); font-weight: 700; color: var(--color-ink);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after { content: "展開"; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.disclose[open] > summary::after { content: "收合"; }
.disclose > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (min-width: 640px) { .disclose > summary { display: none; } }