/* ===== Design tokens ===== */
:root {
  --color-surface: oklch(97% 0.005 90);
  --color-surface-raised: oklch(99.5% 0.002 90);
  --color-text: oklch(22% 0.01 270);
  --color-text-muted: oklch(45% 0.01 270);
  --accent: #0E5A8A; /* per-page override via body style */
  --color-border: oklch(88% 0.005 90);

  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-hero: clamp(2.2rem, 1.2rem + 4.5vw, 4.2rem);
  --text-stat: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --measure: 64ch;

  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-surface);
}

main { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }

/* ===== Header ===== */
.site-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.brand {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em;
  color: var(--color-text); text-decoration: none;
}
.header-category { font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.1em; }

/* ===== Hero ===== */
.hero { padding: var(--space-section) 0 3rem; }
.hero-eyebrow {
  font-size: 0.8rem; letter-spacing: 0.18em; color: var(--accent);
  border-left: 3px solid var(--accent); padding-left: 0.75rem; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: var(--text-hero); line-height: 1.25; letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.hero-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  color: var(--color-text); margin-bottom: 1.5rem;
}
.hero-pain { max-width: var(--measure); color: var(--color-text-muted); margin-bottom: 2.25rem; }
.hub-hero { text-align: left; padding-bottom: 1rem; }

/* ===== Stats strip ===== */
.stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px; background: var(--color-border);
  border-block: 1px solid var(--color-border);
  margin-block: 2.5rem;
}
.stat { background: var(--color-surface-raised); padding: 1.75rem 1.5rem; }
.stat-value {
  display: block; font-family: var(--font-serif);
  font-size: var(--text-stat); font-weight: 700; color: var(--accent);
  line-height: 1.2; margin-bottom: 0.4rem;
}
.stat-label { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; display: block; }

/* ===== Sections ===== */
section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
section h2::before { content: ""; width: 2rem; height: 2px; background: var(--accent); }
.features, .pricing, .register, .faq, .about { padding-block: calc(var(--space-section) / 2); }

.feature-list { list-style: none; padding: 0; max-width: var(--measure); }
.feature-list li {
  padding: 0.9rem 0 0.9rem 2rem; position: relative;
  border-bottom: 1px dashed var(--color-border);
}
.feature-list li::before {
  content: "▸"; position: absolute; left: 0.25rem; color: var(--accent); font-weight: 700;
}

/* ===== Pricing ===== */
.pricing { background: var(--color-surface-raised); border-block: 1px solid var(--color-border); }
.price-main {
  font-family: var(--font-serif); font-size: var(--text-stat);
  font-weight: 700; color: var(--accent);
}
.price-note { color: var(--color-text-muted); margin-top: 0.5rem; max-width: var(--measure); }
.price-launch {
  margin-top: 1.25rem; padding: 0.9rem 1.25rem;
  border: 1px solid var(--accent); display: inline-block; font-size: 0.92rem;
}

/* ===== Form ===== */
.register-form { max-width: 28rem; display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.register-form label { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }
.register-form input[type="email"], .register-form input[type="text"] {
  font: inherit; padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border); border-radius: 4px;
  background: var(--color-surface-raised);
}
.register-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.checkbox-label { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem !important; font-weight: 500 !important; }
.form-status { font-size: 0.9rem; min-height: 1.5em; }
.form-status.ok { color: #0E6E4B; }
.form-status.err { color: #8A2E0E; }

.cta-button {
  display: inline-block; font: inherit; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 0.9rem 2.2rem; border: none; border-radius: 4px;
  text-decoration: none; cursor: pointer; letter-spacing: 0.04em;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms;
}
.cta-button:hover { opacity: 0.88; transform: translateY(-2px); }
.cta-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--color-border); padding-block: 0.75rem; max-width: var(--measure); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { padding: 0.75rem 0 0.5rem; color: var(--color-text-muted); }

/* ===== Hub: product grid ===== */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem; padding-block: 3rem;
}
.product-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-top: 3px solid var(--accent);
  padding: 1.5rem; text-decoration: none; color: var(--color-text);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 150ms;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px oklch(0% 0 0 / 0.08); }
.card-category { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); }
.product-card h3 { font-family: var(--font-serif); font-size: 1.25rem; }
.product-card p { font-size: 0.9rem; color: var(--color-text-muted); flex: 1; }
.card-price { font-weight: 700; color: var(--accent); font-size: 0.95rem; }

/* ===== Footer ===== */
.site-footer {
  margin-top: var(--space-section);
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 1.5rem; font-size: 0.82rem; color: var(--color-text-muted);
}
.disclaimer { max-width: var(--measure); margin-bottom: 1.25rem; }
.footer-nav a { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .cta-button, .product-card { transition: none; }
}