/* =========================================================================
   FingerDrumPad — Official Website
   Base stylesheet (Phases 1–2: skeleton, design tokens, shared chrome,
   and page-level content structures)
   Design language: Light & Colorful (iOS-inspired)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color — base surfaces (Apple-style light theme) */
  --color-bg:             #ffffff;
  --color-bg-subtle:      #f5f5f7;
  --color-bg-elevated:    #ffffff;
  --color-surface:        #ffffff;
  --color-surface-muted:  #f5f5f7;

  /* Color — text */
  --color-text:           #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary:  #86868b;
  --color-text-on-accent: #ffffff;

  /* Color — accents (iOS-inspired multicolor palette) */
  --color-accent:         #0a84ff; /* iOS system blue */
  --color-accent-hover:   #0071e3; /* Apple.com link blue */
  --color-accent-soft:    rgba(10, 132, 255, 0.12);

  --color-pad-teal:    #30b0c7;
  --color-pad-orange:  #ff9f0a;
  --color-pad-pink:    #ff375f;
  --color-pad-green:   #30d158;
  --color-pad-purple:  #bf5af2;
  --color-pad-yellow:  #ffd60a;

  /* Color — borders & dividers */
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.14);

  /* Color — shadows (soft, iOS-style) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
              "Noto Sans KR", "Noto Sans SC", "PingFang SC", "PingFang TC",
              "Microsoft YaHei", sans-serif;

  /* Rhythm — 8pt grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* Layout */
  --container-max: 1120px;
  --container-narrow: 720px;
  --header-height: 60px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Slightly looser line-height for scripts with taller glyphs / diacritics. */
}
html[lang^="ja"] body,
html[lang^="ko"] body,
html[lang^="zh"] body {
  font-family: var(--font-cjk), var(--font-sans);
  letter-spacing: 0.01em;
}

img, svg, video { max-width: 100%; display: block; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-accent-hover); }

ul, ol { padding-left: 1.25em; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-center    { text-align: center; }

/* -------------------------------------------------------------------------
   4. Layout containers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }

main { display: block; }

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--muted { background-color: var(--color-bg-subtle); }

.section__header {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section__header.text-center { margin-inline: auto; }
.section__header h2 { margin-bottom: var(--space-3); }

/* -------------------------------------------------------------------------
   5. Header & navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-4);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.site-header__brand:hover { color: var(--color-text); }
.site-header__logo {
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav a {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

/* Mobile toggle (hidden on desktop) */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.site-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Language switcher (header) */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-1);
}
.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 var(--space-3);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.lang-switch__button:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}
.lang-switch__button[aria-expanded="true"] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}
.lang-switch__caret {
  font-size: 0.7rem;
  opacity: 0.7;
}
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.lang-switch__menu a:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-accent);
}
.lang-switch__menu a[aria-current="true"] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  cursor: default;
}

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-5);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__logo { border-radius: 9px; box-shadow: var(--shadow-sm); }
.site-footer__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}
.site-footer__tagline {
  margin: 2px 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.site-footer__nav a {
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}
.site-footer__nav a:hover { color: var(--color-text); }
.site-footer__copyright {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  min-height: 44px;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-accent);
}
.btn--ghost:hover { background-color: var(--color-accent-soft); color: var(--color-accent); }

.btn--lg { padding: 14px 28px; font-size: 1.05rem; }

/* App Store badge container (for Phase 5 — placeholder for now) */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: #000;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.btn-store:hover { transform: translateY(-1px); opacity: 0.92; color: #fff; }
.btn-store__small { font-size: 0.72rem; opacity: 0.85; display: block; line-height: 1; }
.btn-store__large { font-size: 1.1rem; line-height: 1.1; }

.btn-store__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.btn-store__note {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   8. Cards & grids
   ------------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card h3 { margin-bottom: var(--space-2); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Feature-pill icon (small colored badge to suggest pad colors) */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  margin-bottom: var(--space-3);
}
.feature-icon--teal   { background-color: rgba(48, 176, 199, 0.15);  color: var(--color-pad-teal); }
.feature-icon--orange { background-color: rgba(255, 159, 10, 0.15);  color: var(--color-pad-orange); }
.feature-icon--pink   { background-color: rgba(255, 55, 95, 0.15);   color: var(--color-pad-pink); }
.feature-icon--green  { background-color: rgba(48, 209, 88, 0.15);   color: var(--color-pad-green); }
.feature-icon--purple { background-color: rgba(191, 90, 242, 0.15);  color: var(--color-pad-purple); }
.feature-icon--yellow { background-color: rgba(255, 214, 10, 0.18);  color: #b79400; }
.feature-icon--blue   { background-color: var(--color-accent-soft);  color: var(--color-accent); }

/* Chip (genre tag, etc.) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background-color: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}
.chip--accent {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: transparent;
  font-weight: 600;
  align-self: flex-start;
}

/* -------------------------------------------------------------------------
   9. Hero section (base layout, Phase 2 fills content)
   ------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-9) var(--space-8);
  background: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.hero__app-icon {
  width: clamp(96px, 18vw, 128px);
  height: clamp(96px, 18vw, 128px);
  border-radius: var(--radius-xl); /* 20px — rounded rectangle */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: var(--space-2);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

/* Device frame placeholder for screenshots (Phase 5 will populate) */
.device-frame {
  margin: var(--space-7) auto 0;
  max-width: 320px;
  aspect-ratio: 9 / 19;
  background-color: var(--color-surface-muted);
  border: 8px solid #1d1d1f;
  border-radius: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.device-frame::before {
  content: "Screenshot placeholder";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  padding: var(--space-4);
  text-align: center;
}

/* Demo video — replaces .device-frame placeholders (Phase 5) */
.demo-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background-color: #000;
  display: block;
}
.hero .demo-video {
  max-width: 480px;
  margin: var(--space-7) auto 0;
}
.pillar__media .demo-video {
  max-width: 440px;
}

/* Generic placeholder box for media not yet produced */
.placeholder-box {
  background-color: var(--color-surface-muted);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  font-size: 0.9rem;
  text-align: center;
  min-height: 200px;
}

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  font-size: 0.95rem;
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.comparison-table thead th {
  background-color: var(--color-surface-muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table td.col-feature { font-weight: 600; color: var(--color-text); width: 28%; }
.comparison-table .yes { color: var(--color-pad-green); font-weight: 600; }

/* Steps (Getting Started) */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.step__number {
  counter-increment: step;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__number::before { content: counter(step); }
.step__body h3 { margin-bottom: var(--space-1); font-size: 1.1rem; }

/* FAQ (Support) */
.faq { display: grid; gap: var(--space-3); }
.faq__item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.faq__item h3 { margin-bottom: var(--space-2); font-size: 1.05rem; }

/* -------------------------------------------------------------------------
   10. Page-level content structures (Phase 2: section wiring)
   ------------------------------------------------------------------------- */

/* Generic inline placeholder text — keeps Phase 3 to-do cells scannable */
.placeholder-text {
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Chip cloud — wraps .chips into a centered flex row (genre list, etc.) */
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Pillar block — two-column media + sub-feature list (features.html) */
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: center;
}
.pillar--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.pillar--reverse .pillar__media { order: 2; }

.pillar__media {
  display: flex;
  justify-content: center;
}
.pillar__media .device-frame {
  margin: 0;
  max-width: 280px;
  width: 100%;
}

/* Sub-feature list (used inside .pillar__content) */
.subfeature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
}
.subfeature {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.subfeature__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.subfeature h3 {
  margin-bottom: var(--space-1);
  font-size: 1.1rem;
}

/* Plus-feature tile — small icon card in the supporting-feature grid */
.plus-feature {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.plus-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.plus-feature__icon {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}
.plus-feature h3 {
  font-size: 1rem;
  margin-bottom: var(--space-1);
}
.plus-feature p {
  font-size: 0.9rem;
  margin: 0;
}

/* Audience card — adds a large emoji badge above a standard .card */
.audience-card {
  display: flex;
  flex-direction: column;
}
.audience-card__icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: var(--space-3);
}

/* Environment card — recommended-device card gets a subtle accent ring */
.env-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.env-card .chip--accent { margin-bottom: var(--space-3); }
.env-card--recommended {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-soft), var(--shadow-sm);
}

/* Prose — long-form typographic container (privacy.html) */
.prose section { margin-bottom: var(--space-6); }
.prose section:last-child { margin-bottom: 0; }
.prose h2 {
  font-size: 1.35rem;
  margin-bottom: var(--space-3);
}
.prose p,
.prose ul { margin-bottom: var(--space-3); }
.prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: 1.15rem; }
.prose h4 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: 1rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background-color: var(--color-bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}
.prose ol { margin-bottom: var(--space-3); padding-left: 1.4em; }
.prose ol li { margin-bottom: var(--space-2); }

/* -------------------------------------------------------------------------
    10b. Manual page layout (manual.html)
    ------------------------------------------------------------------------- */
.manual-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.manual-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-6));
  overflow-y: auto;
  padding-right: var(--space-2);
}
.manual-toc__title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.manual-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.manual-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.manual-toc a:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}
.manual-toc a.active {
  color: var(--color-accent);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.manual-content {
  /* Slightly wider than .container--narrow for comfortable reading of tables */
  max-width: 760px;
  min-width: 0; /* prevents grid blowout from long content */
}
.manual-content h2 {
  padding-top: var(--space-3);
  margin-top: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

/* Control reference table — icons + names + descriptions */
.control-ref {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0 var(--space-4);
  font-size: 0.95rem;
}
.control-ref th,
.control-ref td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}
.control-ref thead th {
  background-color: var(--color-surface-muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.control-ref tbody tr:last-child td { border-bottom: 0; }
.control-ref .col-icon {
  width: 44px;
  text-align: center;
  font-size: 1.15rem;
  color: var(--color-accent);
  font-weight: 600;
}

/* Callout — for warnings and info notes inside the manual */
.callout {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  background-color: var(--color-surface);
}
.callout p:last-child { margin-bottom: 0; }
.callout--info {
  border-left-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}
.callout--warning {
  border-left-color: var(--color-pad-orange);
  background-color: rgba(255, 159, 10, 0.08);
}

/* Screenshot placeholder — to be replaced with real images in a later phase */
.screenshot-placeholder {
  position: relative;
  margin: var(--space-4) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border-strong);
  background-color: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.screenshot-placeholder::before {
  content: attr(data-label);
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  padding: var(--space-3);
  text-align: center;
}
.screenshot-placeholder::after {
  content: "📷 Screenshot — coming soon";
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  opacity: 0.7;
}
.screenshot {
  width: 100%;
  height: auto;
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

/* Screenshot toggle — iOS-style segmented control that swaps between
   alternative captures of the same screen (e.g. metronome vs BGM bar).
   Markup contract (driven by main.js setupScreenshotToggles):
     <div class="screenshot-toggle" data-screenshot-toggle>
       <div class="segmented" role="group" aria-label="...">
         <button class="segmented-btn is-active" aria-pressed="true"
                 data-target="metronome">…</button>
         <button class="segmented-btn" aria-pressed="false"
                 data-target="bgm">…</button>
       </div>
       <div class="screenshot-toggle-pane is-active" data-pane="metronome">
         <img class="screenshot" …>
       </div>
       <div class="screenshot-toggle-pane" data-pane="bgm" hidden>
         <img class="screenshot" …>
       </div>
     </div> */
.screenshot-toggle {
  margin: var(--space-4) 0;
}
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.segmented-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.segmented-btn.is-active {
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.segmented-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.screenshot-toggle-pane { display: none; }
.screenshot-toggle-pane.is-active { display: block; }
.screenshot-toggle-pane .screenshot { margin: 0; }

/* Pane variant for portrait (or otherwise height-constrained) images that
   should match a sibling pane's height instead of stretching to full
   container width. The pane becomes an aspect-ratio box sized via the
   --pane-aspect custom property (set inline to match the sibling's image
   aspect, e.g. an iPad landscape capture), and the image fills the height,
   centered horizontally. Used for the iPhone alternative to an iPad view. */
.screenshot-toggle-pane--contain.is-active {
  display: flex;
  justify-content: center;
  aspect-ratio: var(--pane-aspect, auto);
}
.screenshot-toggle-pane--contain .screenshot {
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   11. Utilities
   ------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Loading state — shown until header/footer are injected */
.partial-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* Pillar collapses to a single column on tablet and below */
  .pillar,
  .pillar--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pillar--reverse .pillar__media { order: 0; }
  .pillar__media .device-frame { max-width: 240px; }

  /* Manual: collapse to single column, TOC becomes a top jump-menu */
  .manual-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .manual-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4);
  }
  .manual-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }
  .manual-toc a {
    border-left: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    font-size: 0.85rem;
    padding: 4px 12px;
  }
  .manual-toc a.active {
    border-left: 0;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
  }
  .manual-content { max-width: none; }
}

@media (max-width: 720px) {
  /* Mobile navigation: switch to toggle */
  .site-nav__toggle { display: flex; }

  /* Keep the brand from eating all the row on narrow screens; the
     language switcher and hamburger need room too. */
  .site-header__name { display: none; }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5) var(--space-5);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }
  .site-nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 1rem;
  }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }

  .section { padding-block: var(--space-8); }
  .hero { padding-block: var(--space-8) var(--space-7); }

  /* Tighter sub-feature spacing on mobile */
  .subfeature { gap: var(--space-3); }
  .subfeature__icon { width: 40px; height: 40px; }
}

/* -------------------------------------------------------------------------
   13. Motion preferences
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

/* =========================================================================
   Contact form (support pages)
   ========================================================================= */
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1.25rem);
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.contact-form .form-row label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}

.contact-form .req {
  color: var(--color-pad-pink, #ff375f);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form .form-actions {
  text-align: center;
}

/* Cloudflare Turnstile widget. min-height reserves the default widget size so
   the submit button doesn't jump when the script finishes loading. */
.contact-form .cf-turnstile {
  min-height: 65px;
}

/* Honeypot: visually hidden but present in the DOM for bots. Never use
   display:none — bots learn to skip those. The off-screen + clip pattern
   keeps it discoverable to naive crawlers while staying invisible to users. */
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result banner shown after a submission (main.js populates content). */
.contact-status {
  max-width: 560px;
  margin: 0 auto var(--space-4, 1.25rem);
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.97rem;
  line-height: 1.5;
  text-align: center;
  outline: none;
}

.contact-status.is-ok {
  background: rgba(48, 209, 88, 0.12);
  border: 1px solid rgba(48, 209, 88, 0.4);
  color: #1d6b34;
}

.contact-status.is-err {
  background: rgba(255, 55, 95, 0.12);
  border: 1px solid rgba(255, 55, 95, 0.4);
  color: #a01a36;
}