/* ============================================================
   Phase 1 Global Patterns (2026-07-01 editorial redesign)
   opt-in utility class 集合。既存 CSS を壊さない設計:
   - .reading-progress    : スクロール進捗の 2px 粋 bar (JS ゼロ)
   - .chapter-numeral     : Bodoni Moda 巨大 outline 数字 (章 marker)
   - .chapter-frontispiece: 章冒頭の frontispiece レイアウト
   - .hairline-rule       : 章境界の 1px 罫線
   - .reveal              : view-timeline 連動 reveal
   - .stack               : 縦 stack + rhythm
   - .grid-editorial      : 12col named grid + subgrid 継承
   - .eyebrow-en          : Inter 大文字 eyebrow
   - .frontispiece-title  : Zen Old Mincho 大見出し
   - .prose               : 本文組版 (measure + pretty + hanging)
   ============================================================ */

/* ---------- View Transitions (Phase 1 Foundation) ---------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
  }
}

/* ============================================================
   Reading progress bar
   上端 2px 粋、animation-timeline: scroll(root block) で駆動。
   JS ゼロ、非対応ブラウザは display:none (壊れない fallback)。
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.reading-progress::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--color-iki);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .reading-progress::after {
    animation: rp-scroll linear;
    animation-timeline: scroll(root block);
  }
  @keyframes rp-scroll {
    to { transform: scaleX(1); }
  }
}
@supports not (animation-timeline: scroll()) {
  .reading-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ============================================================
   Chapter numeral — 巨大 Bodoni Moda 900 outline
   text-stroke で紙面を汚さず、章の存在感だけを与える。
   Firefox / 一部 WebView は @supports 分岐で filled numeral に fallback。
   ============================================================ */
.chapter-numeral {
  font-family: var(--font-serif-numeric);
  font-size: var(--fs-6);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  display: inline-block;
  color: var(--color-iki);
}
@supports (-webkit-text-stroke: 1px black) {
  .chapter-numeral {
    -webkit-text-stroke: 1.2px var(--color-iki);
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ============================================================
   Chapter frontispiece — 章冒頭 (hairline + numeral + eyebrow + title)
   書籍の章扉に相当する骨格。全 6 章に共通で用いる。
   ============================================================ */
.chapter-frontispiece {
  padding-block: var(--chapter-gap) 0;
  margin-bottom: var(--pad-major);
  border-top: 1px solid var(--color-line);
  padding-top: var(--pad-major);
}
.chapter-frontispiece__inner {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.chapter-frontispiece__numeral {
  /* .chapter-numeral のスタイル継承 */
  line-height: 0.85;
  align-self: end;
}
.chapter-frontispiece__body {
  padding-bottom: 0.15em;
}
.chapter-frontispiece__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-mute);
  margin-bottom: 12px;
}
.chapter-frontispiece__title {
  font-family: var(--font-jp-mincho);
  font-size: var(--fs-3);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .015em;
  margin: 0;
  text-wrap: balance;
  color: var(--color-ink);
}
.chapter-frontispiece__lead {
  font-family: var(--font-jp);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--color-sub);
  max-width: var(--measure);
  margin-top: 20px;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}
@media (max-width: 640px) {
  .chapter-frontispiece__inner {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }
  .chapter-frontispiece__numeral {
    font-size: clamp(48px, 12vw, 72px);
    line-height: 1;
    margin-bottom: 16px;
  }
}

/* ============================================================
   Hairline rule — 罫線 (章境界・区切り)
   ============================================================ */
.hairline-rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--chapter-gap) var(--pad-major);
}
.hairline-rule--strong {
  border-top-color: var(--color-ink);
  opacity: .14;
}
.hairline-rule--accent {
  border-top: 2px solid var(--color-iki);
}

/* ============================================================
   Reveal — 章の入場アニメーション
   animation-timeline: view() で JS ゼロ、非対応時は静的最終状態
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
}
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: reveal-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  @keyframes reveal-rise {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Editorial typography utilities
   ============================================================ */

/* Zen Old Mincho の大見出し (Hero H1 / Pull quote / 章タイトル) */
.mincho {
  font-family: var(--font-jp-mincho);
  letter-spacing: .015em;
  font-feature-settings: "palt" 1, "kern" 1;
}
.frontispiece-title {
  font-family: var(--font-jp-mincho);
  font-size: var(--fs-4);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--color-ink);
}
.frontispiece-title--large {
  font-size: var(--fs-5);
  line-height: 1.25;
}

/* Inter 大文字 eyebrow */
.eyebrow-en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-mute);
  display: block;
  font-feature-settings: "ss01" 1;
}

/* Pull quote (Zen Old Mincho + hanging-punctuation) */
.pull-quote {
  font-family: var(--font-jp-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--color-ink);
  hanging-punctuation: first allow-end last;
  text-wrap: pretty;
  max-width: var(--measure);
}
.pull-quote::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-iki);
  margin-bottom: 24px;
}
.pull-quote__cite {
  display: block;
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--color-mute);
  margin-top: 20px;
}

/* Prose (本文組版) */
.prose {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.95;
  color: var(--color-ink);
  max-width: var(--measure);
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}
.prose > * + * {
  margin-top: var(--pad-minor);
}

/* ============================================================
   Stack — 縦 stack の rhythm
   .stack > * + * に margin-block-start が自動で入る (owl selector)
   ============================================================ */
.stack > * + * {
  margin-block-start: var(--pad-minor);
}
.stack--tight > * + * {
  margin-block-start: var(--pad-tight);
}
.stack--major > * + * {
  margin-block-start: var(--pad-major);
}

/* ============================================================
   Editorial grid (12col named grid + subgrid)
   opt-in で使用。data-grid="editorial" の section で継承。
   ============================================================ */
.grid-editorial {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad-x), 1fr)
    [main-start] repeat(12, minmax(0, 1fr))
    [main-end] minmax(var(--pad-x), 1fr)
    [full-end];
  column-gap: var(--gutter);
}
.grid-editorial > * {
  grid-column: main;
}
.grid-editorial > .full-bleed {
  grid-column: full;
}
.grid-editorial > .main-col-half {
  grid-column: main-start / span 6;
}
.grid-editorial > .main-col-third {
  grid-column: main-start / span 4;
}
.grid-editorial > .main-col-two-third {
  grid-column: main-start / span 8;
}

/* ============================================================
   Colophon (書籍奥付風 footer 補助)
   ============================================================ */
.colophon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--color-mute);
  letter-spacing: .06em;
}
.colophon dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-sub);
}
.colophon dd {
  font-family: var(--font-jp);
  font-weight: 500;
  margin: 0;
  letter-spacing: .02em;
}

/* ============================================================
   Weight-only hierarchy — link / button の統一ルール
   粋は「操作可能」だけに退避 (link underline / focus ring / progress)
   ============================================================ */
.link-iki {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-iki);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-micro) var(--ease-standard);
}
.link-iki:hover {
  text-decoration-color: var(--color-ink);
}

/* Focus ring (全 focusable の統一 override) */
:focus-visible {
  outline: 2px solid var(--color-iki);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Phase 2C: Why KOHO Editorial — Bodoni numeral + evidence 1 line
   ============================================================ */
.home-reasons--v2 {
  background: var(--paper-2);
  padding-block: clamp(96px, 12vw, 160px);
}
.home-reasons__intro--v2 {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(56px, 7vw, 88px);
  text-align: center;
}
.home-reasons__heading--mincho {
  font-family: var(--font-jp-mincho);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .015em;
  text-wrap: balance;
  margin: 16px 0 20px;
  color: var(--color-ink);
}
.home-reasons__lead-v2 {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--color-sub);
  max-width: 42ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.home-reasons__cards--v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ============================================================
   4 card version — subgrid で全カード横断の行揃えを実現
   grid rows: [numeral] [body-header-border] [evidence] [title] [text]
   各カードは grid-row: span 5 で全 5 行を継承、subgrid で列も継承。
   ============================================================ */
.home-reasons__cards--four {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  gap: 0 clamp(24px, 3vw, 40px);
  align-items: start;
}
.home-reasons__cards--four .home-reasons__card--v2 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;
  height: 100%;
}
.home-reasons__cards--four .home-reasons__numeral {
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  margin: 0 0 8px;
}
.home-reasons__cards--four .home-reasons__body {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding-top: 8px;
  border-top: 1px solid var(--color-ink-08);
  gap: 0;
}
.home-reasons__cards--four .home-reasons__evidence {
  grid-row: 1;
  margin: 12px 0 0;
  min-height: 1.5em;
}
.home-reasons__cards--four .home-reasons__title-v2 {
  grid-row: 2;
  margin: 12px 0 16px;
  min-height: 3.2em;
  align-content: start;
}
.home-reasons__cards--four .home-reasons__text-v2 {
  grid-row: 3;
  margin: 0;
  align-self: start;
}

/* Tablet — 2×2 (2 rows × 2 cols)、5 行 subgrid を 2 段に */
@media (max-width: 1100px) {
  .home-reasons__cards--four {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto auto auto 1fr;
    row-gap: 48px;
  }
}
@media (max-width: 600px) {
  .home-reasons__cards--four {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 48px;
    align-items: start;
  }
  .home-reasons__cards--four .home-reasons__card--v2 {
    grid-row: auto;
    grid-template-rows: auto 1fr;
  }
  .home-reasons__cards--four .home-reasons__body {
    grid-row: auto;
    grid-template-rows: none;
  }
  .home-reasons__cards--four .home-reasons__evidence,
  .home-reasons__cards--four .home-reasons__title-v2,
  .home-reasons__cards--four .home-reasons__text-v2 {
    grid-row: auto;
    min-height: 0;
  }
}
@media (max-width: 900px) {
  .home-reasons__cards--v2:not(.home-reasons__cards--four) {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* subgrid 非対応ブラウザの fallback (Safari <16, Firefox <71 等) */
@supports not (grid-template-rows: subgrid) {
  .home-reasons__cards--four {
    grid-template-rows: auto;
  }
  .home-reasons__cards--four .home-reasons__card--v2 {
    grid-template-rows: none;
    grid-row: auto;
  }
  .home-reasons__cards--four .home-reasons__body {
    grid-template-rows: none;
    grid-row: auto;
  }
  .home-reasons__cards--four .home-reasons__evidence,
  .home-reasons__cards--four .home-reasons__title-v2,
  .home-reasons__cards--four .home-reasons__text-v2 {
    grid-row: auto;
  }
}
.home-reasons__card--v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
}
.home-reasons__numeral {
  display: block;
  font-family: var(--font-serif-numeric);
  font-size: clamp(72px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-iki);
}
@supports (-webkit-text-stroke: 1px black) {
  .home-reasons__numeral {
    -webkit-text-stroke: 1.5px var(--color-iki);
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.home-reasons__body {
  padding-top: 8px;
  border-top: 1px solid var(--color-ink-08);
}
.home-reasons__evidence {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-mute);
  margin: 12px 0 0;
}
.home-reasons__evidence {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--color-sub);
}
.home-reasons__evidence-marker {
  width: 16px;
  height: 2px;
  background: var(--color-iki);
  display: block;
  flex-shrink: 0;
}
.home-reasons__title-v2 {
  font-family: var(--font-jp);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .015em;
  margin: 12px 0 16px;
  color: var(--color-ink);
  text-wrap: balance;
}
.home-reasons__text-v2 {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--color-sub);
  max-width: 32ch;
  margin: 0;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}

/* ============================================================
   Phase 6: Why KOHO — Team note aside (2026-07 チーム編成の告知)
   4 USP カードの下に editorial callout を添える。
   「代表 = 制作 + お客様専用担当者」の一体化 USP を明示。
   ============================================================ */
.home-reasons__team-note {
  max-width: 900px;
  margin-inline: auto;
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--color-ink-08);
  position: relative;
}
.home-reasons__team-note::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-iki);
}
.home-reasons__team-note-inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.home-reasons__team-note .eyebrow-en {
  margin-bottom: 16px;
}
.home-reasons__team-title {
  font-family: var(--font-jp-mincho);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .015em;
  color: var(--color-ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.home-reasons__team-title .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 900;
  color: var(--color-iki);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0 4px;
  font-size: 1.1em;
  letter-spacing: 0;
}
@supports (-webkit-text-stroke: 1px black) {
  .home-reasons__team-title .numeric {
    -webkit-text-stroke: 1px var(--color-iki);
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.home-reasons__team-text {
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--color-sub);
  margin: 0;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}
.home-reasons__team-text strong {
  font-weight: 700;
  color: var(--color-ink);
}
.home-reasons__team-text .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  margin: 0 2px;
}

/* ============================================================
   Phase 5: PRICING v2 — Why KOHO テイストで再構築 (Chapter 04)
   Zen Old Mincho H2 + Bodoni Moda 巨大価格 + editorial polish
   ============================================================ */
.pricing-intro__heading--v2 {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(56px, 7vw, 96px);
  text-align: center;
}
.pricing-intro__heading--v2 .eyebrow-en {
  margin-bottom: 20px;
}
.pricing-intro__title--mincho {
  font-family: var(--font-jp-mincho);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
  text-wrap: balance;
  margin: 0 0 32px;
  color: var(--color-ink);
}
.pricing-intro__lead-v2 {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--color-ink);
  margin: 0;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}
.pricing-intro__lead-v2 .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  margin: 0 2px;
  font-size: 1.1em;
  letter-spacing: -.01em;
}
.pricing-intro__lead-normal {
  color: var(--color-mute);
  font-size: .85em;
}
.pricing-intro__lead-normal .numeric {
  color: var(--color-mute);
  font-weight: 500;
  font-size: 1em;
}

/* Pricing card enhancement — 巨大 Bodoni Moda 価格を editorial に */
.pricing-card__price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 16px 0 12px !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.pricing-card__price-yen {
  font-family: var(--font-serif-numeric) !important;
  font-size: clamp(24px, 2.6vw, 36px) !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  letter-spacing: -.01em !important;
  align-self: flex-start !important;
  margin-top: 0.4em !important;
}
.pricing-card__price-num {
  font-family: var(--font-serif-numeric) !important;
  font-size: clamp(56px, 8vw, 100px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  color: var(--color-ink) !important;
  display: inline-block !important;
}

/* Sub price (初期費用) を Bodoni + editorial に */
.pricing-card__sub-price strong {
  font-family: var(--font-serif-numeric) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  letter-spacing: -.01em !important;
}

/* Pricing intro section 全体を目立たせる背景に */
.pricing-intro {
  background: var(--paper-2);
  position: relative;
}
.pricing-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-line);
}

/* Tier price を Bodoni Moda に */
.tier-card__price {
  font-family: var(--font-serif-numeric) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  letter-spacing: -.01em !important;
  font-size: 28px !important;
}
.tier-card__price-unit {
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  color: var(--color-mute) !important;
  margin-left: 2px !important;
}
.tier-card--current .tier-card__price {
  font-size: 32px !important;
  color: var(--color-iki) !important;
}
@supports (-webkit-text-stroke: 1px black) {
  .tier-card--current .tier-card__price {
    -webkit-text-stroke: 0;
  }
}

/* ============================================================
   Phase 4: FEATURE v3 — Why KOHO テイストで再構築 (Chapter 03)
   6 相談を editorial grid (3×2) に、Bodoni numeral outline + evidence 1 行
   ============================================================ */
.home-concerns--v3 {
  background: var(--paper);
  padding-block: clamp(96px, 12vw, 160px);
  border-top: 1px solid var(--color-line);
}
.home-concerns--v3__intro {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}
.home-concerns--v3__heading {
  font-family: var(--font-jp-mincho);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .015em;
  text-wrap: balance;
  margin: 16px 0 20px;
  color: var(--color-ink);
}
.home-concerns--v3__lead {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--color-sub);
  max-width: 44ch;
  margin-inline: auto;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}

.home-concerns--v3__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   FEATURE cards — subgrid で全 6 カード横断 5 行揃え (A 型対応)
   grid rows: [numeral] [body-border] [evidence] [title] [text]
   3×2 grid で 5 行 × 2 段 = 10 行を確保、各 card は subgrid で 5 行継承
   ============================================================ */
.home-concerns--v3__cards--aligned {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto 1fr auto auto auto auto 1fr;
  row-gap: clamp(48px, 5vw, 72px);
  column-gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;
  height: 100%;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__numeral {
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  margin: 0 0 8px;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__body {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding-top: 8px;
  border-top: 1px solid var(--color-ink-08);
  gap: 0;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__evidence {
  grid-row: 1;
  margin: 12px 0 0;
  min-height: 1.5em;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__title {
  grid-row: 2;
  margin: 12px 0 16px;
  min-height: 3.2em;
  align-content: start;
}
.home-concerns--v3__cards--aligned .home-concerns--v3__text {
  grid-row: 3;
  margin: 0;
  align-self: start;
}

@media (max-width: 900px) {
  .home-concerns--v3__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 32px;
  }
  .home-concerns--v3__cards--aligned {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:
      auto auto auto auto 1fr
      auto auto auto auto 1fr
      auto auto auto auto 1fr;
  }
}
@media (max-width: 640px) {
  .home-concerns--v3__cards {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .home-concerns--v3__cards--aligned {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 48px;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__card {
    grid-row: auto;
    grid-template-rows: auto 1fr;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__body {
    grid-row: auto;
    grid-template-rows: none;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__evidence,
  .home-concerns--v3__cards--aligned .home-concerns--v3__title,
  .home-concerns--v3__cards--aligned .home-concerns--v3__text {
    grid-row: auto;
    min-height: 0;
  }
}
/* Fallback for browsers without subgrid support */
@supports not (grid-template-rows: subgrid) {
  .home-concerns--v3__cards--aligned {
    grid-template-rows: auto;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__card {
    grid-template-rows: none;
    grid-row: auto;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__body {
    grid-template-rows: none;
    grid-row: auto;
  }
  .home-concerns--v3__cards--aligned .home-concerns--v3__evidence,
  .home-concerns--v3__cards--aligned .home-concerns--v3__title,
  .home-concerns--v3__cards--aligned .home-concerns--v3__text {
    grid-row: auto;
  }
}

.home-concerns--v3__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
}
.home-concerns--v3__numeral {
  display: block;
  font-family: var(--font-serif-numeric);
  font-size: clamp(72px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-iki);
}
@supports (-webkit-text-stroke: 1px black) {
  .home-concerns--v3__numeral {
    -webkit-text-stroke: 1.5px var(--color-iki);
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.home-concerns--v3__body {
  padding-top: 8px;
  border-top: 1px solid var(--color-ink-08);
}
.home-concerns--v3__evidence {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-sub);
  margin: 12px 0 0;
}
.home-concerns--v3__evidence-marker {
  width: 16px;
  height: 2px;
  background: var(--color-iki);
  display: block;
  flex-shrink: 0;
}
.home-concerns--v3__title {
  font-family: var(--font-jp);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .015em;
  margin: 12px 0 16px;
  color: var(--color-ink);
  text-wrap: balance;
}
.home-concerns--v3__text {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--color-sub);
  max-width: 32ch;
  margin: 0;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}

/* 閉じ: 「まずは現状を、お知らせください。」 */
.home-concerns--v3__closing {
  font-family: var(--font-jp-mincho);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  color: var(--color-ink);
  text-align: center;
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(48px, 5vw, 64px);
  border-top: 1px solid var(--color-line);
  max-width: 720px;
  margin-inline: auto;
}

/* ============================================================
   Phase 3 D: Footer Colophon (書籍奥付風 dl)
   ============================================================ */
.site-footer__colophon {
  max-width: 720px;
  margin: 0 auto 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  grid-template-columns: 92px 1fr;
  gap: 8px 32px;
  color: rgba(255, 255, 255, .55);
}
.site-footer__colophon dt {
  color: rgba(255, 255, 255, .35);
  letter-spacing: .28em;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding-top: 3px;
}
.site-footer__colophon dd {
  font-family: var(--font-jp);
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .04em;
  margin: 0;
}
.site-footer__colophon .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0 2px;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .site-footer__colophon {
    grid-template-columns: 72px 1fr;
    gap: 4px 20px;
    margin-bottom: 32px;
  }
  .site-footer__colophon dt {
    font-size: 9px;
    letter-spacing: .22em;
  }
  .site-footer__colophon dd {
    font-size: 11px;
  }
}



/* ============================================================
   Phase 7: PRICE Dark Takeover (Chapter 04 の最強視覚 breakpoint)
   Hero と対をなす「答え」の Hero、min-height:100dvh、colossal Bodoni ¥12,800
   ============================================================ */
.pricing-intro--dark {
  background: #0B0B0B;
  color: #fff;
  min-height: 100dvh;
  padding-block: clamp(96px, 12vw, 160px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  border-block: none;
}
.pricing-intro--dark::before {
  content: none;
}
.pricing-intro__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 22% 10%, rgba(126,180,226,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 90%, rgba(126,180,226,.08) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-intro--dark .pricing-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--pad-x, clamp(20px, 4vw, 32px));
}

/* Heading (dark 版) */
.pricing-intro__heading--dark {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
  text-align: center;
}
.pricing-intro__heading--dark .eyebrow-en {
  color: rgba(255,255,255,.55);
  margin-bottom: 20px;
  padding-left: 24px;
  position: relative;
  display: inline-block;
}
.pricing-intro__heading--dark .eyebrow-en::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 2px;
  background: var(--color-iki);
}
.pricing-intro__heading--dark .pricing-intro__title--mincho {
  font-family: var(--font-jp-mincho);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #fff;
  margin: 0 0 24px;
  text-wrap: balance;
  text-rendering: geometricPrecision;
}
/* line span で「間 (ま)」を明示的に取る (jp_premium 診断確定 fix) */
.pricing-intro__heading--dark .pricing-intro__title--mincho .line {
  display: block;
}
.pricing-intro__heading--dark .pricing-intro__title--mincho .line + .line {
  margin-top: .35em;
}
.pricing-intro__lead-dark {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
  margin: 0;
  text-wrap: pretty;
}

/* Dark pricing card */
.pricing-card--dark {
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 40px 80px -20px rgba(0,0,0,.6);
  max-width: 900px;
  margin-inline: auto;
  color: #fff;
  position: relative;
}

.pricing-card__label--dark {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-iki);
  margin: 0 0 32px;
  text-align: center;
  padding: 6px 14px;
  border: 1px solid rgba(126,180,226,.35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-inline: auto;
  justify-self: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Colossal price block */
.pricing-card__colossal {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pricing-card__old-price {
  font-family: var(--font-jp);
  font-size: 15px;
  color: rgba(255,255,255,.42);
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.pricing-card__old-price s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.35);
}
.pricing-card__old-price .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 500;
  color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
  margin: 0 2px;
}

.pricing-card__price--colossal {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: #fff !important;
}
.pricing-card__price--colossal .pricing-card__price-yen {
  font-family: var(--font-serif-numeric) !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  font-weight: 500 !important;
  color: #fff !important;
  line-height: 1 !important;
  align-self: flex-start !important;
  margin-top: 0.35em !important;
  letter-spacing: -.02em !important;
}
.pricing-card__price--colossal .pricing-card__price-num {
  font-family: var(--font-serif-numeric) !important;
  font-size: clamp(120px, 22vw, 320px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 0.9 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  display: inline-block !important;
  text-shadow: 0 4px 40px rgba(126,180,226,.15);
}
.pricing-card__price--colossal .pricing-card__price-unit {
  font-family: var(--font-jp) !important;
  font-size: clamp(20px, 2.4vw, 32px) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.72) !important;
  margin-left: 8px !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  align-self: flex-end !important;
  padding-bottom: 0.4em !important;
}
.pricing-card__price-caption {
  font-family: var(--font-jp);
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .12em;
  margin: 16px 0 0;
  text-align: center;
}

/* Sub price (初期費用) */
.pricing-card__sub-price--dark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: rgba(255,255,255,.72);
  margin: 0 0 32px;
  letter-spacing: .04em;
}
.pricing-card__sub-label {
  color: rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing: .1em;
}
.pricing-card__sub-price--dark strong {
  font-family: var(--font-serif-numeric) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: -.01em !important;
}
.pricing-card__sub-price--dark em {
  color: rgba(255,255,255,.42);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .06em;
}

/* Chips (含まれる内容) */
.pricing-card__chips--dark {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pricing-card__chips--dark li {
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  letter-spacing: .04em;
  background: rgba(255,255,255,.04);
}
.pricing-card__chips--dark li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-iki);
  margin-right: 8px;
  vertical-align: middle;
}

/* CTA */
.pricing-card__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pricing-card__button--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform var(--dur-standard) var(--ease-standard),
              background var(--dur-standard) var(--ease-standard),
              box-shadow var(--dur-standard) var(--ease-standard);
  min-width: 260px;
}
.pricing-card__button--dark:hover,
.pricing-card__button--dark:focus-visible {
  background: var(--color-iki);
  color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(126,180,226,.28);
}
.pricing-card__button--ghost-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 28px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color var(--dur-standard) var(--ease-standard),
              background var(--dur-standard) var(--ease-standard);
  min-width: 260px;
}
.pricing-card__button--ghost-dark:hover,
.pricing-card__button--ghost-dark:focus-visible {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.06);
}

.pricing-card__support--dark {
  font-family: var(--font-jp);
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align: center;
  margin: 0;
  letter-spacing: .06em;
}

/* Tier section を dark palette に合わせて調整 */
.pricing-intro--dark .tier-section {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.pricing-intro--dark .tier-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.pricing-intro--dark .tier-section__head .eyebrow {
  color: rgba(255,255,255,.55);
}
.pricing-intro--dark .tier-section__head h3 {
  color: #fff;
  font-family: var(--font-jp-mincho);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: .02em;
  margin: 12px 0 16px;
}
.pricing-intro--dark .tier-section__head p {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.95;
  max-width: 640px;
  margin-inline: auto;
}
.pricing-intro--dark .tier-progress {
  color: #fff;
}
.pricing-intro--dark .tier-progress__eyebrow {
  color: rgba(255,255,255,.55);
}
.pricing-intro--dark .tier-progress__count {
  color: #fff !important;
}
.pricing-intro--dark .tier-progress__count-current {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-progress__count-sep,
.pricing-intro--dark .tier-progress__count-total,
.pricing-intro--dark .tier-progress__count-unit {
  color: rgba(255,255,255,.55) !important;
}
.pricing-intro--dark .tier-progress__bar {
  background: rgba(255,255,255,.08);
}
.pricing-intro--dark .tier-progress__fill {
  background: var(--color-iki);
}
.pricing-intro--dark .tier-progress__hint {
  color: rgba(255,255,255,.72);
}
.pricing-intro--dark .tier-progress__hint strong {
  color: var(--color-iki);
}
.pricing-intro--dark .tier-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.pricing-intro--dark .tier-card--current {
  background: rgba(126,180,226,.10);
  border-color: rgba(126,180,226,.55);
}
.pricing-intro--dark .tier-card__rank {
  color: rgba(255,255,255,.72);
}
.pricing-intro--dark .tier-card--current .tier-card__rank {
  color: var(--color-iki);
}
.pricing-intro--dark .tier-card__price {
  color: #fff !important;
}
.pricing-intro--dark .tier-card--current .tier-card__price {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-card__price-unit {
  color: rgba(255,255,255,.55) !important;
}
.pricing-intro--dark .tier-card__meta {
  color: rgba(255,255,255,.55);
}
.pricing-intro--dark .tier-card__badge {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}
.pricing-intro--dark .tier-card--current .tier-card__badge {
  background: var(--color-iki);
  color: var(--color-ink);
}
.pricing-intro--dark .tier-card--regular {
  border-style: dashed;
  border-color: rgba(255,255,255,.20);
}
.pricing-intro--dark .tier-savings {
  background: rgba(126,180,226,.06);
  border: 1px solid rgba(126,180,226,.28);
  color: #fff;
  padding: 24px 28px;
  border-radius: 14px;
  margin-top: 32px;
}
.pricing-intro--dark .tier-savings__label {
  color: var(--color-iki);
}
.pricing-intro--dark .tier-savings__main {
  color: #fff;
}
.pricing-intro--dark .tier-savings__main strong {
  color: var(--color-iki);
}
.pricing-intro--dark .tier-savings__sub {
  color: rgba(255,255,255,.72);
}

/* Mobile — colossal を維持しつつ overflow なくスケール */
@media (max-width: 640px) {
  .pricing-intro--dark {
    min-height: auto;
    padding-block: clamp(72px, 12vw, 112px);
  }
  .pricing-intro--dark .pricing-intro__inner {
    padding-inline: 16px;
  }
  .pricing-intro__heading--dark .pricing-intro__title--mincho {
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.35;
  }
  .pricing-card--dark {
    padding: 28px 18px;
    border-radius: 16px;
    overflow: hidden;
  }
  .pricing-card__label--dark {
    font-size: 10px;
    letter-spacing: .16em;
    white-space: normal;
    text-align: center;
    padding: 6px 12px;
    line-height: 1.4;
  }
  .pricing-card__colossal {
    margin-bottom: 28px;
    padding-bottom: 28px;
  }
  .pricing-card__price--colossal {
    gap: 2px !important;
  }
  .pricing-card__price--colossal .pricing-card__price-num {
    font-size: clamp(56px, 18vw, 90px) !important;
  }
  .pricing-card__price--colossal .pricing-card__price-yen {
    font-size: 26px !important;
    margin-top: 0.35em !important;
  }
  .pricing-card__price--colossal .pricing-card__price-unit {
    font-size: 14px !important;
    padding-bottom: 0.3em !important;
    margin-left: 4px !important;
  }
  .pricing-card__chips--dark {
    gap: 6px;
    margin-bottom: 28px;
  }
  .pricing-card__chips--dark li {
    font-size: 11px;
    padding: 6px 10px;
    letter-spacing: .02em;
  }
  .pricing-card__actions {
    flex-direction: column;
    gap: 10px;
  }
  .pricing-card__button--dark,
  .pricing-card__button--ghost-dark {
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
    font-size: 13px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-card__price--colossal .pricing-card__price-num {
    text-shadow: none;
  }
}

/* ============================================================
   Phase 8: PRICE S-rank polish (world-class jury による評価反映)
   1. Colossal 数字の OpenType 彫り込み (opsz 96 + ss01/tnum/lnum)
   2. External anchor line (他社相場 vs KOHO)
   3. Urgency line (Tier 1 残り 15 枠)
   4. H2 → colossal 間の呼吸帯 (min 120px)
   5. Tier section を accordion 折りたたみ (default 閉)
   6. Hero card の情報密度低減 (caption/sub-price/support 削除、主題→補注を分離)
   ============================================================ */

/* --- 呼吸帯: H2 と Card の間に「間」--- */
.pricing-intro--dark .pricing-intro__heading--dark {
  margin-bottom: clamp(72px, 9vw, 128px);
}

/* --- Colossal 数字 OpenType 彫り込み --- */
.pricing-card__price--colossal .pricing-card__price-num {
  font-variation-settings: "opsz" 96, "wght" 900 !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "ss02" 1, "kern" 1 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-optical-sizing: auto !important;
}
.pricing-card__price--colossal .pricing-card__price-yen {
  font-variation-settings: "opsz" 48, "wght" 500 !important;
  font-feature-settings: "kern" 1 !important;
  font-optical-sizing: auto !important;
}
.pricing-card__old-price .numeric {
  font-variation-settings: "opsz" 20, "wght" 500 !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* --- Hero card (pricing-card--hero) --- */
.pricing-card--hero {
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px) !important;
}
.pricing-card--hero .pricing-card__colossal {
  margin-bottom: 40px;
  padding-bottom: 40px;
}

/* --- External anchor line --- */
.pricing-card__external-anchor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .06em;
  margin: 24px 0 0;
  padding: 8px 16px;
  border: 1px solid rgba(126, 180, 226, .28);
  border-radius: 999px;
  background: rgba(126, 180, 226, .04);
  justify-self: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pricing-card__external-anchor .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  margin: 0 2px;
}
.pricing-card__anchor-mark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-iki);
  box-shadow: 0 0 8px rgba(126, 180, 226, .55);
  flex-shrink: 0;
}

/* --- Urgency line (Tier 1 残り 15 枠) --- */
.pricing-card__urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .08em;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.pricing-card__urgency .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: var(--color-iki);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  margin: 0 2px;
  font-size: 14px;
}
.pricing-card__urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-iki);
  box-shadow: 0 0 12px rgba(126, 180, 226, .65);
  flex-shrink: 0;
  animation: urgency-pulse 2.4s ease-in-out infinite;
}
@keyframes urgency-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card__urgency-dot { animation: none; }
}

/* --- Tier accordion (Chapter 04.2) --- */
.tier-accordion {
  margin-top: clamp(64px, 8vw, 96px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: clamp(48px, 6vw, 72px);
  max-width: 900px;
  margin-inline: auto;
}
.tier-accordion[open] {
  padding-bottom: clamp(48px, 6vw, 72px);
}
.tier-accordion__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  transition: background .2s, border-color .2s;
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  position: relative;
}
.tier-accordion__summary::-webkit-details-marker { display: none; }
.tier-accordion__summary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(126, 180, 226, .35);
}
.tier-accordion__eyebrow {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.tier-accordion__title {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.tier-accordion__indicator {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 20px;
  color: var(--color-iki);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  line-height: 1;
}
.tier-accordion[open] .tier-accordion__indicator {
  transform: translateY(-50%) rotate(45deg);
}

/* nested tier-section の余白調整 */
.tier-section--nested {
  margin-top: clamp(48px, 6vw, 72px) !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* initial-cost line (accordion 内に初期費用移動) */
.tier-section__initial-cost {
  font-family: var(--font-jp);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  margin-top: 16px;
  letter-spacing: .04em;
}
.tier-section__initial-cost strong {
  font-family: var(--font-serif-numeric) !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  letter-spacing: 0 !important;
  margin: 0 2px;
  font-size: 15px;
}

/* Mobile: 呼吸帯とアンカー */
@media (max-width: 640px) {
  .pricing-intro--dark .pricing-intro__heading--dark {
    margin-bottom: 56px;
  }
  .pricing-card__external-anchor {
    font-size: 11px;
    padding: 6px 12px;
    letter-spacing: .04em;
  }
  .pricing-card__urgency {
    font-size: 11px;
    padding-top: 20px;
    margin-top: 20px;
  }
  .tier-accordion {
    padding-top: 40px;
  }
  .tier-accordion__summary {
    padding: 16px 20px;
    max-width: 100%;
  }
  .tier-accordion__title { font-size: 13px; }
}

/* ============================================================
   Phase 9: PRICE dark cascade fix
   pages.css の .tier-progress { background: #fff } 等が
   Phase 7 の dark override を上書きしていた bug 修正。
   .pricing-intro--dark .tier-* の background/color/border を
   !important で全域上書きし、白背景で不可視だったテキストを復活。
   ============================================================ */
.pricing-intro--dark .tier-progress {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.pricing-intro--dark .tier-progress__eyebrow {
  color: rgba(255,255,255,.55) !important;
}
.pricing-intro--dark .tier-progress__eyebrow::before {
  background: var(--color-iki) !important;
}
.pricing-intro--dark .tier-progress__count {
  color: #fff !important;
}
.pricing-intro--dark .tier-progress__count-current {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-progress__count-sep,
.pricing-intro--dark .tier-progress__count-total,
.pricing-intro--dark .tier-progress__count-unit {
  color: rgba(255,255,255,.62) !important;
}
.pricing-intro--dark .tier-progress__bar {
  background: rgba(255,255,255,.08) !important;
}
.pricing-intro--dark .tier-progress__fill {
  background: var(--color-iki) !important;
}
.pricing-intro--dark .tier-progress__hint {
  color: rgba(255,255,255,.85) !important;
}
.pricing-intro--dark .tier-progress__hint strong {
  color: var(--color-iki) !important;
}

/* Tier card */
.pricing-intro--dark .tier-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.pricing-intro--dark .tier-card--current {
  background: rgba(126,180,226,.10) !important;
  border-color: rgba(126,180,226,.55) !important;
}
.pricing-intro--dark .tier-card--next {
  border-color: rgba(255,255,255,.20) !important;
}
.pricing-intro--dark .tier-card--future {
  opacity: .7 !important;
}
.pricing-intro--dark .tier-card--regular {
  border-style: dashed !important;
  border-color: rgba(255,255,255,.20) !important;
}
.pricing-intro--dark .tier-card__rank {
  color: rgba(255,255,255,.72) !important;
}
.pricing-intro--dark .tier-card--current .tier-card__rank {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-card__price {
  color: #fff !important;
}
.pricing-intro--dark .tier-card--current .tier-card__price {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-card__price-unit {
  color: rgba(255,255,255,.62) !important;
}
.pricing-intro--dark .tier-card__meta {
  color: rgba(255,255,255,.62) !important;
}
.pricing-intro--dark .tier-card__badge {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
}
.pricing-intro--dark .tier-card--current .tier-card__badge {
  background: var(--color-iki) !important;
  color: #0B0B0B !important;
}

/* Tier savings */
.pricing-intro--dark .tier-savings {
  background: rgba(126,180,226,.06) !important;
  border: 1px solid rgba(126,180,226,.28) !important;
  color: #fff !important;
}
.pricing-intro--dark .tier-savings__label {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-savings__main {
  color: #fff !important;
}
.pricing-intro--dark .tier-savings__main strong {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-savings__sub {
  color: rgba(255,255,255,.72) !important;
}

/* Tier section head */
.pricing-intro--dark .tier-section__head {
  color: #fff !important;
}
.pricing-intro--dark .tier-section__head .eyebrow {
  color: rgba(255,255,255,.55) !important;
}
.pricing-intro--dark .tier-section__head h3 {
  color: #fff !important;
}
.pricing-intro--dark .tier-section__head p {
  color: rgba(255,255,255,.72) !important;
}

/* Old price s tag も contrast 稼ぐため brightness 上げ */
.pricing-card__old-price {
  color: rgba(255,255,255,.72) !important;
}
.pricing-card__old-price s {
  text-decoration-color: rgba(255,255,255,.55) !important;
}
.pricing-card__old-price .numeric {
  color: rgba(255,255,255,.72) !important;
}

/* ============================================================
   Phase 10: Final Offer (Chapter 09.2)
   FLOW の後に置く「最後の念押し」— 年払いで初期費用無料オファー。
   悩んでいる人の背中を優しく押す editorial トーン。
   ============================================================ */
.final-push {
  background: var(--paper);
  padding-block: clamp(80px, 10vw, 128px);
  border-top: 1px solid var(--color-line);
}
.final-push__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.final-push__head .eyebrow-en {
  margin-bottom: 20px;
  color: var(--color-mute);
}
.final-push__title {
  font-family: var(--font-jp-mincho);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--color-ink);
  margin: 0 0 24px;
  text-rendering: geometricPrecision;
}
.final-push__title .line {
  display: block;
}
.final-push__title .line + .line {
  margin-top: .35em;
}
.final-push__lead {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--color-sub);
  max-width: 44ch;
  margin-inline: auto;
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}
.final-push__lead strong {
  font-weight: 700;
  color: var(--color-ink);
}
.final-push__lead .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  margin: 0 2px;
}

/* annual-card--final polish */
.annual-card--final {
  max-width: 900px;
  margin-inline: auto;
  border: 2px solid var(--color-ink) !important;
  background: var(--paper) !important;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .12) !important;
  position: relative;
}
.annual-card--final::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--color-iki);
}
.annual-card--final .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  margin: 0 2px;
}
.annual-card--final .annual-card__badge {
  background: var(--color-ink) !important;
  color: #fff !important;
}

/* 2 CTA stack (primary annual + sub sample) */
.annual-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
.annual-card__actions .annual-card__cta {
  margin-top: 0 !important;
}
.annual-card__cta-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-sub);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .15s, text-decoration-color .15s;
}
.annual-card__cta-sub:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-iki);
}

@media (max-width: 640px) {
  .final-push__title {
    font-size: clamp(24px, 6vw, 32px);
  }
  .annual-card--final {
    padding: 32px 20px !important;
  }
}

/* ============================================================
   Phase 11: PRICE 純化・editorial 深堀り
   - external anchor / chips 削除 (H8/H9 hierarchy を単一 breakpoint に純化)
   - Was / Now editorial ラベル (Wallpaper* / Cereal 見開き型)
   - Delta savings line (「月 ¥7,000 お得」で顧客への訴求を直接化)
   - Staggered fade-in reveal (IntersectionObserver トリガー)
   - Micro-motion + typography 精細調整
   ============================================================ */

/* Was / Now editorial labels */
.pricing-card__was,
.pricing-card__now {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-feature-settings: "ss01" 1, "kern" 1;
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
  top: -.06em;
}
.pricing-card__was {
  color: rgba(255,255,255,.62);
}
.pricing-card__now {
  color: var(--color-iki);
  text-shadow: 0 0 12px rgba(126,180,226,.35);
  margin-right: 8px;
}
.pricing-card__old-price {
  font-size: 16px !important;
  margin-bottom: 20px !important;
  color: rgba(255,255,255,.72) !important;
  letter-spacing: .04em;
}
.pricing-card__old-price s {
  text-decoration-color: rgba(255,255,255,.60) !important;
  text-decoration-thickness: 1.5px !important;
}
.pricing-card__old-price s .numeric {
  color: rgba(255,255,255,.72) !important;
  font-size: 18px !important;
}

/* Now label 位置調整 (colossal の左肩、¥ の上ではなく inline) */
.pricing-card__price--colossal .pricing-card__now {
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
}
.pricing-card__price--colossal {
  position: relative;
  padding-top: 2em;
}

/* Delta savings line — 「月 ¥7,000 お得 / 年間 ¥84,000 お得」*/
.pricing-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: rgba(255,255,255,.85);
  letter-spacing: .06em;
  margin: 32px auto 0 !important;
  padding: 10px 20px;
  border: 1px solid rgba(126,180,226,.35);
  border-radius: 999px;
  background: rgba(126,180,226,.06);
  justify-self: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pricing-card__delta .numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 700;
  color: var(--color-iki);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  margin: 0 2px;
  font-size: 15px;
}
.pricing-card__delta-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-iki);
  box-shadow: 0 0 12px rgba(126,180,226,.85);
  flex-shrink: 0;
  animation: delta-pulse 3s ease-in-out infinite;
}
@keyframes delta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.7); }
}

/* Minimal card 呼吸帯強化 (chips 削除で余裕) */
.pricing-card--minimal .pricing-card__colossal {
  margin-bottom: 48px !important;
  padding-bottom: 40px !important;
}
.pricing-card--minimal .pricing-card__actions {
  margin-top: 8px;
}

/* Staggered reveal animation (opacity + translateY) */
.pricing-card--minimal [data-anim-in] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.pricing-card--minimal.is-in-view [data-anim-in="1"] { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.pricing-card--minimal.is-in-view [data-anim-in="2"] { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.pricing-card--minimal.is-in-view [data-anim-in="3"] { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.pricing-card--minimal.is-in-view [data-anim-in="4"] { opacity: 1; transform: translateY(0); transition-delay: 550ms; }
.pricing-card--minimal.is-in-view [data-anim-in="5"] { opacity: 1; transform: translateY(0); transition-delay: 750ms; }
.pricing-card--minimal.is-in-view [data-anim-in="6"] { opacity: 1; transform: translateY(0); transition-delay: 950ms; }

/* Colossal price に「浮上感」 — is-in-view で subtle glow が入る */
.pricing-card--minimal.is-in-view .pricing-card__price-num {
  animation: colossal-glow 1200ms cubic-bezier(.22, 1, .36, 1) 300ms both;
}
@keyframes colossal-glow {
  0% {
    filter: drop-shadow(0 0 0 rgba(126,180,226,0));
    letter-spacing: -.02em;
  }
  40% {
    filter: drop-shadow(0 4px 24px rgba(126,180,226,.35));
  }
  100% {
    filter: drop-shadow(0 4px 40px rgba(126,180,226,.15));
    letter-spacing: -.03em;
  }
}

/* Old price に strike-through drawing animation */
.pricing-card--minimal.is-in-view .pricing-card__old-price s {
  position: relative;
  display: inline-block;
}
.pricing-card--minimal .pricing-card__old-price s {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.pricing-card--minimal .pricing-card__old-price s::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.5px;
  background: rgba(255,255,255,.60);
  width: 0;
  transform: translateY(-50%);
}
.pricing-card--minimal.is-in-view .pricing-card__old-price s::after {
  animation: strike-draw 500ms cubic-bezier(.22, 1, .36, 1) 500ms both;
}
@keyframes strike-draw {
  from { width: 0; }
  to { width: 100%; }
}

/* Reduced motion 全 opt-out */
@media (prefers-reduced-motion: reduce) {
  .pricing-card--minimal [data-anim-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pricing-card--minimal.is-in-view .pricing-card__price-num {
    animation: none !important;
    filter: none !important;
  }
  .pricing-card--minimal.is-in-view .pricing-card__old-price s::after {
    animation: none !important;
    width: 100% !important;
  }
  .pricing-card__delta-mark { animation: none; }
}

/* Mobile 調整 */
@media (max-width: 640px) {
  .pricing-card__was,
  .pricing-card__now {
    font-size: 9px;
    letter-spacing: .22em;
  }
  .pricing-card__old-price {
    font-size: 14px !important;
  }
  .pricing-card__old-price s .numeric {
    font-size: 15px !important;
  }
  .pricing-card__delta {
    font-size: 11px;
    padding: 8px 14px;
    gap: 8px;
    letter-spacing: .04em;
  }
  .pricing-card__delta .numeric {
    font-size: 12px;
  }
  .pricing-card--minimal .pricing-card__colossal {
    margin-bottom: 32px !important;
    padding-bottom: 28px !important;
  }
}

/* Mobile overflow fix for centered pills (label + delta) */
@media (max-width: 640px) {
  .pricing-card__label--dark {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    max-width: 100%;
    font-size: 9px !important;
    letter-spacing: .16em !important;
    padding: 6px 10px !important;
    white-space: normal !important;
    line-height: 1.5;
    text-align: center;
  }
  .pricing-card__delta {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 24px auto 0 !important;
    max-width: 100%;
    font-size: 10px;
    padding: 8px 12px;
    letter-spacing: .02em;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
  }
  .pricing-card__delta .numeric {
    font-size: 11px;
  }
}

/* ============================================================
   Phase 12 : Editorial Poster (2026-07-02)
   目的 : PRICE を「圧倒的安価」を伝える映画ポスター調に抜本再設計
   - Card 枠・box-shadow・inset を全廃 → 数字が背景に直接浮かぶ
   - ONE PLAN / delta / ghost-CTA / urgency の 全 pill を廃止
   - Tier accordion 内の 6 tier card box → borderless row 表に
   - Progress bar の #E5E5E5 (dark bg で浮く) を rgba white に統一
   - 数字階層 : ¥12,800 (colossal) > 月 ¥7,000 お得 (mid iki) > NORMALLY ¥19,800 (small mute)
   ============================================================ */

/* ---------- Card 枠 全廃 : 数字を背景 (#0B0B0B) に直接浮かべる ---------- */
.pricing-intro--dark .pricing-card--minimal {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 960px !important;
  margin: 40px auto 0 !important;
}

/* ---------- ONE PLAN pill → 中央 tracking-wide label ---------- */
.pricing-intro--dark .pricing-card__label--dark {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  text-align: center !important;
  font-family: var(--font-en) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  margin: 0 auto 56px !important;
  max-width: 100% !important;
}

/* ---------- Was / Now labels ---------- */
.pricing-card__now { display: none !important; }
.pricing-card__was {
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .38em !important;
  color: rgba(255,255,255,.55) !important;
  margin-right: 14px !important;
  text-transform: uppercase !important;
  top: 0 !important;
}

/* ---------- Was 行 : 中央・小・mute、strike-through は控えめに ---------- */
.pricing-intro--dark .pricing-card__old-price {
  text-align: center !important;
  font-family: var(--font-jp) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  color: rgba(255,255,255,.55) !important;
  margin: 0 auto 6px !important;
  padding-bottom: 0 !important;
  border: none !important;
  filter: none !important;
}
.pricing-intro--dark .pricing-card__old-price s {
  text-decoration-color: rgba(255,255,255,.42) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0 !important;
}
.pricing-intro--dark .pricing-card__old-price s .numeric {
  font-family: var(--font-en) !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.55) !important;
  font-variation-settings: "opsz" 20 !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* ---------- Colossal Price : 絶対主役 ---------- */
.pricing-intro--dark .pricing-card__price--colossal {
  text-align: center !important;
  margin: 8px auto 0 !important;
  padding: 0 !important;
  line-height: .88 !important;
  filter: none !important;
  animation: none !important;
}
.pricing-intro--dark .pricing-card__price-yen {
  font-family: var(--font-en) !important;
  font-size: clamp(48px, 6.5vw, 96px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  vertical-align: top !important;
  margin-right: .02em !important;
  font-variation-settings: "opsz" 96 !important;
  letter-spacing: -.02em !important;
  position: relative !important;
  top: .18em !important;
}
.pricing-intro--dark .pricing-card__price-num {
  font-family: var(--font-en) !important;
  font-size: clamp(120px, 20vw, 280px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.04em !important;
  font-variation-settings: "opsz" 96 !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1 !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.pricing-intro--dark .pricing-card__price-unit {
  font-family: var(--font-en) !important;
  font-size: clamp(20px, 2.4vw, 32px) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.72) !important;
  letter-spacing: 0 !important;
  vertical-align: baseline !important;
  margin-left: .1em !important;
  position: relative !important;
  bottom: .12em !important;
}

/* ---------- Delta pill → text-only 得感行 ---------- */
.pricing-intro--dark .pricing-card__delta {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  text-align: center !important;
  font-family: var(--font-jp) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  color: var(--color-iki) !important;
  margin: 32px auto 0 !important;
  max-width: 100% !important;
  line-height: 1.6 !important;
}
.pricing-intro--dark .pricing-card__delta .numeric {
  font-family: var(--font-en) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--color-iki) !important;
  letter-spacing: 0 !important;
  margin: 0 .12em !important;
  font-variation-settings: "opsz" 48 !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
.pricing-card__delta-mark { display: none !important; }

/* ---------- Iki accent line (poster 型 divider) ---------- */
.pricing-intro--dark .pricing-card__actions {
  position: relative !important;
  margin-top: 72px !important;
  padding-top: 40px !important;
}
.pricing-intro--dark .pricing-card__actions::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--color-iki);
  opacity: .5;
}

/* ---------- CTA : Primary はそのまま強い pill、Secondary は underline text ---------- */
.pricing-intro--dark .pricing-card__button--dark {
  min-width: 260px !important;
  height: 62px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) !important;
}
.pricing-intro--dark .pricing-card__button--ghost-dark {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: auto !important;
  height: auto !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,.32) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 8px !important;
  transition: color .3s ease, text-decoration-color .3s ease !important;
}
.pricing-intro--dark .pricing-card__button--ghost-dark:hover {
  color: #fff !important;
  text-decoration-color: rgba(255,255,255,.7) !important;
}
.pricing-intro--dark .pricing-card__button--ghost-dark::after {
  content: " →";
  margin-left: .25em;
}

/* ---------- Urgency : top border 削除、mute で控えめに ---------- */
.pricing-intro--dark .pricing-card__urgency {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 56px !important;
  text-align: center !important;
  color: rgba(255,255,255,.5) !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  line-height: 1.7 !important;
}
.pricing-intro--dark .pricing-card__urgency .numeric {
  color: rgba(255,255,255,.72) !important;
  font-family: var(--font-en) !important;
  font-weight: 600 !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  margin: 0 .1em !important;
}
.pricing-intro--dark .pricing-card__urgency-dot {
  background: var(--color-iki) !important;
  box-shadow: 0 0 10px rgba(126,180,226,.55) !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
}

/* ---------- Accordion : summary pill 廃止 → editorial header ---------- */
.pricing-intro--dark .tier-accordion {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin-top: 120px !important;
  padding-top: 80px !important;
  max-width: 960px !important;
  margin-inline: auto !important;
}
.pricing-intro--dark .tier-accordion__summary {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}
.pricing-intro--dark .tier-accordion__summary:hover {
  background: transparent !important;
}
.pricing-intro--dark .tier-accordion__eyebrow {
  font-family: var(--font-en) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
}
.pricing-intro--dark .tier-accordion__title {
  font-family: var(--font-jp) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  color: #fff !important;
}
.pricing-intro--dark .tier-accordion__indicator {
  font-family: var(--font-en) !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 20px !important;
  margin-top: 4px !important;
}

/* ---------- Tier section head : centered editorial ---------- */
.pricing-intro--dark .tier-section__head {
  text-align: center !important;
  max-width: 720px !important;
  margin: 60px auto 60px !important;
  padding: 0 !important;
}
.pricing-intro--dark .tier-section__head h3 {
  font-family: var(--font-mincho) !important;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: .04em !important;
  line-height: 1.5 !important;
  margin: 8px 0 24px !important;
}
.pricing-intro--dark .tier-section__head p {
  font-family: var(--font-jp) !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.72) !important;
  line-height: 1.9 !important;
  letter-spacing: .04em !important;
}
.pricing-intro--dark .tier-section__initial-cost {
  margin-top: 20px !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
}
.pricing-intro--dark .tier-section__initial-cost strong {
  color: #fff !important;
  font-weight: 600 !important;
}

/* ---------- Progress bar : box 廃止、水平ライン only ---------- */
.pricing-intro--dark .tier-progress {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: 720px !important;
  margin: 0 auto 60px !important;
  box-shadow: none !important;
}
.pricing-intro--dark .tier-progress__eyebrow {
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}
.pricing-intro--dark .tier-progress__row {
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.pricing-intro--dark .tier-progress__count {
  color: #fff !important;
}
.pricing-intro--dark .tier-progress__count-current {
  font-family: var(--font-en) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: var(--color-iki) !important;
  font-variation-settings: "opsz" 48 !important;
}
.pricing-intro--dark .tier-progress__count-sep,
.pricing-intro--dark .tier-progress__count-total,
.pricing-intro--dark .tier-progress__count-unit {
  font-family: var(--font-en) !important;
  font-size: 16px !important;
  color: rgba(255,255,255,.55) !important;
  margin-left: 4px !important;
}
.pricing-intro--dark .tier-progress__bar {
  border: none !important;
  background: rgba(255,255,255,.08) !important;
  height: 2px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.pricing-intro--dark .tier-progress__fill {
  background: var(--color-iki) !important;
  height: 100% !important;
  box-shadow: 0 0 8px rgba(126,180,226,.6) !important;
}
.pricing-intro--dark .tier-progress__hint {
  text-align: center !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  margin-top: 20px !important;
  line-height: 1.7 !important;
}
.pricing-intro--dark .tier-progress__hint strong {
  color: var(--color-iki) !important;
  font-weight: 600 !important;
}

/* ---------- Tier Stack : 6 box → borderless row 表 ---------- */
.pricing-intro--dark .tier-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 720px !important;
  margin: 40px auto 60px !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.pricing-intro--dark .tier-card {
  display: grid !important;
  grid-template-columns: 100px 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 22px 20px !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
}
.pricing-intro--dark .tier-card:last-child {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.pricing-intro--dark .tier-card--current {
  background: rgba(126,180,226,.06) !important;
  border-top-color: var(--color-iki) !important;
  border-top-width: 1px !important;
}
.pricing-intro--dark .tier-card--current + .tier-card {
  border-top-color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-card__rank {
  font-family: var(--font-en) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-width: auto !important;
}
.pricing-intro--dark .tier-card--current .tier-card__rank {
  color: var(--color-iki) !important;
}
.pricing-intro--dark .tier-card__main { padding: 0 !important; }
.pricing-intro--dark .tier-card__price {
  font-family: var(--font-en) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  font-variation-settings: "opsz" 48 !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  margin: 0 !important;
}
.pricing-intro--dark .tier-card--current .tier-card__price {
  color: var(--color-iki) !important;
  font-size: 30px !important;
}
.pricing-intro--dark .tier-card__price-unit {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.5) !important;
  margin-left: 2px !important;
}
.pricing-intro--dark .tier-card--current .tier-card__price-unit {
  color: rgba(126,180,226,.75) !important;
}
.pricing-intro--dark .tier-card__meta {
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  margin: 6px 0 0 !important;
  letter-spacing: .06em !important;
}
.pricing-intro--dark .tier-card__badge {
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.pricing-intro--dark .tier-card--current .tier-card__badge {
  color: var(--color-iki) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ---------- Savings summary : box 廃止 → editorial pull-line ---------- */
.pricing-intro--dark .tier-savings {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: 720px !important;
  margin: 60px auto 0 !important;
  text-align: center !important;
  box-shadow: none !important;
}
.pricing-intro--dark .tier-savings__label {
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 0 10px !important;
}
.pricing-intro--dark .tier-savings__main {
  font-family: var(--font-jp) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: .06em !important;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
}
.pricing-intro--dark .tier-savings__main strong {
  color: var(--color-iki) !important;
  font-weight: 700 !important;
  font-family: var(--font-en) !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  margin: 0 4px !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
.pricing-intro--dark .tier-savings__sub {
  font-family: var(--font-jp) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  line-height: 1.9 !important;
  max-width: 40em !important;
  margin: 20px auto 0 !important;
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 640px) {
  .pricing-intro--dark .pricing-card--minimal {
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .pricing-intro--dark .pricing-card__price--colossal {
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .pricing-intro--dark .pricing-card__price-num {
    font-size: clamp(56px, 15.5vw, 96px) !important;
    letter-spacing: -.04em !important;
  }
  .pricing-intro--dark .pricing-card__price-yen {
    font-size: clamp(28px, 6.5vw, 44px) !important;
    top: .16em !important;
  }
  .pricing-intro--dark .pricing-card__price-unit {
    font-size: 15px !important;
    bottom: .08em !important;
  }
  .pricing-intro--dark .pricing-card__delta {
    font-size: 14px !important;
  }
  .pricing-intro--dark .pricing-card__delta .numeric {
    font-size: 16px !important;
  }
  .pricing-intro--dark .pricing-card__actions {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .pricing-intro--dark .tier-card {
    grid-template-columns: 72px 1fr auto !important;
    gap: 12px !important;
    padding: 18px 12px !important;
  }
  .pricing-intro--dark .tier-card__rank { font-size: 11px !important; }
  .pricing-intro--dark .tier-card__price { font-size: 22px !important; }
  .pricing-intro--dark .tier-card--current .tier-card__price { font-size: 24px !important; }
  .pricing-intro--dark .tier-card__meta { font-size: 11px !important; }
  .pricing-intro--dark .tier-card__badge { font-size: 9px !important; letter-spacing: .16em !important; }
  .pricing-intro--dark .tier-savings__main { font-size: 15px !important; }
  .pricing-intro--dark .tier-savings__main strong { font-size: 18px !important; }
}
/* ============================================================
   PHASE 13 — Editorial Cinematic (grafted)
   Appended after Phase 12 (L2978). Overrides use !important to
   compete with Phase 12's !important cascade. All motion is
   compositor-safe (transform + opacity only), no width/height/
   margin/left animation except the whitelisted one-shot strike
   (1.5px absolutely-positioned bar, negligible reflow scope).
   ============================================================ */

/* --- Heading reveal (wire the dead [data-reveal] hook) --- */
.pricing-intro--dark .pricing-intro__heading .eyebrow-en {
  opacity: 0;
  letter-spacing: .22em;
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1),
    letter-spacing 900ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-intro__heading.is-in-view .eyebrow-en {
  opacity: .72;
  letter-spacing: .32em;
}

.pricing-intro--dark .pricing-intro__title--mincho .line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1000ms cubic-bezier(.16, 1, .3, 1),
    transform 1000ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-intro__heading.is-in-view .pricing-intro__title--mincho .line {
  opacity: 1;
  transform: none;
}
.pricing-intro--dark .pricing-intro__heading.is-in-view .pricing-intro__title--mincho .line:nth-child(1) { transition-delay: 300ms; }
.pricing-intro--dark .pricing-intro__heading.is-in-view .pricing-intro__title--mincho .line:nth-child(2) { transition-delay: 550ms; }

.pricing-intro--dark .pricing-intro__lead-dark {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 800ms cubic-bezier(.16, 1, .3, 1) 1350ms,
    transform 800ms cubic-bezier(.16, 1, .3, 1) 1350ms;
}
.pricing-intro--dark .pricing-intro__heading.is-in-view .pricing-intro__lead-dark {
  opacity: 1;
  transform: none;
}

/* --- Retime hero card [data-anim-in] stagger for editorial pacing ---
   Overrides Phase 11 L2276-2281 timings without touching the base transition.
   New chain: label 0 → old-price 350 → strike 1200 → colossal 1400 → yen 1900 → now 2000 → delta 2100 → divider 2500 → CTAs 2900 → urgency 3500
*/
.pricing-intro--dark .pricing-card--minimal [data-anim-in] {
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1) !important,
    transform 900ms cubic-bezier(.16, 1, .3, 1) !important;
}
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="1"] { transition-delay: 0ms !important; }
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="2"] { transition-delay: 350ms !important; }
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="3"] {
  transition-delay: 1400ms !important;
  transition-duration: 1100ms !important;
  transform: translateY(0) !important;
}
.pricing-intro--dark .pricing-card--minimal [data-anim-in="3"] {
  transform: translateY(20px);
}
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="4"] { transition-delay: 2100ms !important; }
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="5"] { transition-delay: 2900ms !important; }
.pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="6"] { transition-delay: 3500ms !important; }

/* --- Label letter-spacing 'open' gesture (opens on entry) --- */
.pricing-intro--dark .pricing-card__label[data-anim-in="1"] {
  letter-spacing: .24em !important;
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1) !important,
    transform 900ms cubic-bezier(.16, 1, .3, 1) !important,
    letter-spacing 900ms cubic-bezier(.16, 1, .3, 1) !important;
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__label[data-anim-in="1"] {
  letter-spacing: .32em !important;
}

/* --- Fix Phase 12 double-strike collision ---
   Kill native text-decoration on <s> so only the animated ::after bar paints.
   Retime existing @keyframes strike-draw to fire at 1200ms delay, 900ms duration,
   AFTER the anchor has dwelled ~850ms (Kahneman-correct install-then-negate).
*/
.pricing-intro--dark .pricing-card--minimal .pricing-card__old-price s {
  text-decoration: none !important;
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__old-price s::after {
  animation: strike-draw 900ms cubic-bezier(.7, 0, .3, 1) 1200ms both !important;
  height: 1.5px !important;
  background: rgba(255,255,255,.55) !important;
}

/* --- Yen symbol exhale (arrives one beat after digits parse) --- */
.pricing-intro--dark .pricing-card__price-yen {
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 500ms cubic-bezier(.16, 1, .3, 1),
    transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__price-yen {
  opacity: 1;
  transform: none;
  transition-delay: 1900ms;
}

/* --- Restore the Phase 12-broken 'Now' label as a whisper --- */
.pricing-intro--dark .pricing-card__now {
  display: inline-block !important;
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  color: rgba(255,255,255,.48) !important;
  text-transform: uppercase !important;
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(.16, 1, .3, 1),
    letter-spacing 700ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-card__price--colossal {
  position: relative;
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__now {
  opacity: 1;
  letter-spacing: .28em !important;
  transition-delay: 2000ms;
}

/* --- Iki divider draw from center (transform:scaleX, GPU-safe) ---
   Overrides Phase 12 static ::before at L2569-2578.
*/
.pricing-intro--dark .pricing-card__actions::before {
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transform-origin: center;
  transition:
    transform 800ms cubic-bezier(.16, 1, .3, 1),
    opacity 800ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__actions::before {
  transform: translateX(-50%) scaleX(1);
  opacity: .5;
  transition-delay: 2500ms;
}

/* --- CTA hover arrow nudge --- */
.pricing-intro--dark .pricing-card__button--dark .pricing-card__button-arrow {
  display: inline-block;
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .pricing-card__button--dark:hover .pricing-card__button-arrow,
.pricing-intro--dark .pricing-card__button--dark:focus-visible .pricing-card__button-arrow {
  transform: translateX(4px);
}

/* --- Urgency dot: single-shot fade + glow settle (NO infinite loop) ---
   Replaces Phase 12 static dot with a one-shot arrival that HOLDS its
   settled state. Adversarial cut of the infinite heartbeat.
*/
.pricing-intro--dark .pricing-card__urgency-dot {
  opacity: 0;
  transform: scale(.6);
  box-shadow: 0 0 0 rgba(126,180,226,0);
}
.pricing-intro--dark .pricing-card--minimal.is-in-view .pricing-card__urgency-dot {
  animation: urgency-dot-arrive 900ms cubic-bezier(.16, 1, .3, 1) 3800ms both;
}
@keyframes urgency-dot-arrive {
  0% {
    opacity: 0;
    transform: scale(.6);
    box-shadow: 0 0 0 rgba(126,180,226,0);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(126,180,226,.55);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px rgba(126,180,226,.35);
  }
}

/* --- Accordion: reveal + indicator rotation --- */
.pricing-intro--dark .tier-accordion {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1),
    transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .tier-accordion.is-in-view {
  opacity: 1;
  transform: none;
}
.pricing-intro--dark .tier-accordion__indicator {
  display: inline-block;
  transition: transform 400ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .tier-accordion[open] .tier-accordion__indicator {
  transform: rotate(45deg);
}

/* --- Progress fill sweep (transform:scaleX — replaces width animation) ---
   The fill's WIDTH stays set via inline --tier-pct (unchanged HTML).
   We add scaleX transform-origin:left to sweep it in from 0.
*/
.pricing-intro--dark .tier-progress__fill {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms cubic-bezier(.16, 1, .3, 1) 200ms;
}
.pricing-intro--dark .tier-progress.is-in-view .tier-progress__fill {
  transform: scaleX(1);
}

/* --- Tier rows cascade --- */
.pricing-intro--dark .tier-stack .tier-card {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 800ms cubic-bezier(.16, 1, .3, 1),
    transform 800ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .tier-stack.is-in-view .tier-card {
  opacity: 1;
  transform: none;
}
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(1) { transition-delay: 0ms; }
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(2) { transition-delay: 80ms; }
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(3) { transition-delay: 160ms; }
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(4) { transition-delay: 240ms; }
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(5) { transition-delay: 320ms; }
.pricing-intro--dark .tier-stack.is-in-view .tier-card:nth-child(6) { transition-delay: 400ms; }

/* --- Tier savings pull-close --- */
.pricing-intro--dark .tier-savings {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 900ms cubic-bezier(.16, 1, .3, 1),
    transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.pricing-intro--dark .tier-savings.is-in-view {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Phase 13 — CONSOLIDATED prefers-reduced-motion opt-out
   Extends L2330-2345 block. Every new selector listed explicitly.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pricing-intro--dark .pricing-intro__heading .eyebrow-en,
  .pricing-intro--dark .pricing-intro__title--mincho .line,
  .pricing-intro--dark .pricing-intro__lead-dark,
  .pricing-intro--dark .pricing-card__label[data-anim-in="1"],
  .pricing-intro--dark .pricing-card__price-yen,
  .pricing-intro--dark .pricing-card__now,
  .pricing-intro--dark .pricing-card__actions::before,
  .pricing-intro--dark .pricing-card__urgency-dot,
  .pricing-intro--dark .tier-accordion,
  .pricing-intro--dark .tier-accordion__indicator,
  .pricing-intro--dark .tier-progress__fill,
  .pricing-intro--dark .tier-stack .tier-card,
  .pricing-intro--dark .tier-savings {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    letter-spacing: unset !important;
  }
  /* Restore specific final visual states that transitions were carrying */
  .pricing-intro--dark .pricing-intro__heading .eyebrow-en { opacity: .72 !important; letter-spacing: .32em !important; }
  .pricing-intro--dark .pricing-card__label[data-anim-in="1"] { letter-spacing: .32em !important; }
  .pricing-intro--dark .pricing-card__now { opacity: 1 !important; letter-spacing: .28em !important; transform: translateX(-50%) !important; }
  .pricing-intro--dark .pricing-card__actions::before { transform: translateX(-50%) scaleX(1) !important; opacity: .5 !important; }
  .pricing-intro--dark .pricing-card__urgency-dot { box-shadow: 0 0 8px rgba(126,180,226,.35) !important; }
  .pricing-intro--dark .tier-accordion[open] .tier-accordion__indicator { transform: rotate(45deg) !important; }
  .pricing-intro--dark .tier-progress__fill { transform: scaleX(1) !important; }
  /* Native fallback strike (JS may not have run) */
  .pricing-intro--dark .pricing-card--minimal .pricing-card__old-price s {
    text-decoration: line-through rgba(255,255,255,.45) !important;
  }
  .pricing-intro--dark .pricing-card--minimal .pricing-card__old-price s::after {
    display: none !important;
  }
  /* CTA hover no-motion */
  .pricing-intro--dark .pricing-card__button--dark .pricing-card__button-arrow {
    transition: none !important;
  }
  .pricing-intro--dark .pricing-card__button--dark:hover .pricing-card__button-arrow,
  .pricing-intro--dark .pricing-card__button--dark:focus-visible .pricing-card__button-arrow {
    transform: none !important;
  }
}

/* --- Mobile 390: tighten timings so total runtime stays <4.5s on small screens --- */
@media (max-width: 640px) {
  .pricing-intro--dark .pricing-card--minimal.is-in-view [data-anim-in="3"] {
    transform: translateY(14px);
  }
  .pricing-intro--dark .pricing-card--minimal [data-anim-in="3"] {
    transform: translateY(14px);
  }
}
/* ============================================================
   Phase 14: Final Offer 再設計
   旧 Phase 10 (L2023-2153) を置き換え。
   セクションの役割変更: 「年払いプランを売る」→「フェンスに座っている
   訪問者に、サイト共通の唯一のCTA（無料サンプル依頼）へもう一段促す」。
   年払い/初期費用無料の事実は削除ではなく、CTA下の1行フットノートに
   縮小して残す（決定事項ではなく参考情報として提示）。
   ============================================================ */

/* --- Header block: unchanged layout, reuse .final-push__head/__title/__lead
   from Phase 10 as-is (no override needed, kept for completeness/clarity) --- */
.final-push__head {
  text-align: center;
  max-width: 40em;
  margin: 0 auto 2.5rem;
}
.final-push__title .line {
  display: block;
}
.final-push__lead {
  font-family: var(--font-jp);
  color: var(--color-sub);
  font-size: 0.9375rem;
  margin-top: 0.75rem;
}

/* --- Card container: keep the existing Phase 10 --final polish
   (2px ink border, iki top-accent bar via ::before). No structural change
   needed here; re-declared for a self-contained Phase 14 block so this
   phase does not depend on Phase 10 remaining in the file. --- */
.annual-card--final {
  position: relative;
  max-width: 34em;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  background: var(--paper);
  border: 2px solid var(--color-ink);
}
.annual-card--final::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: var(--color-iki);
}

/* --- Badge: REMOVED from this card's markup. Do not delete the shared
   .annual-card__badge rule in pages.css — it may still be used by other
   .annual-card instances elsewhere on the page (e.g. pricing tier section).
   This section simply no longer renders one. --- */

/* --- Title: overrides Phase 10's .annual-card__title (was styled as a
   plan-name heading). New copy is an action statement, same visual role
   (H3, mincho heading font), no size/weight change needed from pages.css
   base -- only content changed via HTML. No CSS override required unless
   Phase 10 added plan-name-specific styling; if so, this reset covers it. */
.annual-card--final .annual-card__title {
  font-family: var(--font-jp-mincho);
  font-size: 1.375rem;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.annual-card--final .annual-card__lead {
  font-family: var(--font-jp);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-sub);
  max-width: 28em;
  margin: 0 auto 1.75rem;
}

/* --- Compare box: REMOVED from this card's markup entirely
   (.annual-card__compare and all child classes: .annual-card__col,
   .annual-card__col--strike, .annual-card__col--featured,
   .annual-card__col-label, .annual-card__col-amount, .annual-card__arrow).
   Do NOT delete these rules from pages.css/redesign.css in this pass --
   verify sitewide non-use first (see integrationNotes). They render
   nothing now that the markup is gone; harmless dead weight until confirmed
   safe to remove in a separate cleanup pass. --- */

.annual-card--final .annual-card__actions {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* CTA: reuse existing ink-pill treatment from pages.css .annual-card__cta
   as-is (no override -- href/data-cta unchanged, label text is the only
   change, made via HTML). Re-declared minimally here only to guarantee
   focus-visible parity if Phase 10 had card-specific tweaks. */
.annual-card--final .annual-card__cta:focus-visible {
  outline: 2px solid var(--color-iki);
  outline-offset: 2px;
}

/* --- Mobile (390px-599px): card already stacks fine since it lost the
   2-column compare grid; no new breakpoint logic required. Slightly
   reduce card padding on narrow viewports to match Phase 10's prior
   mobile behavior. --- */
@media (max-width: 600px) {
  .annual-card--final {
    padding: 2rem 1.25rem 1.5rem;
  }
  .annual-card--final .annual-card__title {
    font-size: 1.25rem;
  }
}

/* ============================================================
   Phase 15 — /service/website/ 年払いプラン block + tier-head h2 fix
   Append to css/redesign.css (loaded last; overrides win w/o !important).
   Tokens only. Frameless editorial (Phase 12/14): no card/border/fill/pill/gradient.
   ============================================================ */

/* BUG-02: campaign heading is an <h2> on this page; give it the tier
   sizing without touching pages.css .tier-section__head h3 (index.html uses h3). */
.tier-section__head h2{
  margin:0 0 12px;
  font-size:clamp(24px, 3.4vw, 32px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.35;
  color:var(--color-ink);
}

/* ── 年払いプラン (frameless editorial comparison) ── */
.annual-plan{
  margin:40px 0 0;
  padding-top:32px;
  border-top:1px solid var(--color-line);   /* single hairline — not a boxed card */
  display:grid;
  gap:16px;
  justify-items:start;
  scroll-margin-top:96px;                    /* offset for sticky header on #annual-plan jump */
}
.annual-plan__eyebrow{
  font-family:var(--font-en);
  font-size:11px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--color-mute);
  margin:0;
}
.annual-plan__heading{
  margin:0;
  font-size:clamp(18px, 2.4vw, 22px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--color-ink);
}
.annual-plan__compare{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:16px 24px;
  width:100%;
  margin:8px 0 4px;
}
@media (min-width:640px){
  .annual-plan__compare{ grid-template-columns:1fr auto 1fr; }
}
.annual-plan__col{ display:grid; gap:6px; }
.annual-plan__col-label{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--color-mute);
}
.annual-plan__figure{
  font-size:clamp(30px, 5vw, 44px);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
}
.annual-plan__col--was .annual-plan__figure{ color:var(--color-mute); }   /* muted, NOT struck */
.annual-plan__col--now .annual-plan__figure{ color:var(--color-ink); }
.annual-plan__col-note{
  font-size:12px;
  line-height:1.7;
  color:var(--color-sub);
}
.annual-plan__arrow{
  justify-self:center;
  font-family:var(--font-en);
  font-size:22px;
  color:var(--color-iki);                    /* single permitted accent */
  line-height:1;
  transform:rotate(90deg);                   /* points down when stacked on mobile */
}
@media (min-width:640px){ .annual-plan__arrow{ transform:none; } }
.annual-plan__savings{
  margin:4px 0 0;
  font-size:clamp(16px, 2vw, 20px);
  font-weight:700;
  color:var(--color-ink);
  letter-spacing:.02em;
  line-height:1.5;
}
.annual-plan__savings .numeric{ color:var(--color-ink); }   /* iki は白背景で AA 不足のため ink（太字で強調維持） */
.annual-plan__cta{ margin:8px 0 0; }
.annual-plan__foot{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:var(--color-mute);
}
/* ============================================================
   Phase 16 — /service/website/ CV redesign (FINAL)
   白ベース編集誌型の詳細確認ページ。svc-* namespace。
   tokens only / iki は装飾 (hairline divider・outline numeral・
   underline) のみ、本文色には使わない (locked #2)。
   既存流用: .eyebrow-en .numeric .spec-table .quality .tier-*
   .annual-plan .scrollflow .cta .btn [data-reveal]
   ============================================================ */

/* ---------- shared: eyebrow modifier (over .eyebrow-en) ---------- */
.svc-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  margin-bottom: 16px;
}

/* ---------- shared: centered section head ---------- */
.svc-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 64px);
}
.svc-section-head__title {
  font-family: var(--font-jp-mincho);
  font-size: var(--fs-3);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .015em;
  color: var(--color-ink);
  text-wrap: balance;
  margin: 0;
}
.svc-section-head__lead {
  margin: 20px auto 0;
  max-width: 36em;
  font-size: var(--fs-base);
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--color-sub);
  text-wrap: pretty;
}

/* ---------- price hero (frameless, white) ---------- */
.svc-price__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.svc-price__name {
  font-family: var(--font-jp-mincho);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  margin: 0;
  color: var(--color-ink);
}
.svc-price__lead {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-sub);
  letter-spacing: .02em;
}
.svc-price__hero {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.svc-price__campaign {
  margin: 0 0 20px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--color-mute);
}
.svc-price__was {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--color-mute);
}
.svc-price__was .numeric { font-size: 15px; letter-spacing: 0; }
.svc-price__main {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.svc-price__main-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--color-sub);
}
.svc-price__main-figure {
  font-weight: 700;
  font-size: clamp(72px, 12vw, 160px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--color-ink);
}
@supports (font-variation-settings: "opsz" 96) {
  .svc-price__main-figure { font-variation-settings: "opsz" 96; }
}
.svc-price__main-unit {
  font-size: 13px;
  color: var(--color-mute);
  letter-spacing: .08em;
}
/* 唯一の iki 要素: 40px hairline divider (Phase 12 と同型) */
.svc-price__divider {
  width: 40px;
  height: 1px;
  margin: 32px auto;
  background: var(--color-iki);
  opacity: .5;
}
.svc-price__initial {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.svc-price__initial-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-sub);
}
.svc-price__initial-figure {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.svc-price__initial-note {
  font-size: 12px;
  color: var(--color-mute);
}
.svc-price__savings {
  margin: 24px 0 0;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--color-ink);
}
.svc-price__savings strong { font-weight: 700; }
.svc-price__savings .numeric { font-size: 1.15em; letter-spacing: 0; margin: 0 .06em; }

/* ---------- trust band (frameless 4-stat, hairline top/bottom only) ---------- */
.svc-trust {
  list-style: none;
  max-width: 960px;
  margin: clamp(48px, 7vw, 72px) auto 0;
  padding: 28px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.svc-trust__stat {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 4px 16px;
}
.svc-trust__stat + .svc-trust__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--color-line);
}
.svc-trust__label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-mute);
}
.svc-trust__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  color: var(--color-ink);
  min-height: 40px;
}
.svc-trust__num {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.01em;
}
.svc-trust__small {
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-sub);
}
.svc-trust__mincho {
  font-family: var(--font-jp-mincho);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: .06em;
  color: var(--color-ink);
}
.svc-trust__note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-mute);
  max-width: 20em;
}
@media (max-width: 640px) {
  .svc-trust { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .svc-trust__stat:nth-child(3)::before { display: none; }
}

/* ---------- themed spec groups (料金 / 契約条件 / 運用・サポート) ---------- */
.svc-spec {
  max-width: 840px;
  margin: clamp(56px, 8vw, 80px) auto 0;
  display: grid;
  gap: 48px;
}
.svc-spec__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
}
.svc-spec__title-en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-mute);
}
.svc-spec__title-ja {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-ink);
}
.svc-spec__fine {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-mute);
}
.svc-spec__anchor {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-iki-line);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.svc-spec__anchor:hover { text-decoration-color: var(--color-ink); }

/* ---------- unified frameless spec table (spec / pricing-notes 共用) ---------- */
.svc-spec-table { border-top: 0; }
.svc-spec-table th,
.svc-spec-table td { border-bottom: 0; padding: 16px 12px 16px 0; }
.svc-spec-table tr + tr th,
.svc-spec-table tr + tr td { border-top: 1px solid var(--color-line); }
.svc-spec-table th {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-sub);
}
.svc-spec-table td {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--color-ink);
}
.svc-spec-table td strong.numeric { font-weight: 700; font-size: 1.12em; }
@media (max-width: 640px) {
  .svc-spec-table th,
  .svc-spec-table td { display: block; padding: 6px 0; }
  /* 自前デスクトップ規則 (tr + tr th/td) を同一詳細度で打ち消す — !important 不使用 */
  .svc-spec-table tr + tr th,
  .svc-spec-table tr + tr td { border-top: 0; }
  /* common.css:429 の .spec-table tr { border-bottom:1px } を打ち消し、
     hairline は tr の border-top のみに統一 (二重線防止) */
  .svc-spec-table tr {
    display: block;
    padding-block: 14px;
    border-top: 1px solid var(--color-line);
    border-bottom: 0;
  }
  .svc-spec-table tr:first-child { border-top: 0; }
  .svc-spec-table th { width: auto; font-size: 12px; color: var(--color-mute); }
}

/* ---------- campaign wrapper / annual CTA ---------- */
.svc-campaign .tier-section { scroll-margin-top: 96px; }
.tier-section__head .svc-eyebrow { margin-bottom: 12px; }
.annual-plan__cta.svc-annual-cta { margin-top: 24px; }

/* ---------- included (frameless 2-col grid + outline numeral 01-04) ---------- */
.svc-included-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(40px, 6vw, 72px);
  row-gap: 0;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .svc-included-grid { grid-template-columns: repeat(2, 1fr); }
}
.svc-included-grid > [data-reveal]:nth-child(2).is-revealed { transition-delay: 80ms; }
.svc-included-grid > [data-reveal]:nth-child(3).is-revealed { transition-delay: 160ms; }
.svc-included-grid > [data-reveal]:nth-child(4).is-revealed { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .svc-included-grid > [data-reveal] { transition-delay: 0ms !important; }
}
.svc-included-group {
  border-top: 1px solid var(--color-line);
  padding: 28px 0 44px;
  background: transparent;
}
.svc-included-group__head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
/* iki は装飾アウトラインのみ (locked #2)。fallback = iki 塗り numeral */
.svc-included-group__numeral {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--color-iki);
  display: inline-block;
}
@supports (-webkit-text-stroke: 1px black) {
  .svc-included-group__numeral {
    -webkit-text-stroke: 1.1px var(--color-iki);
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.svc-included-group__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 5px;
}
.svc-included-group__en {
  margin: 0;
  font-size: 10px;
  letter-spacing: .3em;
  font-weight: 600;
}
.svc-included-group__title {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.3;
}
.svc-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-included-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--color-sub);
  padding: 9px 0;
}
.svc-included-list li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 1px;
  margin-top: 14px;
  background: var(--color-ink);
}

/* ---------- quality: Bodoni score override (.quality__score が font-en を持つため) ---------- */
.quality__score.numeric {
  font-family: var(--font-serif-numeric);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- pricing-notes ---------- */
.svc-notes__group {
  max-width: 720px;
  margin: 0 auto;
}
.svc-notes__group + .svc-notes__group { margin-top: clamp(48px, 7vw, 64px); }
.svc-notes__subhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--color-ink);
  text-align: left;
}
.svc-notes__subhead-en {
  margin: 0;
  font-size: 10px;
  letter-spacing: .3em;
  font-weight: 600;
}
.svc-notes__foot {
  max-width: 720px;
  margin: 28px auto 0;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--color-mute);
  text-align: left;
}
/* ---------- Phase 16 AA fixes (audit-driven) ----------
   (1) tier-card の iki-on-white (2.21:1) — 白背景ページでは ink/sub に。
       トップページは .pricing-intro--dark スコープの Phase 12 が別途適用されるため影響なし。
   (2) alt 背景 (#FAFAFA / #F7F8FA) 上の --color-mute #767676 は 4.27-4.35 で
       AA (4.5) に僅差不足 — 該当箇所のみ #6E6E6E に暗色化 (白上 4.9 / alt上 4.8)。 */
/* !important は L809-824 (Phase 3 tier Bodoni 化) の同 !important を後勝ちで上書きするため */
.svc-campaign .tier-card--current .tier-card__price { color: var(--color-ink) !important; }
.svc-campaign .tier-card--next .tier-card__badge { color: var(--color-sub); }
.svc-campaign .tier-card__price-unit { color: #6E6E6E !important; }
.svc-campaign .tier-card--regular .tier-card__rank,
.svc-campaign .tier-card--future .tier-card__badge { color: #6E6E6E; }
/* --regular バッジは white-on-ink (pages.css L5771) のため暗色化しない */
.section--alt .eyebrow-en,
.section--alt .scrollflow__num,
.section--alt .scrollflow__cap,
.svc-notes__foot { color: #6E6E6E; }