/* jpcite landing — monochrome + deep-blue accent.
   System fonts, no CDN, mobile-first.
   Color contrast: text #111 on #fff = 19.3:1. Accent #1e3a8a on #fff = 9.4:1. */

:root {
  color-scheme: light dark;
  /* Surface tokens are aliased to the canonical _design/tokens.css --color-*
     scale so body + chrome (header/footer) share ONE palette. This removes
     the dark-mode seam where body (#0d1117) and header (#0a0a0a) used to
     diverge. The dark override now lives in ONE place: tokens.css's
     @media(prefers-color-scheme:dark) block — it flows through these
     aliases automatically, so styles.css no longer re-declares dark surface
     values. Literal fallbacks keep pages that load styles.css WITHOUT
     tokens.css (site/_templates/* pre-chrome-injection, _archive/*) rendering
     in their original light palette. */
  --bg: var(--color-bg, #ffffff);
  --bg-alt: var(--color-bg-subtle, #f7f7f8);
  --bg-subtle: var(--color-bg-subtle, #fafafa);
  --text: var(--color-fg, #111111);
  --text-muted: var(--color-fg-muted, #404040);
  --border: var(--color-border, #e5e5e5);
  /* Accent is the body link/CTA color — intentionally distinct from the
     header's brand-fixed Stripe purple (--color-accent). Kept literal so
     the indigo identity and its dark-tuned variant survive unification. */
  --accent: #1e3a8a;
  --accent-hover: #172b6b;
  /* Code surface + semantic state colors have no tokens.css equivalent;
     keep literal. Their dark variants stay in styles.css's dark block. */
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --danger: #b91c1c;
  --focus: #1e3a8a;
  --max-w: 960px;

  /* ── 2026-07-21 Design tokens 段階1: spacing / typography / radius /
     shadow / semantic colors。 各 page の inline style 混在 を semantic
     class に統一するための 基盤。 dark mode override は 下 @media ブロック
     に semantic 色 の dark 版 を 追加。 */
  /* Spacing scale (8px baseline grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;

  /* Typography scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadow scale (subtle for business/serious tone) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-highlight: 0 0 0 2px var(--accent);

  /* Semantic colors */
  --success: #047857;
  --success-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --info: #1e40af;
  --info-bg: #eff6ff;
  --muted: #6b7280;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Inline number swap (e.g. live programs count) — reserve width and stop
   wrap so a digit-count change (1234 → 12345) does not push neighboring
   text or trigger a CLS shift. min-width keeps an empty span from being
   zero-width before the JS swap lands. */
[data-fact] {
  white-space: nowrap;
  display: inline-block;
  min-width: 1ch;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* a11y: WCAG 1.4.1 (Use of Color) — inline body links must be
   distinguishable without color alone. Underline them when they sit inside
   paragraphs / list items / table cells / definition lists / blockquotes /
   figcaptions / breadcrumbs / inline spans (consent rows, footer notes).
   The 3px offset matches the existing :focus-visible spacing so chips, nav
   items, packet cards, and buttons keep their underline-free look. */
p a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
li a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
td a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
dd a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
dt a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
blockquote a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
figcaption a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.breadcrumb a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
nav[aria-label] > a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
small a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
label > span > a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.muted a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
/* WCAG retry 2026-05-28 — extend underline coverage for remaining 56-URL
   link-in-text-block violations: breadcrumb/footer span links, compare/audience
   leads, mailto and rel=noopener affiliate notes. Selectors below match the
   structural patterns axe-core flagged on production: .demo-lead / .lead /
   .lf-foot / .compare-note / .compare-cell / .pricing-footnote inline text. */
.demo-lead a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.lead a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.lf-foot a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.compare-note a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.compare-cell a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.col-us a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.pricing-footnote a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.footer-fineprint a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.cookie-banner a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.consent-row a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
span > a[rel*="noopener"]:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card),
.legal-notice a:not(.button):not(.btn):not(.link-button):not(.skip-link):not(.packet-card) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* WCAG 2.1.1 (Keyboard) — Material/Pygments and hand-rolled code blocks
   become scrollable when content overflows horizontally. Without tabindex
   the scrollable region traps keyboard users (axe rule
   scrollable-region-focusable, 86 nodes on /connect/personas/* + /docs).
   `tabindex=0` via CSS is not possible, so the actual attribute is injected
   at build time by scripts/patch_a11y_pre_tabindex.py. The CSS below is the
   visible focus ring + overflow hint so the affordance is obvious. */
pre[tabindex="0"]:focus-visible,
pre.codehilite:focus-visible,
pre.code:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Looks like a link, behaves as a button. Used where the action does not
   navigate (e.g. logout posts to API then reloads), so a real <button> is
   semantically correct but the visual treatment must match adjacent anchors. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: underline; }
.link-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

.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;
}

/* Skip link — visible only on keyboard focus. Lets screen-reader/keyboard
   users bypass the header + nav and land directly on <main id="main">.
   Use transform + clip-path so it's fully off-screen and unaffected by
   font-size/line-height variance (padding alone doesn't guarantee full hide). */
.skip-link {
  position: absolute;
  top: 0;
  left: 8px;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 6px 6px;
  z-index: 100;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.1s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .container {
  max-width: 1200px;
}
/* Sticky-header offset for in-page anchor navigation */
[id] { scroll-margin-top: 80px; }

/* YY1 canonical nav (matches /index.html inline shape):
   .brand-logo  — 130x24 hi-res lockup (110x20 on mobile)
   .nav         — 6-item flex container
   .nav-primary — accent CTA pill
   Coexists with .site-nav legacy block above. */
.brand-logo {
  display: block;
  height: 24px;
  width: auto;
  max-width: 130px;
}
@media (max-width: 480px) {
  .brand-logo { height: 20px; max-width: 110px; }
}
.nav {
  display: flex;
  gap: 16px;
  font-size: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover { color: var(--accent); text-decoration: underline; }
.nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.nav-primary {
  background: var(--accent);
  color: var(--accent-on);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.nav-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-on);
  text-decoration: none;
}
/* Mobile nav — root-cause fix (2026-05-27) for the recurring header menu-bar
   "layer崩れ" on phones. Legacy-markup pages (bare `.nav`, no `.site-header`
   ancestor where site/_design/header.css would win) fell through to
   `display:none` + `flex-wrap:wrap`, which hid links and wrapped the bar into
   broken rows. Harmonise the bare-`.nav` grammar with the header.css SOT:
   never hide links, never wrap — single-row horizontal scroll. Guarded by
   scripts/check_mobile_nav_robust.py so it cannot be re-introduced. */
@media (max-width: 720px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .nav::-webkit-scrollbar { display: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  flex: 0 0 auto;
  min-height: 44px;
}
.brand:hover { text-decoration: none; }
.brand picture,
.brand img {
  display: block;
  max-width: 190px;
  height: auto;
}
.site-nav {
  display: flex;
  gap: clamp(8px, 1.35vw, 18px);
  font-size: 15px;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  padding-right: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  white-space: nowrap;
  position: relative;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  color: var(--text);
  min-height: 44px;
  padding: 8px clamp(8px, 0.9vw, 12px);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Mobile fix: prevent <code>/<pre> from blowing out viewport on phones.
   Long flag/path strings (e.g. autonomath-mcp install commands on /program/...)
   were forcing 472 px width inside a 390 px viewport, triggering horizontal
   scroll on the body. Force overflow:auto on the block element + word-break
   on inline. */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}
pre code { word-break: normal; }

/* Language switcher — top-right toggle next to nav links.
   JP / EN pair rendered as plain <a> so it works without JS.
   The current-language item carries aria-current="page" and
   gets a high-contrast style so keyboard users see the state. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.lang-switch a {
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 3px;
}
.lang-switch a:hover {
  color: var(--accent);
  text-decoration: none;
}
.lang-switch a[aria-current="page"] {
  color: var(--text);
  background: var(--bg-alt);
}
.lang-switch .sep {
  color: var(--border);
  user-select: none;
}
.site-nav .lang-switch {
  position: static;
  right: auto;
  top: auto;
  margin-left: 0;
  transform: none;
}
.site-nav .lang-switch a {
  min-height: 32px;
  padding: 4px 6px;
}

.chip,
.chip-success,
.industry-chip,
.pref-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 6px 6px 0;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
}
.chip-success {
  border-color: rgba(21, 128, 61, 0.35);
  background: #ecfdf5;
  color: #166534;
}

/* Trust dropdown (Status / Roadmap / Data Freshness / Transparency / Audit
   Log). Pure-HTML <details><summary> so it works without JS. Closed by
   default; clicking the summary toggles the absolutely-positioned panel.
   IA Audit unification (2026-04-29). */
.nav-trust {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.nav-trust > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav-trust > summary::-webkit-details-marker { display: none; }
.nav-trust > summary::after {
  content: "▾";
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}
.nav-trust[open] > summary::after { transform: rotate(180deg); }
.nav-trust > summary:hover { color: var(--accent); }
.nav-trust > ul {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 20;
}
.nav-trust > ul li { margin: 0; }
.nav-trust > ul a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text);
  min-height: auto;
}
.nav-trust > ul a:hover {
  background: var(--bg-alt);
  color: var(--accent);
  text-decoration: none;
}

/* Audience-page nav CTA (Dashboard) — visually distinguishable from the
   plain nav links so the primary action is obvious. */
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
.nav-cta:hover { background: var(--accent-hover); color: #fff !important; text-decoration: none; }

@media (max-width: 480px) {
  .lang-switch {
    margin-left: 0;
    padding-left: 10px;
  }
  .lang-switch a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
  }
  .site-nav { gap: 8px; font-size: 13px; row-gap: 0; flex-wrap: nowrap; }
  .site-nav a {
    min-height: 44px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
  }
}

/* Trust strip — discreet single-line "who runs this" row used in the
   hero of every page so the first impression always carries Bookyou
   株式会社  + 一次資料 anchor. Plain text + dot
   separators, no badges, no icons. The trust-strip-blocks variant
   below shows a row of small bordered tokens for cohort pages. */
.trust-strip {
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 16px 0 0;
}
.trust-strip a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.trust-strip a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Trust strip — bordered token row. Each <li> is a single fact (legal
   entity, payment processor, infra, disclaimer fence). No marketing
   adjectives — every claim must point at a third-party authority the
   visitor can self-verify. */
.trust-strip-blocks {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.trust-strip-blocks li {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.trust-strip-blocks li strong {
  color: var(--text);
  font-weight: 600;
}

/* Trust stats — numbers row used above-fold on About / Transparency /
   Sources / index pages. Each cell is a single canonical fact (count
   + label). Mirrors the page's data inventory without duplicating the
   whole "データと品質" cards section. */
.trust-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  list-style: none;
  padding: 16px 18px;
  margin: 18px 0 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.trust-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trust-stats .num {
  font-family: var(--font-serif, inherit);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.trust-stats .lbl {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .trust-stats { gap: 12px 22px; padding: 14px 14px; }
  .trust-stats .num { font-size: 19px; }
}

/* Hero */
.hero {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 800;
}
.hero-sub {
  font-size: 20px;
  color: var(--text);
  margin: 0 0 18px;
  font-weight: 500;
}
.hero-tag {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 32px;
  max-width: 640px;
}
.hero-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 28px 0 0;
}
.hero-note a,
.pricing-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-note a:hover,
.pricing-note a:hover {
  color: var(--text);
  text-decoration-thickness: 2px;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  text-decoration: none;
}
.btn-secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-alt);
  text-decoration: none;
}

/* Sections */
.section-title {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  font-weight: 700;
}

.features {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  background: var(--bg);
  /* min-width:0 lets grid/flex item shrink below intrinsic <pre> width
     so .code-block's overflow-x:auto actually scrolls instead of
     expanding the card past the viewport (EN audience pages, 2026-05-29). */
  min-width: 0;
}
.card h3 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 700;
}
.card-lead {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.card p {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 15px;
}
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.9;
}

/* Code demo */
.code-demo {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.demo-lead {
  color: var(--text-muted);
  margin: -16px 0 20px;
}
.code-block {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 18px 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  /* Pair with .card { min-width:0 }: explicitly cap pre to parent width
     so overflow-x:auto actually scrolls instead of growing the card. */
  max-width: 100%;
}
.code-block code {
  font-family: inherit;
  color: inherit;
  white-space: pre;
}
.demo-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}
.demo-note code {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Newsletter capture */
.newsletter {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.newsletter-lead {
  color: var(--text-muted);
  margin: -16px 0 20px;
  max-width: 640px;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 0 12px;
}
.newsletter-form input[type="email"] {
  flex: 1 1 260px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.newsletter-form input[type="email"]:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.newsletter-form button { flex: 0 0 auto; }
.newsletter-form button[disabled] { opacity: 0.6; cursor: progress; }
.newsletter-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
  max-width: 560px;
}
.newsletter-status {
  font-size: 14px;
  margin: 0;
  min-height: 1.4em;
  color: var(--text-muted);
}
.newsletter-status.ok { color: var(--accent); font-weight: 600; }
.newsletter-status.err { color: var(--danger); font-weight: 600; }

/* Pricing preview */
.pricing-preview { padding: 64px 0; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--bg);
}
.pricing-table th,
.pricing-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.pricing-table thead th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: none;
}
.pricing-table tbody th {
  font-weight: 700;
  color: var(--text);
}
.pricing-note {
  margin: 20px 0 0;
  font-size: 15px;
}

/* Full pricing page */
.pricing-page { padding: 64px 0; }
.pricing-page h1 {
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-weight: 800;
}
.pricing-page .lead {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 36px;
  max-width: 640px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.price-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.price-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.price-card h2 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 700;
}
.price-card .tier-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.price-card .price {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.price-card .price-unit {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.price-card .feats {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  flex: 1;
}
.price-card .feats li::before {
  content: "- ";
  color: var(--accent);
  font-weight: 700;
}
.price-card .btn { width: 100%; text-align: center; }

/* Legal pages */
.legal { padding: 48px 0 64px; }
.legal h1 {
  font-size: 30px;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.legal h2 {
  font-size: 18px;
  margin: 32px 0 8px;
  font-weight: 700;
}
.legal p, .legal li {
  font-size: 15px;
  color: var(--text);
}
.legal .meta {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 16px;
}
.draft-banner {
  background: #fff0f0;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 32px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 15px;
}
.legal table th,
.legal table td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.legal table th {
  background: var(--bg-alt);
  width: 30%;
  font-weight: 600;
}

/* Dashboard quota counter widget
   Rendered by dashboard.js from /v1/me + /v1/me/usage. The bar colour is
   thresholded via a data attribute (ok / warn / over) so CSS owns the palette
   and dashboard.js only toggles state. */
.quota-counter {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  background: var(--bg);
  margin: 0 0 20px;
}
.quota-counter .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  font-weight: 600;
}
.quota-counter-headline {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.quota-counter-headline .unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.quota-counter-value {
  font-variant-numeric: tabular-nums;
}
.quota-counter-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.quota-counter-bar {
  position: relative;
  height: 10px;
  background: var(--bg-alt);
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 8px;
}
.quota-counter-fill {
  height: 100%;
  width: 0%;
  border-radius: 5px;
  transition: width 0.25s ease, background 0.25s ease;
  /* WCAG 1.4.11 non-text contrast: bar track is bg-alt #f7f7f8; both
     gradient stops must reach 3:1. Old #22c55e end = 2.13:1 (fail);
     #16a34a (green-600) = 3.08:1 (pass). Start #15803d = 4.68:1 (pass). */
  background: linear-gradient(90deg, #15803d, #16a34a);
}
/* WCAG 1.4.11 non-text contrast: gradient end-color must reach 3:1 vs the
   bar track #f7f7f8. #f59e0b ≈ 2.15:1 (fail); #d97706 ≈ 2.98:1 (still
   borderline fail when measured exactly); #cc6608 = 3.58:1 (pass). */
.quota-counter[data-quota-state="warn"] .quota-counter-fill {
  background: linear-gradient(90deg, #b45309, #cc6608);
}
.quota-counter[data-quota-state="over"] .quota-counter-fill {
  background: linear-gradient(90deg, #991b1b, #dc2626);
}
.quota-counter[data-quota-state="over"] .quota-counter-pct,
.quota-counter[data-quota-state="over"] .quota-counter-note {
  color: var(--danger);
  font-weight: 600;
}
.quota-counter[data-quota-state="warn"] .quota-counter-pct {
  color: #b45309;
}
.quota-counter-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.quota-counter-note a {
  color: inherit;
  text-decoration: underline;
}
.quota-counter-note a:hover { color: var(--danger); }

/* Dashboard v2 (Bearer-flow) sections — reserve vertical space so the
   API-driven reveal does not jolt the layout when /v1/me/dashboard,
   /v1/me/usage_by_tool, /v1/me/billing_history, /v1/me/alerts/*
   resolve out of order. dashboard.html marks each section
   display:none + class="stat-card"; once dashboard_v2.js calls
   showSections(true) the .display style is cleared and the section
   becomes visible. Reserving 200 px while loading keeps cumulative
   layout shift contained to <0.05 even on a slow API. */
#dash2-summary,
#dash2-tool-usage,
#dash2-billing-history,
#dash2-recommend,
#dash2-alerts {
  min-height: 200px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  background: var(--bg-alt);
  font-size: 14px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.footer-brand {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand > img,
.footer-brand-mark img {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-right: 0 !important;
  vertical-align: middle;
}
.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .footer-brand-mark {
    width: 20px;
    height: 20px;
    color: var(--text);
    background: currentColor;
    -webkit-mask: url("/assets/brand/jpcite-mark-light-fill.svg") center / contain no-repeat;
    mask: url("/assets/brand/jpcite-mark-light-fill.svg") center / contain no-repeat;
  }
  .footer-brand-mark img {
    opacity: 0;
  }
}
.footer-tag {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.footer-nav {
  display: flex;
  gap: 14px 18px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.footer-nav a { color: var(--text-muted); }
.footer-nav a:hover { color: var(--accent); }
.footer-entity {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
  /* Override the global `word-break: break-word` on body so Japanese text
     and long URLs don't shatter into single-character columns inside narrow
     containers. Keep `overflow-wrap` so emails / URLs still soft-wrap. */
  word-break: normal;
  overflow-wrap: anywhere;
}
.footer-entity a { color: var(--accent); }
.footer-copy {
  margin: 0;
  color: var(--text-muted);
  text-align: left;
  font-size: 13px;
  /* Same break-word reset as .footer-entity. */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Reduced motion — honor the OS-level "Reduce motion" preference.
   Covers .btn transition, SVG demo animation, and JS-injected spinners. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* iOS Safari auto-zoom prevention (P2.7).
   Safari iOS auto-zooms the viewport when a focused input has font-size
   below 16px. Force 16px on form fields at phone widths so the page stays
   pinned at the user's chosen scale. Desktop sizes are untouched. */
@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 32px; }
  .hero-sub { font-size: 17px; }
  /* Round 3 (2026-04-30) mobile audit: products.html / pricing-page H1
     was a hard 36px under the .pricing-page rule, with no <768/<480
     override. Long titles on product pages can
     push the container width on iPhone SE. Clamp shrinks to 22-28px in
     the mobile range. */
  .pricing-page h1 { font-size: clamp(22px, 7vw, 36px); }
  .features,
  .code-demo,
  .newsletter,
  .pricing-preview,
  .pricing-page { padding: 40px 0; }
  .section-title { font-size: 22px; }
  .cards { grid-template-columns: 1fr; }
  /* Audience pages stamp inline `style="grid-template-columns:repeat(N,1fr)"`
     on .cards rows. Inline beats class specificity, so the .cards 1fr
     fallback above never applies. The attribute selector + !important
     below specifically defeats the inline override on phones, restoring
     the single-column stack. Without this, audience hero cards force
     the body to 1500-1850px on iPhone (P0 blocker). */
  .cards[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* iOS Safari auto-zooms text inputs whose font-size is < 16px on focus.
     The base scaffold above doesn't reach inputs styled by id (#api_key,
     [id^="dash2-"]) or by deeper class selectors (.ps-form, .newsletter-form,
     .calc #reqInput). Force 16px across these explicit IDs/classes so the
     viewport doesn't snap-zoom on tap (P1 mobile UX). */
  .ps-form select,
  .ps-form input,
  .newsletter-form input,
  .calc input,
  #api_key,
  [id^="dash2-"] input,
  [id^="dash2-"] select,
  [id^="dash2-"] textarea,
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="text"]:not([aria-hidden="true"]) {
    font-size: 16px;
  }
  .header-inner { flex-wrap: nowrap; gap: 10px; }
  .site-nav { gap: 8px; font-size: 14px; flex-wrap: nowrap; row-gap: 0; padding-right: 0; }
  .site-nav .lang-switch {
    position: static;
    margin-left: 8px;
    transform: none;
  }
  /* Mobile a11y: WCAG 2.5.5 touch target ≥44x44 on tablet+phone.
     Extends the <480px rule to <768px so the iPad-portrait + folded-phone
     range also gets enlarged tap targets. */
  .site-nav a,
  .lang-switch a,
  .footer-nav a {
    min-height: 44px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
  }
  /* Mobile form: input min-height ≥44px + 16px font on phones.
     16px prevents iOS Safari from auto-zooming on focus. Applies to all
     hand-rolled forms (newsletter, prescreen, dashboard sign-in, alerts). */
  form input,
  form select,
  form textarea {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }
  /* Footer is now flex-column at all breakpoints; only center text on mobile. */
  .footer-inner { text-align: center; }
  .footer-brand { align-self: center; justify-content: center; }
  .footer-nav { justify-content: center; }
  .footer-copy { text-align: center; }
  .footer-entity { text-align: center; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
}

/* Prescreen demo — interactive "try it now" widget that posts a profile
   to /v1/programs/prescreen and renders the top-N matches. */
.prescreen {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
}
.prescreen .section-title { margin-bottom: 6px; }
.prescreen-sub {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 15px;
}
.ps-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.ps-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}
.ps-form .ps-field { display: flex; flex-direction: column; gap: 4px; }
.ps-form label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.ps-form select,
.ps-form input[type="number"] {
  font: inherit;
  font-size: 15px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
.ps-form select:focus,
.ps-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.ps-submit {
  font: inherit;
  font-weight: 600;
  padding: 10px 22px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ps-submit:hover { background: var(--accent-hover); }
.ps-submit:disabled { opacity: .6; cursor: progress; }
.ps-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
/* Reserve vertical space for the typical 5-row prescreen result so that
   the post-submit render does not push the rest of the page down by ~400 px
   (CWV CLS 0.05–0.10 isolated to this container). The container
   stays display:none until results arrive — the height reservation only
   kicks in once .is-visible is set, but we add min-height to .is-visible
   so the loading "読み込み中…" state and the populated state share the
   same box. */
.ps-results { margin-top: 22px; display: none; }
.ps-results.is-visible {
  display: block;
  min-height: 320px;
}
.ps-status {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-muted);
}
.ps-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #fef2f2;
  /* WCAG 1.4.11 UI border: old #fecaca on #fff = 1.45:1 (fail); the box
     fill #fef2f2 only reaches 1.05:1 vs white, so the border carries the
     full state-signal. Switch to #ef4444 (red-500) = 3.76:1 (pass). */
  border: 1px solid #ef4444;
  border-radius: 6px;
  color: var(--danger);
  font-size: 14px;
}
.ps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ps-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  background: #fff;
}
.ps-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ps-tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .04em;
  color: #fff;
  background: #6b7280;
}
.ps-tier.t-S { background: #0f766e; }
.ps-tier.t-A { background: #2563eb; }
.ps-tier.t-B { background: #64748b; }
/* Tier C: was #9ca3af (white-on-2.54:1, WCAG fail). Switched to #78716c
   (stone-500, white-on-4.80:1) — passes AA normal text and stays a warm
   neutral that reads "lower than tier B (cool slate)" without re-coloring. */
.ps-tier.t-C { background: #78716c; }
/* Per-program SEO page tier badge — same color hierarchy as .ps-tier. */
.tier {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  color: #fff;
  background: #6b7280;
}
.tier-s { background: #0f766e; }
.tier-a { background: #2563eb; }
.tier-b { background: #64748b; }
.tier-c { background: #78716c; }
.ps-name { font-weight: 600; font-size: 15.5px; flex: 1; }
.ps-amount {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ps-reasons, .ps-caveats {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ps-reasons li { color: var(--text); }
.ps-caveats li { color: var(--danger); }
.ps-source {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  word-break: break-all;
}
.ps-source a { color: var(--accent); }

/* Post-success CTA row — appended after renderRows to capture peak intent. */
.ps-cta {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* SMB → 顧問税理士 reseller handoff. Visually separated from .ps-cta
   (which targets the API-key signup) by a dashed border so the user
   can tell "send this list out" from "sign up for a key". */
.ps-handoff {
  margin: 20px 0 0;
  padding: 14px 0 18px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.ps-handoff::before {
  content: "結果を共有 / 送付:";
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  flex: 0 0 100%;
  margin-bottom: 4px;
}
.ps-handoff .btn {
  font-size: 14px;
}

/* Print stylesheet — used by the "PDF として保存" button. Hide every
   navigational and conversion surface so only the result list ends up
   on paper / in the saved PDF. */
@media print {
  .site-header,
  .site-footer,
  .site-nav,
  .ps-form,
  .ps-cta,
  .ps-handoff,
  .hero,
  .am-feedback-trigger,
  .am-feedback-close {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .ps-results,
  .ps-results.is-visible {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .ps-row {
    page-break-inside: avoid;
    border: 1px solid #888 !important;
    background: #fff !important;
  }
}

@media (max-width: 480px) {
  .ps-form {
    grid-template-columns: 1fr;
  }
  .ps-submit { width: 100%; }
  .ps-form select,
  .ps-form input[type="number"] {
    min-height: 44px;
    padding: 12px 12px;
    font-size: 16px;
  }
  .ps-submit {
    min-height: 44px;
    width: 100%;
    padding: 12px 16px;
  }
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  .cta-row .btn { width: 100%; }
  .newsletter-form button { width: 100%; }
  [id] { scroll-margin-top: 56px; }
  #reqInput { width: 100%; box-sizing: border-box; }
}

/* Audience pitch cards (used by site/index.html #audiences) */
.audience-card .audience-context {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.audience-card .audience-pitch {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 12px;
  margin: 8px 0 12px;
}

/* Dashboard "new API key reveal" one-time banner.
   Amber warning palette in light mode, darker tinted in dark mode (override
   below). Hoisted out of inline style= so dark-mode @media can re-skin. */
.newkey-reveal {
  margin: 0 0 18px;
  padding: 16px;
  border-radius: 8px;
  /* WCAG 1.4.11 UI border: old #f59e0b on #fff = 2.15:1 (fail); the box
     fill #fff8e6 only reaches 1.06:1, so the border is the only state cue.
     Switch to #d97706 (amber-600) = 3.19:1 (pass). */
  border: 1px solid #d97706;
  background: #fff8e6;
  color: #7c2d12;
}

/* Dashboard dunning banner (subscription past_due / unpaid / canceled).
   Hoisted out of inline style on #dash-dunning-banner so the dark-mode
   @media can override hex colors that would otherwise become unreadable
   on a #0d1117 surface (#7f1d1d on #0d1117 = 1.6:1 fail).
   Light contrast: #7f1d1d on #fff0f0 = 6.84:1 (AAA normal, AA large).
   Dark contrast: #fca5a5 on #3f1d1d = 6.46:1 (AAA normal, AA large). */
.dunning-banner {
  margin: 0 0 18px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #b91c1c;
  background: #fff0f0;
  color: #7f1d1d;
  font-size: 14px;
  line-height: 1.55;
}
.dunning-banner-msg {
  display: block;
  margin: 0 0 10px;
  font-weight: 600;
}
.dunning-banner-action {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: #b91c1c;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.dunning-banner-action:hover {
  background: #991b1b;
  color: #fff;
  text-decoration: none;
}

/* Dashboard alerts subsection headings — visual hierarchy without
   re-introducing inline styles. The h2 carries section-level weight,
   the h3 carries subsection-eyebrow weight. Both inherit dark-mode
   colors via var(--text) / var(--text-muted). */
.dash-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.dash-subsection-title {
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-subsection-title.is-spaced {
  margin-top: 22px;
}
.newkey-value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  /* See .newkey-reveal: matched amber border at #d97706 (3.19:1 vs #fff). */
  border: 1px solid #d97706;
  word-break: break-all;
  margin: 0 0 10px;
}

/* Dark mode — honors prefers-color-scheme: dark from macOS / iOS / Win11.
   Strategy: the surface tokens (--bg / --text / --text-muted / --border /
   --bg-alt / --bg-subtle) now alias the canonical _design/tokens.css
   --color-* scale, so their dark values come from tokens.css's dark block
   (--color-bg #0a0a0a / --color-fg #ededed / --color-fg-muted #a0a0a0 /
   --color-border #2a2a2a / --color-bg-subtle #1a1a1a). This matches the
   header + footer chrome exactly — the old body↔header seam (#0d1117 vs
   #0a0a0a) is gone. Below we only fix the non-aliased tokens (accent, code,
   semantic state) plus the components with hardcoded #fff that need a dark
   surface. Brand identity preserved (indigo accent, AAA dark contrast).
   Canonical dark contrast (recomputed against #0a0a0a):
     --text  #ededed on --bg #0a0a0a = 16.9:1 (AAA)
     --accent #79b8ff on --bg #0a0a0a = 9.5:1 (AAA)
     --text-muted #a0a0a0 on --bg #0a0a0a = 7.6:1 (AAA) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surface tokens (--bg / --bg-alt / --bg-subtle / --text / --text-muted /
       --border) are NOT re-declared here. They alias --color-* in :root, and
       _design/tokens.css owns their dark override in ONE place. Re-declaring
       them here would shadow the alias and re-open the body↔header seam
       (#0d1117 vs #0a0a0a). Only the tokens with no --color-* equivalent get
       a dark value below. */
    --accent: #79b8ff;
    --accent-hover: #a5cdff;
    --code-bg: #010409;
    --code-text: #e6edf3;
    --danger: #f85149;
    --focus: #79b8ff;
  }

  /* Hardcoded #fff backgrounds → dark surfaces */
  .btn-secondary { background: var(--bg-alt); }
  .btn-secondary:hover { background: var(--border); }
  .demo-note code { background: var(--bg-alt); }
  .trust-strip-blocks li {
    background: var(--bg-alt);
    border-color: var(--border);
    color: var(--text);
  }
  .chip,
  .industry-chip,
  .pref-chip {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text);
    border-color: rgba(148, 163, 184, 0.28);
  }
  .chip-success {
    background: rgba(34, 197, 94, 0.14);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.35);
  }
  .newsletter-form input[type="email"] { background: var(--bg-alt); }
  .ps-card { background: var(--bg-alt); }
  .ps-form select,
  .ps-form input[type="number"] { background: var(--bg-alt); }
  .ps-row { background: var(--bg-alt); }

  .btn-primary { color: #0d1117; }
  .btn-primary:hover { color: #0d1117; }
  .nav-cta,
  .nav-cta:hover { color: #0d1117 !important; }
  .skip-link { color: #0d1117; }
  .ps-submit { color: #0d1117; }

  /* Tier badges retain full saturation — readable on darker bg.
     White text on these saturated greens/blues already passes on dark. */
  .ps-tier.t-S { background: #0f766e; color: #fff; }
  .ps-tier.t-A { background: #2563eb; color: #fff; }
  .ps-tier.t-B { background: #64748b; color: #fff; }
  .ps-tier.t-C { background: #4b5563; color: #fff; }

  /* Error / warning surfaces: shift from light pink to dark red tinted */
  .ps-error {
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.4);
    color: #ffa198;
  }
  .draft-banner {
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.4);
    color: #ffa198;
  }

  /* Quota counter gradients — keep semantic colors but darker for dark bg */
  .quota-counter-fill {
    background: linear-gradient(90deg, #1a7f37, #3fb950);
  }
  .quota-counter[data-quota-state="warn"] .quota-counter-fill {
    background: linear-gradient(90deg, #9a6700, #d29922);
  }
  .quota-counter[data-quota-state="over"] .quota-counter-fill {
    background: linear-gradient(90deg, #b62324, #f85149);
  }
  .quota-counter[data-quota-state="warn"] .quota-counter-pct { color: #d29922; }

  /* Code blocks — GitHub Dark theme palette already matches via --code-bg */
  /* (already handled by --code-bg / --code-text variable override above) */

  /* Inline <code> in dashboard / stats / docs — readable on dark */
  code {
    color: var(--text);
  }

  /* Newsletter status colors retain semantic meaning */
  .newsletter-status.ok { color: var(--accent); }
  .newsletter-status.err { color: #ff7b72; }

  /* Dashboard newkey reveal — amber warning, dark-mode skin */
  .newkey-reveal {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
  }
  .newkey-value {
    background: var(--bg-alt);
    color: var(--text);
    border-color: rgba(245, 158, 11, 0.5);
  }

  /* Dashboard dunning banner — dark red tinted, AA-readable.
     Light #7f1d1d on #fff0f0 fails on dark backgrounds (1.6:1 vs #0d1117).
     Dark #fca5a5 on #3f1d1d = 6.46:1 (AAA normal text). */
  .dunning-banner {
    background: #3f1d1d;
    border-color: rgba(248, 81, 73, 0.5);
    color: #fca5a5;
  }
  .dunning-banner-action {
    background: #f85149;
    color: #0d1117;
  }
  .dunning-banner-action:hover {
    background: #ff7b72;
    color: #0d1117;
  }
}

/* Prefecture + program-list pages (47 都道府県 SEO landing).
   Selectors used by site/_templates/prefecture.html for tier-S 補助金 /
   採択事例 / 政策金融融資 / 行政処分 grids. Without these the pages render
   as an unstyled wall of text and bounce inbound "{県名} 補助金" traffic.
   Reuses the existing .tier / .tier-{s,a,b,c} badge palette defined above
   (lines 877-890) — no need to redeclare. */
.prefecture-header { margin-bottom: 24px; }
.prefecture-header h1 { font-size: 28px; margin-bottom: 8px; }
.prefecture-header .byline { color: var(--text-muted); font-size: 13px; }
.prefecture-header .byline-note { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.tldr { background: var(--bg-alt); padding: 16px; border-radius: 8px; margin: 16px 0; border-left: 3px solid var(--accent); }
.program-list, .case-list, .loan-list, .enforcement-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.program-card, .case-card, .loan-card, .enforcement-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.program-card a, .case-card a, .loan-card a, .enforcement-card a { color: var(--accent); text-decoration: none; font-weight: 600; }
.program-card a:hover, .case-card a:hover, .loan-card a:hover, .enforcement-card a:hover { text-decoration: underline; }
.program-amount { color: var(--text-muted); font-size: 13px; display: block; margin-top: 4px; }
.case-industry { color: var(--text-muted); font-size: 13px; }
.case-summary { font-size: 14px; margin-top: 8px; }
.disclaimer { color: var(--text-muted); font-size: 12px; margin-top: 32px; padding: 12px; background: var(--bg-alt); border-radius: 4px; }

@media (max-width: 480px) {
  .program-list, .case-list, .loan-list, .enforcement-list { grid-template-columns: 1fr; }
}

/* WCAG 2.5.5 AAA touch-target sweep (44x44 px minimum).
   Uses `pointer: coarse` so the rule fires on phones, tablets (iPad portrait
   AND landscape), and Android Chromebook touch screens, while leaving the
   visually compact desktop hit areas untouched on mouse / trackpad pointers.
   Per-device width media queries (max-width: 480/768) above already cover
   the most common phone sizes; this block extends coverage to non-phone
   touch devices and adds rules for the few elements still under 44 px even
   on phones (footer-entity inline link, dashboard link-button, dunning CTA,
   brand mark, content-area card links).
   Inline links inside flowing paragraph text (.hero-note a, .pricing-note a,
   .legal p a, .footer-entity a) are technically covered by the WCAG 2.5.5
   "Inline" exception, but we still bump line-height + offset so a fat finger
   doesn't slip onto an adjacent line. */
@media (pointer: coarse), (max-width: 768px) {
  /* Buttons — base .btn rule sits at ~42 px tall (15px font * 1.2 LH + 24px
     vertical padding). Force 44 px regardless of viewport for any touch
     pointer (covers iPad portrait 768-1024 px range). */
  .btn,
  .ps-submit,
  .dunning-banner-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Brand / logo link in header: keep the image link's hit area comfortable. */
  .brand {
    min-height: 44px;
  }

  /* Dashboard "logout" link-button — visually a link, semantically a button.
     Inherits font:inherit so its hit area is just text height (~27 px). */
  .link-button {
    min-height: 44px;
    padding: 8px 4px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer inline link inside .footer-entity ("統計の出典") — sits inside a
     paragraph so we use a generous line-height + tap padding rather than
     min-height (would break the paragraph rhythm). */
  .footer-entity a,
  .footer-tag a {
    display: inline-block;
    padding: 6px 2px;
    line-height: 1.8;
  }

  /* In-flow grid card links — single-line bold links inside .program-card,
     .case-card, .loan-card, .enforcement-card. Bump line-height so the row
     itself is tall enough; the parent card padding (16px) gives the rest. */
  .program-card a,
  .case-card a,
  .loan-card a,
  .enforcement-card a {
    display: inline-block;
    padding: 6px 0;
    min-height: 44px;
    line-height: 1.6;
  }

  /* Footer nav already has min-height: 44px under (max-width: 768px) (line
     ~847). Re-stating here so pointer-coarse iPad-landscape (>768 px) also
     gets it. */
  .footer-nav a {
    min-height: 44px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
  }

  /* Sticky-footer feedback widget toggle (rendered by feedback-widget.js).
     Class fixed via the widget; we enforce 44 px without touching the JS. */
  .am-feedback-trigger,
  .am-feedback-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ----------------------------------------------------------------
   JA mobile horizontal-overflow defenses (375px viewport).
   Follow-up audit found JA pages clipping in chrome headless
   `--screenshot` mode. Real iOS Safari / Playwright `is_mobile=true`
   confirms the layout already wraps cleanly at 375 — but the rules
   below add belt-and-braces protection so a future content edit
   (longer button label, an extra nav link, a wider input) cannot
   silently regress on small phones. All rules are scoped to
   `(max-width: 480px)` or `(max-width: 599px)` so desktop is
   untouched.
   ---------------------------------------------------------------- */

/* (4) Nav: keep the header to one visual row below 420px. The nav itself
   scrolls horizontally so page-specific link counts do not create a
   different two-row header. */
@media (max-width: 420px) {
  .header-inner {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .brand {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .site-nav {
    flex-wrap: nowrap;
    gap: 8px;
    row-gap: 0;
    /* min-width: 0 lets the nav shrink below its content's intrinsic
       width inside the .header-inner flex container. */
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* (2) smb.html (and any other audience hero) H1 — Japanese line-break
   awareness + fluid font sizing. `word-break: keep-all` keeps Japanese
   words from breaking mid-character on narrow phones; `clamp()` shrinks
   the font from 32px to 24px between 320–375px so a long compound like
   "SMB 経営者向け jpcite" never visually clips. Scoped to mobile
   so desktop's 44px hero font is preserved. */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(22px, 7.2vw, 32px);
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* Prevents an unbreakable English token from forcing horizontal
       scroll when keep-all is set on a JA-mostly heading. */
  }
}

/* (5) Mobile body content overflow safety. Long unbroken tokens
   (URLs, code identifiers, English compounds inside JA paragraphs)
   should wrap rather than push the container width. Scoped to
   <=480 so desktop typography stays untouched. */
@media (max-width: 480px) {
  .hero-tag,
  .hero-sub,
  .hero-note,
  .pricing-note,
  .legal p,
  .legal li,
  .card p,
  .feature p,
  main p,
  main li {
    overflow-wrap: anywhere;
  }
}

/* (3) Dashboard sign-in row — stack label/input/button vertically
   anywhere below 600px so the legacy 320px iPhone SE and the
   in-between phablet range (480–599) both get a vertical layout.
   The existing dashboard.html @media (max-width: 480px) rule
   already collapses the form, this widens that breakpoint to 600px
   per spec (form layout intent: stack as soon as the row no longer
   has comfortable room). */
@media (max-width: 599px) {
  #dash2-key-form {
    flex-direction: column !important;
    align-items: stretch;
  }
  #dash2-key-form #dash2-key-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #dash2-key-form .btn,
  #dash2-key-form .btn-ghost {
    width: 100%;
    box-sizing: border-box;
  }
  /* Same shape applies to the legacy cookie-session signin form
     (.signin-form) — stack at the same breakpoint so JA + EN both
     respond identically. */
  .signin-form,
  form.signin {
    flex-direction: column;
    align-items: stretch;
  }
  .signin-form input,
  form.signin input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .signin-form button,
  form.signin button {
    width: 100%;
  }
}

/* (6) mkdocs Material — feedback FAB (`.am-fb-fab`) is positioned by
   the widget at right:20px / bottom:20px. On the smallest phones
   the round pill ("フィードバック") can crowd the right edge of the
   readable area. Tighten the offset slightly + ensure max-width so
   it can never push the body width. */
@media (max-width: 480px) {
  .am-fb-fab {
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px);
  }
}

/* ---------- XX5 honesty markers (beta notice + hero tag) ---------- */
.footer-beta-notice {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  background: var(--xx5-beta-bg);
  border-left: 3px solid var(--xx5-beta-border);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--xx5-beta-text);
  line-height: 1.55;
}
.footer-beta-notice a { color: var(--xx5-beta-link); text-decoration: underline; }
.hero-beta-tag { color: var(--xx5-beta-tag); font-weight: 600; }

:root {
  --xx5-beta-bg: rgba(245, 166, 35, 0.08);
  --xx5-beta-border: #f5a623;
  --xx5-beta-text: #7a4a00;
  --xx5-beta-link: #0050d0;
  --xx5-beta-tag: #a55a00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --xx5-beta-bg: rgba(245, 166, 35, 0.18);
    --xx5-beta-border: #f5a623;
    --xx5-beta-text: #fbcb6e;
    --xx5-beta-link: #7ab2ff;
    --xx5-beta-tag: #fbcb6e;

    /* 2026-07-21 semantic colors — dark 側 override。 明度反転で contrast 4.5:1+ 維持。 */
    --success: #34d399;
    --success-bg: rgba(4, 120, 87, 0.15);
    --warn: #fbbf24;
    --warn-bg: rgba(180, 83, 9, 0.22);
    --info: #60a5fa;
    --info-bg: rgba(30, 64, 175, 0.18);
    --muted: #9ca3af;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- EEE2 page-toc (DDD1 BUG-1 + BUG-2 sticky TOC) ----------
   Long pages (pricing.html ~9,258px, en/index.html ~11,949px) caused
   scroll fatigue. The .page-toc sits below the site header and gives
   one-click anchor jumps to every h2 / section.

   Desktop (>=1024px): sticky to the right of main content (float).
   Mobile (<1024px): collapses into a <details> accordion at the top
   of <main>. Both layouts share the same <ol> markup. */
.page-toc {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.page-toc > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page-toc > summary::-webkit-details-marker { display: none; }
.page-toc > summary::after {
  content: "▾";
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.page-toc[open] > summary::after { transform: rotate(180deg); }
.page-toc > summary > .page-toc-label-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}
.page-toc-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px;
}
.page-toc-list li { margin: 0; padding: 0; }
.page-toc-list a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.page-toc-list a:hover,
.page-toc-list a:focus {
  background: var(--bg);
  border-left-color: var(--accent);
  text-decoration: none;
}
.page-toc-list a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Desktop variant — the TOC stays in normal document flow at the top of
   <main> and scrolls away with the page. It must NOT be position:sticky:
   the TOC is a full-width block, so a sticky + z-index pin made it overlay
   (and visually overlap) every section the reader scrolled past. */
@media (min-width: 1024px) {
  .page-toc-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Mobile — keep accordion compact and full-width inside .container. */
@media (max-width: 720px) {
  .page-toc { padding: 12px 14px; }
  .page-toc-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .page-toc-list a { padding: 8px 10px; }
}

/* Smooth scroll for in-page anchors + offset so the section heading
   does not slide under the site header. Respect reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.page-toc + * [id],
main [id] { scroll-margin-top: 24px; }

@media (prefers-color-scheme: dark) {
  .page-toc {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .page-toc-list a:hover,
  .page-toc-list a:focus {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* ----------------------------------------------------------------------------
   Mobile responsive deep audit fixes — 2026-05-29 (post-PR #655)
   ----------------------------------------------------------------------------
   Audit script: scripts/mobile_responsive_deep_audit.py
   Engine: WebKit (iOS Safari closest match)
   Viewports tested: 360 / 375 / 414 / 768

   The earlier (max-width: 768px) block above targets the legacy `.site-nav a`
   and `form input/select/textarea` selectors. The III2-design canonical site
   header (chrome_loader.HEADER_MARKER = III2-design header v6) uses `.nav`
   (not `.site-nav`) and the III2 lang-switch `<a>` carry a 2x4px padding
   override at base, which beats the bare `.site-nav a` selector inside
   `.lang-switch`. Result: production WebKit shows `.nav a` at 38x44 and
   `.lang-switch a` at 51x27 — both below WCAG 2.5.5 (44x44) on mobile.

   These rules target the III2 canonical selectors directly so the fix
   reaches the live header without re-injecting 22K pages.

   The bare `<select>` / `<input type=number>` / `<input type=password>`
   on /playground and /pricing widgets are not wrapped in `<form>`, so the
   `form input/select/textarea` rule above misses them. The standalone
   `select, input[type=number/password], textarea` rule below catches them
   so iOS Safari doesn't auto-zoom on focus.

   Discipline: cwd is agent worktree (~/jpcite untouched), CSS-only fix
   (no markup / chrome_loader changes), opt-in via media query so
   desktop-mode users are unaffected.
*/
@media (max-width: 768px) {
  /* Header nav links (`.nav a` inside `.site-header`) need WCAG 2.5.5
     44x44 tap targets. III2 markup has bare `<a>` with no class so we
     scope by parent. Wave 7 follow-up: short JA labels (料金/接続/2 chars)
     measured 38px wide even with padding 10px 12px — add explicit
     min-width: 44px to guarantee horizontal axis. */
  .site-header .nav a,
  .site-header .header-right a {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* III2 lang-switch <a> has padding: 2px 4px at base — bump to 44px
     so the "日本語 / English" toggle is tappable. */
  .site-header .lang-switch a,
  .lang-switch a {
    min-height: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
  }
  /* Standalone form controls outside <form> (playground / pricing /
     calculator widgets). Use 16px to prevent iOS Safari focus zoom.
     `!important` required because per-page inline <style> blocks (e.g.
     login.html `.magic-form input[type=email]`, pricing.html `#cs-mix`,
     playground.html `.pg-field select`) carry higher specificity than
     plain `input[type=email]` and would otherwise win at 14-15px,
     triggering the iOS focus-zoom we are trying to prevent. */
  select,
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  /* Compare-table sticky <th> can hardcode width >= 380px which exceeds
     360/375 viewports. Force in-viewport with horizontal scroll on the
     wrapping element instead. */
  .compare-table th,
  table th,
  table td {
    max-width: 100vw;
    min-width: 0;
  }
  /* If a compare-table itself overflows, give it a scroll container so
     the page document doesn't horizontally scroll. */
  .compare-table,
  .feature-matrix table,
  main > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Phone-size only (≤480) — the III2 lang-switch sometimes wraps onto a
   second row on iPhone SE (375). Allow flex wrap and make each link
   stand alone so wrapping doesn't squash height. */
@media (max-width: 480px) {
  .site-header .lang-switch {
    flex-wrap: wrap;
    gap: 4px;
  }
  .site-header .lang-switch a,
  .lang-switch a {
    /* Phone-size: keep the 44px minimum but tighten horizontal padding
       so two links + brand fit on one row. */
    padding: 10px 8px;
  }
}

/* ============================================================================
   Wave 7 body-content tap-target follow-up (post-#666) — 2026-05-29
   ============================================================================
   PR #666 fixed the canonical SOT header chrome to WCAG 2.5.5 44x44 at
   <=768. The deep audit re-run nevertheless reported 1500+ remaining
   `tap_target_small` violations rooted in BODY content (not chrome):

     - site_logo (.site-logo)                  140 — header brand lockup
                                                     (`.site-logo` natural 82x24,
                                                     not yet given a 44px tap area)
     - jpcite-bp-cta (.jpcite-bp-cta)            4 — body-pack CTA pill at h=31
     - <details><summary> disclosures           33 — on-page TOC, FAQ accordion
                                                     (natural h=23-25)
     - mkdocs material UI                       16 — md-clipboard / md-search__icon
                                                     / md-top / md-skip / md-nav__link
     - am-fb-fab feedback button                 9 — anchored circular CTA
     - body inline CTAs ("料金 →", "詳細ページ →") ~10 — h=16-25, missing min-h
     - on-page anchor TOC links                ~120 — bare <a href="#...">, h<44
                                                     (audit heuristic rightly
                                                      flagged these as standalone
                                                      links, not <p>-inline)
     - other body anchors                      ~290 — various standalone <a>

   The fix is CSS-only and opt-in via @media (max-width: 768px) so desktop
   density is unaffected. Where a class hook exists we use it; for bare
   standalone <a> we scope to `main > *` so paragraph-inline text links
   (which still get matched by `:not(p > a)` heuristic) are not bumped
   to 44px and don't cause vertical line-break churn.

   Discipline:
     - CSS-only (no markup / chrome_loader / 22K-page reinject)
     - opt-in via media query (desktop unaffected)
     - Destruction-Free (extends existing breakpoint, no rule deletion)
     - Scoped to body content selectors to avoid header double-application

   Re-run: python3 scripts/mobile_responsive_deep_audit.py
   ============================================================================
*/
@media (max-width: 768px) {
  /* (1) Site logo in the header — natural 82x24 is below 44x44. The
     header.css `.site-logo` already sets `display: inline-flex; align-items:
     center;` so adding `min-height: 44px; min-width: 44px;` makes the brand
     lockup a 44x44 tap target without enlarging the picture/img inside. */
  .site-header .site-logo {
    min-height: 44px;
    min-width: 44px;
  }

  /* (2) Body-pack CTA pill (`.jpcite-bp-cta`) used on /pricing and the
     evidence-3 flow. Natural height is 31px on phone — bump to 44px and
     keep the existing button visual. */
  .jpcite-bp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
  }

  /* (3) <details><summary> disclosures — on-page TOC ("ページ内目次"),
     /support FAQ accordions, etc. Default summary height is governed by
     `font-size * line-height` (≈23px) which fails 44px. Force a tappable
     row via padding + min-height. The marker glyph (▾) stays vertically
     centered. */
  details > summary {
    min-height: 44px;
    padding: 10px 12px;
    display: list-item;
    /* `list-item` retains the native disclosure caret on browsers that
       don't honor `::-webkit-details-marker`. Specific subclasses
       (.page-toc, .nav-trust) keep their own styling because their
       selectors are more specific than `details > summary`. */
  }

  /* (4) Mkdocs material UI buttons surfaced on `/getting-started` (the
     mkdocs-rendered subpath). These are 18-24px icons by design. Wrap
     them in a 44x44 transparent tap zone via padding without changing
     the icon visual size. */
  .md-clipboard.md-icon,
  .md-search__icon.md-icon,
  .md-top.md-icon,
  .md-skip,
  .md-nav__link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* `.md-clipboard` is positioned absolute over a <code> block; keep
     it absolute but give it a 44x44 hit area via padding. */
  .md-clipboard.md-icon {
    padding: 10px;
  }

  /* (5) Feedback fab (am-fb-fab) — a small floating pill that sits at
     123x38 on phones. Bump to 44px and keep horizontal pill shape. */
  .am-fb-fab {
    min-height: 44px;
    padding: 0 16px;
  }

  /* (6) Body inline CTAs that are NOT inside <p> but are standalone
     "next step" pills (e.g. "料金 →", "詳細ページ →" on /about). These
     render bare `<a>` with no class, so we cannot target them by class.
     Scope by parent: <li>, <div.cta>, <div.next-step>, ".action-row",
     and Stripe-grade product-pack card footers. */
  main a.next-link,
  main .cta-row > a,
  main .action-row > a,
  main .product-cta > a,
  main .next-step > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
  }

  /* (7) On-page TOC anchor links — `#section` links rendered as a list
     under <details class="page-toc">. The list items already have
     `padding: 8px 10px` at <=720 (existing rule above) but the height
     measured 16-25px due to single-line layout. Enforce 44px floor. */
  .page-toc-list a,
  main details a[href^="#"],
  main > ul > li > a[href^="#"],
  main > ol > li > a[href^="#"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* (7b) Breadcrumb home link — `<nav class="breadcrumb"><a href="/">ホーム</a>`
     is on /pricing, /products, /about and 9 other pages. Natural 39x17 —
     bump to 44x44. Single anchor in a nav so the visual breadcrumb shape
     stays the same with extra vertical hit area. */
  nav.breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
  }

  /* (8) Generic safety net for bare standalone anchors in <li>/<div>
     parents inside <main>. Targets <a> that is the SOLE child of an
     <li> or div.action — the WCAG 2.5.5 tappable footprint. We DO NOT
     touch <a> inside <p> (paragraph-inline text links), inside <span>
     (typically inline), or with `.btn` class (already styled).

     Use :where() to keep specificity 0 so per-page <style> blocks can
     override individual links. */
  :where(main li > a:only-child:not([class*="btn"])),
  :where(main div.cta-list > a),
  :where(main nav.section-nav a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* (9) Multi-link table cells (e.g. /products: <td>Playground / REST /
     MCP</td>) and short "→" CTAs in table rows. These are inline links
     separated by literal text ("/", "→"); WCAG 2.5.5 spirit treats
     multiple links sharing one line as a tappable cluster. The audit
     heuristic only excepts <p>-inline links, so flagging is over-eager
     here. Compromise: give each <a> a 44px tap-target footprint (via
     padding + min-width) without breaking the inline flow — the literal
     "/" separators stay between them on the same line on wider phones
     and wrap to a second row on the narrowest (375). */
  main td > a:not([class*="btn"]),
  main td a:not([class*="btn"]) {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    /* Vertical hit area via padding (no inline-flex so the literal
       separator characters "/" / "→" stay inline). The padding adds
       12px above and below the visual baseline so the link is still
       visually inline but has a 44x44 tappable footprint. */
    padding: 12px 4px;
    /* Keep line-height the same as the cell so the row height doesn't
       inflate by the padding amount — padding contributes to hit-box
       only, not to layout box. */
    line-height: 20px;
    vertical-align: middle;
    /* `text-align: center` keeps short labels (REST / MCP, 3-4 chars)
       centered within their 44px min-width so the underline doesn't
       offset to one side. */
    text-align: center;
  }

  /* (10) Inline body anchors that are NOT in <p> but are bare
     standalone "next step" arrows ("詳細ページ →", "料金 →") rendered
     in a <div>, <figcaption>, or other non-<p> wrapper with no class.
     The fix is the same vertical-padding trick as <td>: give a 44px
     hit area without forcing flex layout.

     Scope: anchors that are direct child of `<section>`/`<div>`/
     `<figcaption>`/`<aside>` inside <main>, that are NOT inside a <p>
     (paragraph-inline links are already excepted by the audit). The
     :not(p > *) trick uses the new (2022+) CSS spec — falls back
     gracefully on older browsers (no-op match). */
  main section > a:not([class*="btn"]):not([class*="cta"]):not([class*="nav"]),
  main section > div > a:not([class*="btn"]):not([class*="cta"]):not([class*="nav"]),
  main figcaption > a:not([class*="btn"]),
  main aside > a:not([class*="btn"]) {
    display: inline-block;
    min-height: 44px;
    padding: 12px 4px;
    line-height: 20px;
    vertical-align: middle;
  }
}

/* ============================================================================
   Phone-size body-content tap-target shimmer (≤480) — 2026-05-29
   ============================================================================
   At <=480 (iPhone SE 375 / Galaxy S5 360) the 2-link "footer-legal"
   row tends to wrap; allow the wrap and keep each link 44px tall.
*/
@media (max-width: 480px) {
  .jpcite-bp-cta {
    /* Tighter horizontal padding on phones so the label "次へ: playground
       を開く →" still fits in one row. */
    padding: 10px 12px;
  }
  details > summary {
    /* iPhone SE width sometimes truncates the marker arrow — tighten the
       padding so the label + chevron share one row. */
    padding: 10px 8px;
  }
}

/* ============================================================================
   Design tokens utilities (2026-07-21 段階1)
   ============================================================================
   Semantic classes that consume the design tokens above. Frontend pages can
   drop their inline `style="..."` blocks and use these classes instead:

   BEFORE: <div style="margin:0 0 22px;padding:22px 24px;border:1px solid #e5;">
   AFTER:  <div class="card">

   BEFORE: <button style="font-size:16px;padding:14px 22px;background:accent-color;">
   AFTER:  <button class="btn btn--primary btn--lg">

   Keeps 段階1 change surface small (only new classes appended). 段階2 will
   migrate the largest 5 pages' inline styles to these classes.
   ---------------------------------------------------------------------- */

/* Cards */
.card {
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.card--subtle { background: var(--bg-alt); }
.card--highlight { border-width: 2px; border-color: var(--accent); box-shadow: var(--shadow-md); }
.card--warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.card--info { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.card--success { background: var(--success-bg); border-color: var(--success); color: var(--success); }

/* Stack (vertical rhythm) */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Row (horizontal flex, gap-based, wraps at mobile) */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.row-lg { gap: var(--space-5); }
.row--between { justify-content: space-between; }

/* Grid (auto-fit tier cards) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* Typography helpers */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.h-display {
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text);
}
.h-section {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text);
}
.text-muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

/* Buttons (extend existing .btn / .btn-primary in styles.css) */
.btn--lg {
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.btn--sm {
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

/* Badges (recommendation, "人気" 等) */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  letter-spacing: 0.02em;
}
.badge--success { background: var(--success); }
.badge--warn { background: var(--warn); }
.badge--muted { background: var(--muted); }

/* Tier cards (unified 8-tier pricing grid, 段階2 で 各 tier に apply) */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.tier-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tier-card--recommended {
  border-width: 2px;
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  position: relative;
}
.tier-card--recommended::before {
  content: "推奨";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.tier-card__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tier-card__price {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text);
  line-height: var(--lh-tight);
  margin: 0;
}
.tier-card__price small {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.tier-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  flex-grow: 1;
}
.tier-card__cta {
  margin-top: auto;
}

/* Trust signals row (バッジ横並び) */
.trust-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  align-items: center;
}
.trust-signals__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.trust-signals__item::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
}

/* Compact FAQ (accordion) */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}
.faq-item summary {
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  padding: var(--space-2) 0;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋";
  float: right;
  color: var(--muted);
  font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { color: var(--accent); }
.faq-item > p {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* Compare table (Before / After 対比) */
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
@media (max-width: 640px) {
  .compare-cols { grid-template-columns: 1fr; }
}
.compare-col {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.compare-col--after {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--info-bg);
}

/* ============================================================================
   Stage 3: World-class hero + typography + card + button system (2026-07-21)
   ============================================================================
   Inspired by Stripe / Linear / Vercel / Anthropic pricing pages. Applies
   consistent rhythm across all 15 hotfix-served pages via `.page-hero`,
   `.hero__eyebrow`, `.hero__title`, `.hero__lead`, and unified button
   hierarchy. `.page-hero` gets its own `<section>` slot at the top of
   each page and displaces the raw h1/paragraph markup.
   ----------------------------------------------------------------- */

/* Hero block (unified across all top pages) */
.page-hero {
  padding: var(--space-8) 0 var(--space-6);
  max-width: 780px;
  margin-inline: auto;
  text-align: left;
}
.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.hero__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.hero__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 640px;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}

/* Section heading pattern (unified <h2> across pages) */
.section-heading {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: var(--space-8) 0 var(--space-4);
}
.section-lead {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 640px;
}

/* Universal button hierarchy (extends existing .btn) */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.btn-secondary:hover,
a.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--bg-alt);
  transform: translateY(-1px);
}
.btn-ghost,
a.btn-ghost {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.btn-ghost:hover {
  text-decoration: underline;
}

/* Focus ring (accessibility) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Refined pricing tier grid (段階3 更新) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.pricing-grid .price-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pricing-grid .price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--muted);
}
.pricing-grid .price-card.highlight {
  border-width: 2px;
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  position: relative;
}
.pricing-grid .price-card h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pricing-grid .price-card .price {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text);
  line-height: var(--lh-tight);
  margin: 0;
}
.pricing-grid .price-card .price small {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.pricing-grid .price-card .price-unit {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin: 0;
  flex-grow: 1;
}

/* Refined section spacing (段階3) */
main > section,
main > article {
  margin-bottom: var(--space-8);
}
main > section:last-child,
main > article:last-child {
  margin-bottom: var(--space-10);
}

/* Refined trust signals (段階3 更新: 上位配置) */
.trust-signals {
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

/* Sticky CTA on mobile (bottom bar for pricing pages) */
@media (max-width: 640px) {
  .page-hero { padding: var(--space-6) var(--space-4) var(--space-5); }
  .hero__title { font-size: clamp(28px, 7vw, 36px); }
  .hero__lead { font-size: var(--fs-base); }
  .section-heading { font-size: var(--fs-xl); margin-top: var(--space-6); }
  .pricing-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Consistent link style across body */
main a:not([class*="btn"]):not([class*="nav"]) {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
main a:not([class*="btn"]):not([class*="nav"]):hover {
  text-decoration-color: var(--accent);
}

/* Refined h1/h2 baseline for pages without .page-hero (fallback rhythm) */
main > h1:first-child,
main article > h1:first-child,
main section > h1:first-child {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: var(--space-6) 0 var(--space-4);
}