/* MapNoteHK public site — cool ink + jade, map-grid atmosphere (not purple/cream tropes). */
:root {
  --ink: #071820;
  --ink-soft: #16303a;
  --jade: #1c8a78;
  --jade-deep: #14695b;
  --mist: #d7e4ea;
  --paper: #f3f7f9;
  --line: rgba(7, 24, 32, 0.12);
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --shadow: 0 18px 50px rgba(7, 24, 32, 0.12);
  --radius: 14px;
  --font-display: "Sora", "Noto Sans TC", sans-serif;
  --font-body: "Noto Sans TC", "Sora", sans-serif;
  --max: 1100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(28, 138, 120, 0.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(22, 48, 58, 0.12), transparent 50%),
    linear-gradient(180deg, #eef5f7 0%, var(--paper) 40%, #e8f0f3 100%);
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--jade-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

.container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: white;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Visually hidden but announced by screen readers (e.g. notify form label) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(243, 247, 249, 0.88);
  border-bottom: 1px solid var(--line);
  /* 16px clear space above the no-buffer logo; grow for iOS notch. */
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-bottom: 0.5rem;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  width: auto;
  height: 64px;
  display: block;
  object-fit: contain;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  margin-left: 1rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.site-nav a.is-active,
.site-nav a:hover {
  color: var(--jade-deep);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: white;
}

.lang-btn {
  border: 0;
  background: transparent;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
}

.lang-btn.is-active {
  background: var(--ink);
  color: white;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  font: inherit;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  font-family: var(--font-display);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--jade);
  color: white;
}

.btn-primary:hover {
  background: var(--jade-deep);
  color: white;
}

.btn-secondary {
  background: white;
  border-color: var(--line);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  color: white;
  width: 100%;
  border-radius: 12px;
}

.btn-danger:hover {
  filter: brightness(0.95);
  color: white;
}

/* Hero — launch announcement beside the app screenshot */
.hero {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(115deg, rgba(7, 24, 32, 0.92) 10%, rgba(20, 105, 91, 0.72) 55%, rgba(7, 24, 32, 0.55) 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(255, 255, 255, 0.04) 48px,
      rgba(255, 255, 255, 0.04) 49px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(255, 255, 255, 0.04) 48px,
      rgba(255, 255, 255, 0.04) 49px
    ),
    radial-gradient(circle at 70% 40%, #2aa891 0%, transparent 42%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 2.5rem;
  padding: 3.25rem 0 3.75rem;
}

.hero-copy {
  animation: rise 0.7s ease both;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
}

/* Pain hook — poster's question line between the launch badge and the H1.
   Mint accent matches the badge dot so it reads as one hero cluster. */
.hero-pain {
  margin: -0.35rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #5eead4;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* No ch-based width cap: ch counts Latin digits, so 16ch fits only ~8 CJK
     glyphs and orphaned the final 「。」. The grid column constrains width;
     text-wrap: balance keeps any wrap even in both languages. */
  text-wrap: balance;
  margin: 0 0 1rem;
  line-height: 1.15;
}

.hero-lead {
  max-width: 46ch;
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Hero proof stats — PRD headline numbers (30s capture, 5 types, 1,000+ FAQs) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  margin: 1.9rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: white;
}

.hero-shot {
  justify-self: center;
  animation: rise 0.7s ease 0.1s both;
}

/* Square demo video sits slightly wider than the old portrait screenshot */
.hero-video {
  display: block;
  width: min(360px, 72vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 32px 70px rgba(2, 12, 16, 0.5);
}

/* Store badges — dark pill, store glyph + two-line label */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.45rem 1.1rem;
  border-radius: 12px;
  background: #02090d;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  text-decoration: none;
  line-height: 1.15;
  transition: transform 0.15s ease, background 0.15s ease;
}

.store-btn:hover {
  transform: translateY(-1px);
  background: #0b1c24;
  color: white;
}

.store-btn svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.store-btn span {
  display: grid;
  text-align: left;
}

.store-btn small {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.75;
}

.store-btn strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}

/* Info cards — shared rhythm for the audience (為誰而設) and unified-timeline
   sections. --tc carries the per-card accent colour; .info-solution is the
   jade "how MapNoteHK fixes it" line (audience cards only). */
.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.info-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
  box-shadow: var(--shadow);
  animation: rise 0.6s ease both;
}

.info-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--tc) 12%, white);
  color: var(--tc);
}

.info-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.info-card h3 {
  font-family: var(--font-display);
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.info-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Resolution line: dashed divider + jade arrow.
   Needs the .info-card prefix to out-specify .info-card p above. */
.info-card .info-solution {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
  color: var(--jade-deep);
  font-weight: 600;
}

.info-card .info-solution::before {
  content: "→";
  margin-right: 0.35rem;
}

/* Feature showcase — tab switcher: compact list left, full-size screenshot
   right. Whole screens are shown (never cropped) and the section stays short. */
.showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.showcase-list {
  display: grid;
  gap: 0.5rem;
}

/* Each tab: tag + title always visible; body text only on the active tab */
.showcase-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 1rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.showcase-item:hover {
  background: rgba(255, 255, 255, 0.65);
}

.showcase-item:focus-visible {
  outline: 2px solid var(--jade-deep);
  outline-offset: 2px;
}

.showcase-item.is-active {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.showcase-item-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.showcase-item-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.showcase-item-body {
  display: none;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.showcase-item.is-active .showcase-item-body {
  display: block;
}

/* Screenshot stage: tinted backdrop, the active panel fades in full-size.
   min-height keeps the stage constant across tabs (400px visual + padding)
   so switching features never shifts the layout below. */
.showcase-stage {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  min-height: 448px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  background:
    radial-gradient(circle at 30% 20%, rgba(28, 138, 120, 0.14), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(232, 240, 243, 0.9));
}

.showcase-panel[hidden] {
  display: none;
}

.showcase-panel.is-active {
  animation: fadeIn 0.25s ease both;
}

.showcase-panel img {
  display: block;
  height: 400px;
  width: auto;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 22px 55px rgba(7, 24, 32, 0.22);
}

/* Brochure pair (feature 5): two A4 pages side by side. Each <picture> gets
   an equal flex column with a definite width, so the img inside can size to
   min(100% width, 400px height) without a circular percentage. Tighter
   radius + lift reads as paper. */
.showcase-duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.showcase-duo picture {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.showcase-duo img {
  height: auto;
  max-height: 400px;
  width: auto;
  max-width: 100%;
}

/* Paper variant (PDF pages): tighter radius + stronger lift reads as documents */
.showcase-duo-paper img {
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(7, 24, 32, 0.28);
}

/* Phone variant: premium floating device frame around app screenshots.
   Realistic hardware scale: bezel ≈ 3.5% of width (like iPhone 15 Pro),
   corner radius ≈ 15% of width (not a pill), and a subtle metallic edge.
   The device is slightly lifted and tilted in 3D so it reads as a product
   shot, not a flat black card. ::before is the Dynamic Island cutout. */
.showcase-duo picture.phone-frame {
  --phone-radius: 22px;
  --phone-bezel: 6px;
  position: relative;
  padding: var(--phone-bezel);
  border-radius: var(--phone-radius);
  background: linear-gradient(160deg, #4b5157 0%, #23272b 34%, #0f1215 68%, #2e3338 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(7, 24, 32, 0.18),
    0 12px 26px rgba(7, 24, 32, 0.26),
    0 28px 56px rgba(7, 24, 32, 0.14);
  transform: perspective(1400px) rotateX(1.6deg) translateY(-2px);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

/* Second device in the pair leans the opposite way for a showroom look */
.showcase-duo picture.phone-frame:nth-child(2) {
  transform: perspective(1400px) rotateX(1.6deg) rotateY(-2.2deg) translateY(-2px);
}

.showcase-duo picture.phone-frame:first-child {
  transform: perspective(1400px) rotateX(1.6deg) rotateY(2.2deg) translateY(-2px);
}

.showcase-duo picture.phone-frame:hover {
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(7, 24, 32, 0.16),
    0 18px 40px rgba(7, 24, 32, 0.3),
    0 40px 80px rgba(7, 24, 32, 0.18);
}

.showcase-duo picture.phone-frame::before {
  /* Dynamic Island: width ≈ 21% of screen, height ≈ 2.9% of screen, sits
     just below the bezel (≈ 1.4% into the screen). */
  content: "";
  position: absolute;
  top: calc(var(--phone-bezel) + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 21%;
  height: 2.9%;
  min-height: 9px;
  border-radius: 999px;
  background: #020407;
  box-shadow: inset 0 0 2px 1px rgba(40, 52, 68, 0.9);
  z-index: 2;
}

.showcase-duo picture.phone-frame img {
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  border: 0;
  box-shadow: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.tag-free {
  background: rgba(28, 138, 120, 0.12);
  color: var(--jade-deep);
}

.tag-mix {
  background: rgba(3, 105, 161, 0.12);
  color: #0369a1;
}

.tag-premium {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}

/* Homepage bands use tighter padding than the shared .section default */
.audience,
.unified,
#features,
.plans {
  padding: 2.5rem 0;
}

/* Plans band */
.plans-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.plan-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow);
}

.plan-card h3 {
  font-family: var(--font-display);
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}

/* Plan price line — jade accent, display font for scannability */
.plan-price {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jade-deep);
}

.plan-card p {
  margin: 0;
  color: var(--ink-soft);
}

.plan-card.is-premium {
  border-color: rgba(28, 138, 120, 0.5);
  background: linear-gradient(160deg, rgba(28, 138, 120, 0.1), rgba(255, 255, 255, 0.9) 55%);
}

.plans-actions {
  margin-top: 1.5rem;
}

/* Download band — dark closing section */
.download {
  margin-top: 1.5rem;
  background: var(--ink);
  color: white;
  padding: 3.5rem 0;
}

.download-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.download-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.download-inner p {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.download .store-btn {
  border-color: rgba(255, 255, 255, 0.35);
}

/* Launch notify band — pre-launch sibling of .download (never shown together:
   site.js hides this once store badges go live). Jade→ink gradient marks it
   as the action band; form status colours are re-toned for the dark surface. */
.notify {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, var(--jade-deep), var(--ink) 70%);
  color: white;
  padding: 3.5rem 0;
}

.notify-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.notify-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.notify-inner > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Single-field capture: email + submit in one row, stacking on small screens */
.notify-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 480px;
  margin-top: 0.5rem;
}

.notify-form input {
  flex: 1 1 240px;
}

.notify-form .btn {
  flex: none;
}

.notify .form-status {
  margin: 0;
}

.notify .form-status.is-ok {
  color: #5eead4;
}

.notify .form-status.is-err {
  color: #fca5a5;
}

@media (max-width: 480px) {
  .notify-form .btn {
    width: 100%;
  }
}

.section {
  padding: 3.5rem 0;
}

.section-head {
  margin-bottom: 1.75rem;
}

.section-head h1,
.section-head h2 {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.section-head p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}

.quick-grid,
.card-grid,
.team-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.panel {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow);
  animation: rise 0.6s ease both;
}

.panel h3 {
  font-family: var(--font-display);
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.panel a.block-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.panel a.block-link:hover h3 {
  color: var(--jade-deep);
}

/* About page — mission band: same jade tint as the premium plan card */
.panel-mission {
  border-color: rgba(28, 138, 120, 0.5);
  background: linear-gradient(160deg, rgba(28, 138, 120, 0.1), rgba(255, 255, 255, 0.9) 55%);
}

.panel-mission .mission-statement {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* About page — "How we build" numbered steps (an <ol> reusing .card-grid) */
.steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: 0.6rem;
  background: rgba(28, 138, 120, 0.12);
  color: var(--jade-deep);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Payoff line on services cards: soft jade chip so the advantage stands out
   from the descriptive body text above it. Negative side margins offset the
   chip padding so the text stays flush with the card's left text edge.
   The .panel prefix is needed to out-specify `.panel p { margin: 0 }`. */
.panel .benefit {
  margin: 0.75rem -0.75rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(28, 138, 120, 0.08);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--jade-deep);
}

.pricing-banner {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Plan comparison table on the services page — scrolls sideways on narrow screens */
.compare {
  margin-top: 1.5rem;
}

.compare h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: 0.9rem;
  border-bottom: 2px solid var(--jade);
}

.compare-table tbody th[scope="row"] {
  font-weight: 500;
}

.compare-group th {
  padding-top: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--jade-deep);
  border-bottom: none;
}

/* Premium column gets a quiet jade tint so the upgrade path reads at a glance */
.compare-table th:last-child,
.compare-table td:last-child {
  background: rgba(28, 138, 120, 0.06);
}

.placeholder-box {
  border: 1px dashed rgba(28, 138, 120, 0.45);
  background: rgba(28, 138, 120, 0.06);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-weight: 600;
}

.contact-layout {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.1fr 1fr;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.contact-list li {
  margin-bottom: 0.85rem;
}

.contact-list span {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
}

/*
 * Partnership card (contact page left column).
 * Approach: sample-style centered block — icon, title, email, pill CTA —
 * using MapNoteHK jade tokens (not a second brand palette).
 */
.coop-card {
  margin-top: 0.35rem;
  padding: 1.5rem 1.25rem 1.35rem;
  text-align: center;
  border: 1px solid rgba(28, 138, 120, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(7, 24, 32, 0.07);
}

.coop-icon {
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
  color: var(--jade-deep);
}

.coop-card h3 {
  margin: 0 0 0.45rem;
  color: var(--jade-deep);
  font-size: 1.15rem;
}

.coop-email {
  display: block;
  margin: 0 0 1.1rem;
  color: var(--jade-deep);
  font-weight: 500;
  text-decoration: none;
}

.coop-email:hover {
  color: var(--ink);
  text-decoration: underline;
}

.coop-cta {
  width: auto;
  min-width: min(100%, 220px);
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  transition: background 180ms ease, transform 180ms ease;
}

.coop-cta:hover {
  transform: translateY(-1px);
}

.coop-cta:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .coop-cta,
  .coop-cta:hover,
  .coop-cta:active {
    transition: none;
    transform: none;
  }
}

.form-stack {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
}

label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.92rem;
  min-width: 0;
}

/* Constrain controls so long placeholders (zh-Hant) cannot expand past the card. */
input,
select,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font: inherit;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.form-stack .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-status {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}

.form-status.is-ok {
  color: var(--jade-deep);
}

.form-status.is-err {
  color: var(--danger);
}

/* Account deletion */
.delete-page {
  padding: 2.5rem 0 4rem;
}

.delete-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: white;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.25rem 1.5rem;
  animation: rise 0.55s ease both;
  min-width: 0;
}

@media (min-width: 480px) {
  .delete-card {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

.delete-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: var(--danger-soft);
  color: var(--danger);
}

.delete-card h1 {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 0.6rem;
}

.delete-card .lead {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

.delete-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.privacy-prose h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
}

.privacy-prose p {
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

/* Full legal documents (terms / privacy) rendered by js/legal.js */
.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  margin: 0 0 0.5rem;
}

.legal-updated {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--jade-deep);
  background: rgba(28, 138, 120, 0.12);
  border: 1px solid rgba(28, 138, 120, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  margin: 0 0 0.75rem;
}

.legal-intro {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.legal-toc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}

.legal-toc-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jade-deep);
  margin: 0 0 0.5rem;
}

/* Link text already carries the section number ("1. 簡介"), so suppress the
   <ol>'s native markers to avoid "1. 1. …" duplicates. */
.legal-toc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.legal-toc-list li {
  break-inside: avoid;
  margin: 0.15rem 0;
  font-size: 0.92rem;
}

/* TOC links read as a navigation list, not prose — no underline until hover. */
.legal-toc-list a {
  text-decoration: none;
}

.legal-toc-list a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .legal-toc-list {
    columns: 1;
  }
}

/* Anchor offset so the sticky header never covers section headings. */
.legal-section {
  scroll-margin-top: 96px;
}

.privacy-prose ul {
  margin: 0 0 0.75rem;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}

.privacy-prose li {
  margin: 0.3rem 0;
}

.legal-contact {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.legal-contact h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.legal-contact p {
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.site-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  padding: 2.5rem 0;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
  color: white;
}

.footer-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.footer-grid {
  display: grid;
  gap: 1.25rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.footer-links a:hover {
  color: white;
}

.footer-copy {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 0 3rem;
    text-align: center;
  }

  .hero h1,
  .hero-lead {
    margin-inline: auto;
  }

  .hero-actions,
  .hero .store-badges,
  .hero-stats {
    justify-content: center;
  }

  .hero-stats {
    gap: 0.9rem 1.4rem;
  }

  .hero-video {
    width: min(280px, 66vw);
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    background: rgba(243, 247, 249, 0.98);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
  }

  .site-nav.is-open {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* Showcase stacks: tabs become a horizontal snap strip above the stage */
  .showcase {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .showcase-list {
    grid-auto-flow: column;
    grid-auto-columns: min(230px, 68vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .showcase-list::-webkit-scrollbar {
    display: none;
  }

  .showcase-item {
    scroll-snap-align: start;
  }

  .showcase-stage {
    padding: 1rem;
    min-height: 352px;
  }

  .showcase-panel img {
    height: 320px;
  }

  .showcase-duo img {
    height: auto;
    max-height: 320px;
  }

  .cards-grid {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .cards-grid::-webkit-scrollbar {
    display: none;
  }

  .info-card {
    scroll-snap-align: start;
  }

  .header-row {
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* Respect reduced-motion: disable entrance animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-copy,
  .hero-shot,
  .info-card,
  .panel {
    animation: none;
  }

  .btn,
  .store-btn {
    transition: none;
  }
}