/* =============================================================================
   abx 公式サイト / LP —— 見た目だけを持つ 1 枚
   =============================================================================

   ★ **トークンは dashboard/styles.css と同じ名前・同じ役割で置いてある。**
     LP とアプリを同じ製品に見せるためであり、片方だけ色を変えたときに
     もう片方が置き去りになるのを避けるためでもある。
     値を変えるときは両方を同時に変えること。

   ⚠ **依存パッケージも @import も CDN も Web フォントも足していない。**
     設置は「静的ファイルを置くだけ」である。1 行の CDN を足した瞬間、
     このページは第三者のホストが生きていることに依存し始める。
     字は端末に在るものだけで組む (dashboard/styles.css 冒頭と同じ原則)。

   -----------------------------------------------------------------------------
   【設計の指針】
   -----------------------------------------------------------------------------
   ● 暗い面を既定にする。ブランドの地色が #0E1219 である (brand/README.md)。
     明るい面も同じ完成度で用意し、切り替えは prefers-color-scheme に任せる。
     トグルを置かない —— 状態の保存先が要るうえ、LP に状態を持たせたくない。

   ● **色は意味にだけ使う。** 面・枠・文字はグレースケールで、有彩色 (amber)
     が出るのは 3 箇所だけである:
       1. ロゴの封印バー (ブランドの中核)
       2. ターミナル実例の「封印されています」
       3. 主 CTA
     装飾に amber を配ると、封印バーが「ただの飾りの色」に見えてしまう。
     この製品では封印が主張そのものなので、そこを薄めない。

   ● **役割表で「専任組織なら」の列を赤くしない。** あれは「いない」ことを
     見せる列であって、失敗や危険ではない。danger 色を当てると
     「悪いこと」の意味が乗ってしまう。薄い文字で沈めるだけにする。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. トークン (dashboard/styles.css と同名・同役割)
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark light;

  --bg: #0a0d13;
  --bg-grad: radial-gradient(120% 80% at 50% -20%, #151b26 0%, #0a0d13 60%);
  --surface: #10141c;
  --surface-2: #161c26;
  --surface-3: #1d2432;

  --line: rgba(232, 236, 243, 0.08);
  --line-2: rgba(232, 236, 243, 0.14);
  --line-3: rgba(232, 236, 243, 0.22);

  --text: #e8ecf3;
  --text-2: #9aa4b4;
  --text-3: #7f8899;

  --accent: #f2a93b;
  --accent-soft: rgba(242, 169, 59, 0.12);
  --accent-line: rgba(242, 169, 59, 0.32);
  --accent-text: #f4bd68;
  --on-accent: #0b0e14;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
          "Noto Sans JP", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px; --rp: 999px;

  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.75);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms var(--ease);

  --content-w: 1080px;
}

/* 明るい面。**同じ役割に同じ変数名**を割り当てるだけで、以降の規則は 1 行も
   分岐しない。分岐を下に持ち込むと、片方の面でだけ壊れた規則が出る。 */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9;
    --bg-grad: radial-gradient(120% 80% at 50% -20%, #ffffff 0%, #f1f3f6 60%);
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef0f4;

    --line: rgba(11, 14, 20, 0.08);
    --line-2: rgba(11, 14, 20, 0.13);
    --line-3: rgba(11, 14, 20, 0.22);

    --text: #0b0e14;
    --text-2: #56606f;
    --text-3: #7b8494;

    --accent: #b8770a;
    --accent-soft: rgba(217, 138, 11, 0.12);
    --accent-line: rgba(217, 138, 11, 0.3);
    --accent-text: #8a5c07;
    --on-accent: #ffffff;

    --shadow-2: 0 8px 24px -10px rgba(11, 14, 20, 0.16);
    --shadow-3: 0 24px 60px -24px rgba(11, 14, 20, 0.24);
  }
}

/* -----------------------------------------------------------------------------
   2. 土台
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.wrap.narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* キーボード利用者のための本文スキップ。フォーカスするまで画面外に置く。 */
.skip {
  position: absolute; left: var(--s4); top: -100px;
  z-index: 10;
  padding: var(--s2) var(--s4);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r1); font-weight: 700; text-decoration: none;
  transition: top var(--fast);
}
.skip:focus { top: var(--s4); }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* -----------------------------------------------------------------------------
   3. ヘッダ
   --------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
}
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; font-weight: 700; letter-spacing: 0.02em;
  font-family: var(--mono);
}
.brand svg { width: 26px; height: 26px; display: block; }

.site-head nav {
  display: flex; gap: var(--s5); align-items: center;
  font-size: 14px;
}
.site-head nav a {
  color: var(--text-2); text-decoration: none;
  transition: color var(--fast);
}
.site-head nav a:hover { color: var(--text); }

@media (max-width: 700px) {
  /* 狭い画面ではアンカーを畳む。ハンバーガーは置かない ——
     開閉の状態を持たせるためだけに JS を増やしたくない。
     GitHub への導線だけは残す (channels.md 4.3 で最重要の出口)。 */
  .site-head nav a:not([data-ref-link]) { display: none; }
}

/* -----------------------------------------------------------------------------
   4. ファーストビュー
   --------------------------------------------------------------------------- */
.hero { padding-block: clamp(var(--s7), 9vw, 104px) var(--s8); }

.hero-grid {
  display: grid; gap: var(--s8);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}

/* カテゴリ名。**主張より先に名詞を渡すための場所**である ——
   読者はまだ「AI駆動A/Bテスト」という語を持っていない。
   有彩色は使わない (amber は封印のための色で、ここで使うと薄まる)。 */
.cat {
  display: inline-block;
  margin: 0 0 var(--s5);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--rp);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-2);
}

/* 拡散されたときに要約される文。こちらが先に置くためのもの
   (channels.md 3.2 / note 編集方針9)。装飾ではないので消さないこと。 */
.eyebrow {
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--accent-text);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
}
/* 日本語が語中で折り返すのを防ぐ。**意味のまとまりごとに span で包み、
   改行はその境目でだけ起きる**ようにしてある ("実/験組織" のような割れを防ぐ)。
   文言を変えるときは span の区切りも一緒に見直すこと。 */
h1 span { display: inline-block; }

.lead {
  margin: var(--s5) 0 0;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text);
}
.sub {
  margin: var(--s4) 0 0;
  color: var(--text-2);
  font-size: 15px;
}
.faint {
  margin: var(--s4) 0 0;
  color: var(--text-3);
  font-size: 13px;
}

.cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s3) var(--s5);
  border-radius: var(--r2);
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.btn:active { transform: translateY(1px); }

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

.btn.ghost {
  border-color: var(--line-2); color: var(--text);
  background: var(--surface);
}
.btn.ghost:hover { border-color: var(--line-3); background: var(--surface-2); }

/* =============================================================================
   【置き換え対象】 abx-server/site/styles.css の **301〜450 行**
     見出しコメントごと、以下の 3 ブロックをまとめてこの内容で差し替える:

       ・「--- ヒーローの台帳 ---」        … .hero-ledger / .hl-*
       ・「--- 実験1本の中身 ---」          … .spec / .spec-* / .wire / .w-*
       ・「--- ヒーローの 2 枚重ね ---」    … .hero-stack と 900px 以下の分岐

     開始の目印:  `/* --- ヒーローの台帳 ---`
     終了の目印:  `.hero-stack .hl-table tbody tr:nth-child(n+4) { display: table-row; }`
                  を含む @media (max-width: 900px) ブロックの閉じ括弧まで
     (直後の `/* --- ターミナルの実例 ---` は**残す**)

   ⚠ この CSS は **HTML の閉じ括弧の修正 (hero-html.txt) とセットでないと効かない。**
     現状 `.spec` は `.hero-ledger` の**子**になっており、position: absolute の
     台帳の中に設計書がぶら下がっている。台帳の高さが実測 1060px まで伸びて
     次の節 (#why) に 700px 食い込んでいたのはこれが直接の原因である。
   ============================================================================= */

/* --- ヒーローの台帳 (奥に敷く札) --------------------------------------------
   ★ **メインビジュアルは「並走している実験」である。**
     以前は封印された端末を置いていたが、看板の隣で「止まっている画面」を
     見せることになり、売りである回転数と正面から食い違っていた。
   ★ 結果の列に色を付けるのは「+2.1%」だけに留める。「効果なし」を赤にしない ——
     効果が無いことは失敗ではなく、記録されるべき正しい結果である。
   ★ **手前の .spec より一回り小さく組む。** 重ねると大半が隠れる札なので、
     見えるのは見出しと右端だけ。そこが読めれば「実験が何本も並んでいる」は
     伝わる。同じ寸法の札を 2 枚重ねると、はみ出すか 2 枚とも中途半端に
     切れるかのどちらかにしかならない。 */
.hero-ledger {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.hl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.hl-title { font-size: 13px; font-weight: 700; }
.hl-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ⚠ セルの左右余白を s5 に戻さないこと。white-space: nowrap なので余白がそのまま
   表の最小幅になり、札の幅を超えた分は overflow: hidden に食われる ——
   s5 のときは表 427px に対し札 403px で、右端の「結果」列が黙って切れていた。 */
.hl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hl-table th, .hl-table td {
  padding: var(--s2) var(--s3); text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.hl-table thead th {
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700;
  color: var(--text-3); background: transparent;
}
.hl-table tbody td:first-child { font-family: var(--mono); color: var(--text-3); }
.hl-table tbody td { color: var(--text-2); }
.hl-table tbody tr:last-child td { border-bottom: 0; }

/* ⚠ 同じ理由で、**電話の幅ではもう一段落とす。** 900px 以下では札が全幅になり
   6 行すべて出る一方、使える幅は 327px (375px 端末) しかない。
   実測した表の最小幅:  元の 14px/s5 → 440px (「結果」列が丸ごと消えていた)
                       12px/s3     → 326px (375px 端末にぎりぎり)
                       11px/s2     → 279px (360px 端末まで余裕がある)
   ⚠ 320px 幅の端末では今も右端が数 px 欠ける。表を横スクロールさせるには
     包む要素が要り、HTML に手を入れることになるので、ここでは足していない。 */
@media (max-width: 420px) {
  .hl-table { font-size: 11px; }
  .hl-table th, .hl-table td { padding: var(--s2); }
}

.hl-run {
  display: inline-block; padding: 0 var(--s2);
  border-radius: var(--rp);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 10px; font-weight: 700;
}
.hl-wait { font-family: var(--mono); color: var(--text-3) !important; }
.hl-win  { font-family: var(--mono); color: var(--text) !important; font-weight: 700; }
.hl-none { color: var(--text-3) !important; }

.hl-foot {
  display: flex; gap: var(--s4);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px; color: var(--text-3);
}
.hl-foot b { font-family: var(--mono); font-size: 14px; color: var(--text); margin-right: 2px; }

/* --- 実験1本の中身 (ヒーローのメインビジュアル) -----------------------------
   ★ 仮説 + A案/B案 のワイヤー。**"AI が実験を設計する" を一目で見せる**ための図で
     あって装飾ではない。amber は「変わった場所」1 箇所にだけ使う ——
     ワイヤー全体を色づけると、どこが変更点なのか分からなくなる。
   ★ **寸法は「ヒーローに収まること」から逆算してある。** 左の文章が実測 536px
     なので、右は 台帳の覗き 48px + このカードで 520px 前後に収める必要がある。
     字も余白も一段ずつ落として 684px → 約 470px にした。内訳は hero-notes.md。
     ⚠ ここの font-size / padding を元に戻すと、そのぶん素直に縦に伸びて
       また #why に食い込む。増やすなら別の行を削って帳尻を合わせること。 */
.spec {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.spec-head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  line-height: 1.6;
}
.spec-id { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.spec-screen { font-size: 12.5px; font-weight: 700; }

/* display: flow-root は .spec-label の float を封じ込めるため。
   overflow: hidden でも同じことができるが、こちらは中身を切る副作用が無い。 */
.spec-hypo {
  display: flow-root;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
/* ★ 「仮説」バッジを本文に**回り込ませる**。独立した 1 行を持たせると
   それだけで 22px 使う —— 縦が足りないヒーローでは割に合わない。
   読み順としても「仮説: …」と続くほうが自然である。 */
.spec-label {
  float: left;
  margin: 2px var(--s2) 0 0;
  padding: 1px var(--s2); border-radius: var(--rp);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
}
.spec-hypo p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.spec-hypo strong { color: var(--text); }

.spec-wires {
  display: grid; align-items: center; justify-content: center;
  grid-template-columns: auto 24px auto;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.wire { margin: 0; display: grid; gap: var(--s1); justify-items: center; }
.wire figcaption { font-size: 10.5px; line-height: 1.6; color: var(--text-3); }
.wire figcaption b { color: var(--text); margin-right: 3px; }
/* 118px → 82px。**縦を詰めるとき、ここがいちばん効く** —— viewBox が 160x260 なので
   幅を 36px 削ると高さは 58px 減る。ワイヤーは矩形だけで描いてあり、読ませたいのは
   「amber の帯がどこに移ったか」の 1 点だけなので、この寸法でも意味は落ちない。 */
.wire svg { width: 82px; height: auto; display: block; }
.wire-vs svg { width: 18px; height: 18px; display: block; }

/* ワイヤーの各部。グレースケールで、変更点だけが amber。 */
.w-frame  { fill: var(--surface); stroke: var(--line-3); stroke-width: 1.5; }
.w-bar    { fill: var(--line-3); }
.w-img    { fill: var(--surface-3); }
.w-line   { fill: var(--line-2); }
.w-price  { fill: var(--text-3); }
.w-cta    { fill: var(--line-3); }
.w-cta-new{ fill: var(--accent); }

/* dt / dd は line-height を 1.5 に落とす。body の 1.8 のままだと 4 項目 2 段で
   134px 使い、ワイヤー 1 枚ぶんに相当してしまう。 */
.spec-meta {
  margin: 0; padding: var(--s3) var(--s4);
  display: grid; gap: var(--s1) var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.spec-meta div { display: grid; }
.spec-meta dt { font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; }
.spec-meta dd { margin: 0; font-size: 12.5px; font-weight: 700; }

.spec-foot {
  margin: 0; padding: var(--s3) var(--s4);
  background: var(--surface-2);
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}
.spec-foot b { color: var(--text); }

/* --- ヒーローの 2 枚重ね ----------------------------------------------------
   奥 = 積み上がった結果 (台帳) / 手前 = これから出てくる 1 本 (仮説とワイヤー)。
   ★ 重なりは装飾ではなく含みである —— 「この 1 本が、あの一覧に積まれていく」。
   ★ **ヒーローの高さは左の文章で決まる (実測 約 536px)。** 右がそれを超えると
     右カラムが主役に見えてしまうので、内訳を先に決めてある:

         台帳の覗き (spec の margin-top)   64px
         設計書カード                    約 455px
         ────────────────────────────────────────
         右カラム合計                    約 519px   ← 左 536px の内側

   ★ **覗かせるのは上端 64px だけ**にしてある。ここには「実験台帳 / 今四半期」の
     見出し (40px) と、その下の列見出し「実験 / 画面 / 状態 / 結果」が入る ——
     **表であることが分かるのはこの列見出しなので、ここを削らない。**
     ⚠ 一度は手前を 89% 幅にして右端も 51px 覗かせていた。**やめた** ——
       覗いた帯に「結果」列の途中の文字 (「4 日」) が出て、重ねた札ではなく
       **文字が切れた表**に見える。奥の札は横をずらさず、上だけ出す。
   ★ .hero-stack に padding を持たせていない (以前は左 32px / 下 48px)。
     影は overflow を切っていないので外へ出られる —— 影のために余白を取ると、
     その余白ぶん**カードを縮める**ことになり、本末転倒である。
   ★ 狭い画面では重ねない。重ねたまま縮めると両方読めなくなる。 */
.hero-stack { position: relative; }
.hero-stack .hero-ledger {
  position: absolute; top: 0; right: 0;
  width: 76%;
  box-shadow: var(--shadow-2);
  opacity: .96;
}
.hero-stack .spec {
  position: relative; z-index: 1;
  width: 100%;
  margin-top: var(--s8);
}
/* 奥の台帳は 3 行だけ描く —— 手前のカードに隠れる行まで描いても縦に伸びるだけ。
   **HTML の行は消さない。** 900px 以下では 6 行すべて見せるためである。 */
.hero-stack .hl-table tbody tr:nth-child(n+4) { display: none; }

@media (max-width: 900px) {
  .hero-stack { display: grid; gap: var(--s5); }
  .hero-stack .hero-ledger { position: static; width: 100%; }
  .hero-stack .spec { width: 100%; margin-top: 0; }
  .hero-stack .hl-table tbody tr:nth-child(n+4) { display: table-row; }
}

/* --- ターミナルの実例 ------------------------------------------------------ */
.seal-demo { max-width: 620px; margin: var(--s6) auto 0; }
.hero-term {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.term-bar {
  display: flex; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.term-bar span {
  width: 10px; height: 10px; border-radius: var(--rp);
  background: var(--line-3);
}
.hero-term pre {
  margin: 0;
  padding: var(--s5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.hero-term code { font: inherit; }
.c-dim  { color: var(--text-3); }
.c-num  { color: var(--text); font-weight: 700; }
/* 封印は amber。ここが製品の主張そのものなので、有彩色を使う数少ない箇所。 */
.c-seal { color: var(--accent-text); font-weight: 700; }

/* -----------------------------------------------------------------------------
   5. 帯 (セクション)
   --------------------------------------------------------------------------- */
.band { padding-block: clamp(var(--s7), 8vw, 96px); }
.band.alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* ⚠ text-transform: uppercase を使わない。
   日本語には効かない一方で、「Duolingo の話」が「DUOLINGO の話」になり、
   **他社のブランド表記を勝手に変える**ことになる。 */
.kicker {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--text-3);
}

h2 {
  margin: 0 0 var(--s5);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 800;
}

.sub-h {
  margin: var(--s7) 0 var(--s4);
  font-size: 18px; font-weight: 700;
}

.prose {
  margin: 0 0 var(--s5);
  max-width: 68ch;
  color: var(--text-2);
}
.prose strong { color: var(--text); }

/* 引用は「言い切り」のための場所。装飾に使わない。 */
.pull {
  margin: var(--s6) 0;
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  font-weight: 600;
  color: var(--text);
}
.pull strong { color: var(--accent-text); }

/* -----------------------------------------------------------------------------
   5.5 図解の部品
   -----------------------------------------------------------------------------
   ★ **図で言えることを文章で言わない。** 以下はすべて「散文の代わり」であって
     装飾ではない。消すと論が文章に戻り、ページが読まれなくなる。
   ★ 有彩色 (amber) を使うのは封印・数値・矢印だけに留める。
     ここを広げると、封印バーが「ただの飾りの色」に見えはじめる。
   --------------------------------------------------------------------------- */

.center { text-align: center; margin-inline: auto; }
.center-block { text-align: center; }
.center-block .prose { margin-inline: auto; }
.cta-row.center { justify-content: center; }

/* --- 数値カード (Duolingo) ------------------------------------------------- */
.stats {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--s6);
}
.stat {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--bg);
}
.stat-n {
  font-family: var(--mono);
  font-size: clamp(38px, 5vw, 52px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--accent-text);
}
.stat-n span {
  font-size: 15px; font-weight: 700; margin-left: var(--s2);
  color: var(--text-2); letter-spacing: 0;
}
.stat-l {
  margin-top: var(--s3);
  font-size: 15px; font-weight: 700; color: var(--text);
}
/* 出典。**消さないこと** —— 数値だけを裸で置くと「盛った数字」に見える。 */
.stat-s {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--text-3);
}

/* --- 壁 (組織の固定費) ----------------------------------------------------- */
.wall-grid {
  display: grid; gap: var(--s5);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  margin-bottom: var(--s6);
}
@media (max-width: 860px) { .wall-grid { grid-template-columns: minmax(0, 1fr); } }

.role-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.role-list li {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--text-2); font-size: 15px;
}
.role-list .role-sum {
  background: transparent; border-style: dashed;
  color: var(--text-3);
}
.role-list .role-sum strong { color: var(--text); }

.cost-card {
  padding: var(--s6);
  border: 1px solid var(--accent-line);
  border-radius: var(--r3);
  background: var(--accent-soft);
}
.cost-h { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.cost-sub { margin: var(--s1) 0 0; font-size: 13px; color: var(--text-3); }
.cost-n {
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: clamp(30px, 4vw, 40px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--accent-text);
}
.cost-note {
  margin: var(--s4) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--accent-line);
  font-size: 14px; line-height: 1.75; color: var(--text-2);
}
.cost-note strong { color: var(--text); }

/* --- 置き換え表 ------------------------------------------------------------ */
.swap { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.swap-row {
  display: grid; align-items: center; gap: var(--s4);
  grid-template-columns: 40px 200px minmax(0, 1fr);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--bg);
}
@media (max-width: 720px) {
  .swap-row { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); }
  .swap-row .swap-work { grid-column: 2; }
}
.swap-ai {
  display: grid; place-items: center;
  width: 40px; height: 28px; border-radius: var(--r1);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 12px; font-weight: 800;
}
.swap-role { font-size: 15px; font-weight: 700; color: var(--text); }
.swap-work { font-size: 14px; color: var(--text-2); }

.human {
  padding: var(--s5) var(--s6);
  border: 1px dashed var(--line-3);
  border-radius: var(--r3);
  text-align: center;
}
.human-h { margin: 0 0 var(--s4); font-size: 13px; font-weight: 700; color: var(--text-3); }
.human-list {
  margin: 0 0 var(--s4); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
}
.human-list li {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--rp);
  font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--surface);
}
.human-tag { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

/* --- パイプライン (7ステージ) ---------------------------------------------- */
.pipe {
  display: flex; gap: var(--s2); margin: 0 0 var(--s6); padding: 0 0 var(--s3);
  list-style: none; overflow-x: auto;   /* 狭い画面では横に流す。段落ちさせない */
}
.pipe li {
  flex: 1 0 auto;
  display: grid; gap: var(--s2); justify-items: center;
  min-width: 108px; padding: var(--s4) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface);
  position: relative;
}
/* 段どうしを矢印でつなぐ。最後の 1 つには付けない。 */
.pipe li:not(:last-child)::after {
  content: "›";
  position: absolute; right: calc(var(--s2) * -1 - 2px); top: 50%;
  transform: translateY(-50%);
  color: var(--text-3); font-size: 18px; line-height: 1;
}
.pipe-n {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--rp);
  background: var(--accent-soft); color: var(--accent-text);
  font-family: var(--mono); font-size: 12px; font-weight: 800;
}
.pipe-t { font-size: 13px; font-weight: 700; text-align: center; }

.safety {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.safe-card {
  padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface);
}
/* 封印だけ amber。ここが製品の主張そのものなので、4 枚の中で 1 枚だけ立てる。 */
.safe-card.seal { border-color: var(--accent-line); background: var(--accent-soft); }
.safe-card h3 { margin: 0 0 var(--s2); font-size: 14px; font-weight: 700; }
.safe-card.seal h3 { color: var(--accent-text); }
.safe-card p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.75; }
.safe-card strong { color: var(--text); }

/* --- ループ図 -------------------------------------------------------------- */
.loop-grid {
  display: grid; gap: var(--s7);
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center; margin-bottom: var(--s6);
}
@media (max-width: 820px) {
  .loop-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); justify-items: center; }
}
.loop-svg { width: 100%; max-width: 340px; height: auto; display: block; }
.loop-node circle { fill: var(--surface); stroke: var(--accent-line); stroke-width: 2; }
.loop-node text {
  fill: var(--accent-text); font-family: var(--mono);
  font-size: 22px; font-weight: 800; text-anchor: middle;
}
.loop-mid {
  fill: var(--text-2); font-size: 19px; font-weight: 700; text-anchor: middle;
}

.loop-steps { margin: 0; padding: 0; list-style: none; counter-reset: ls; display: grid; gap: var(--s4); }
.loop-steps li {
  counter-increment: ls;
  display: grid; gap: var(--s1);
  padding-left: var(--s6); position: relative;
}
.loop-steps li::before {
  content: counter(ls);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--rp);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-family: var(--mono); font-size: 12px; font-weight: 800;
}
.loop-steps b { font-size: 16px; }
.loop-steps span { font-size: 14px; color: var(--text-2); }

/* 引用。**1 回しか使わない** —— 権威に寄りかかった見た目にしないため。
   その 1 回なので、節の頭に置いて主張の枠組みとして効かせる。 */
.quote {
  position: relative;
  margin: 0 0 var(--s7);
  padding: var(--s6) var(--s7);
  border: 1px solid var(--line-2); border-radius: var(--r3);
  background: var(--surface);
  max-width: 780px;
}
.q-mark {
  margin: 0; font-family: var(--mono);
  font-size: 56px; line-height: .6; color: var(--accent-line);
  user-select: none;
}
.q-body {
  margin: var(--s3) 0 var(--s4);
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.65; font-weight: 600; letter-spacing: -0.01em;
}
.q-body strong { color: var(--accent-text); }
.quote cite {
  display: block; font-style: normal;
  font-size: 13px; color: var(--text-3);
}
/* 用語の言い換え。**learning loop を英語のまま置き去りにしない** ——
   この節の読者にはマーケ担当者も含まれる。 */
.q-gloss {
  margin: var(--s5) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.75; color: var(--text-3);
}
.q-gloss b { color: var(--text-2); }

.warn {
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 0 var(--r2) var(--r2) 0;
}
.warn p { margin: 0 0 var(--s3); color: var(--text-2); font-size: 15px; }
.warn p:last-child { margin-bottom: 0; }
.warn strong { color: var(--text); }
.warn em { font-style: normal; color: var(--accent-text); font-weight: 700; }
.warn code {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  background: var(--surface-3); padding: 1px var(--s1); border-radius: var(--r1);
}

/* --- 対比 (AI駆動開発 × A/Bテスト) ----------------------------------------- */
.vs {
  display: grid; gap: var(--s4); align-items: center;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  margin-bottom: var(--s6);
}
@media (max-width: 820px) {
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs-arrow { transform: rotate(90deg); justify-self: center; }
}
.vs-col {
  padding: var(--s5) var(--s6);
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface);
  height: 100%;
}
/* 「問題」側を赤くしない —— danger 色を当てると AI駆動開発そのものが
   悪いものに見える。ここは「埋め合う」話であって否定ではない。 */
.vs-col.problem { border-style: dashed; background: transparent; }
.vs-col.answer { border-color: var(--accent-line); }
.vs-col h3 { margin: 0 0 var(--s4); font-size: 14px; font-weight: 700; color: var(--text-3); }
.vs-col.answer h3 { color: var(--accent-text); }
.vs-col ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s3); }
.vs-col li { font-size: 14px; color: var(--text-2); line-height: 1.75; }
.vs-col strong { color: var(--text); }
.vs-arrow svg { width: 40px; height: 24px; display: block; }

/* --- お願いする3つ (CTA) ---------------------------------------------------
   「書かせてもらうこと」とだけ書いて何をされるか分からない状態だったので、
   箇条にして展開した。**要求の中身をぼかさないこと** —— 相手は無償で時間を出す。 */
.ask-list {
  margin: 0 0 var(--s5); padding: 0; list-style: none;
  display: grid; gap: var(--s3);
  text-align: left;
}
.ask-list li {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--bg);
  font-size: 15px; color: var(--text-2);
}
.ask-list b { color: var(--text); }

/* --- 接続要件 -------------------------------------------------------------- */
.stack {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--s5);
}
.stack-item {
  display: grid; gap: var(--s2); justify-items: center;
  padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--bg);
}
.stack-item b { font-family: var(--mono); font-size: 15px; }
.stack-item span { font-size: 13px; color: var(--text-3); text-align: center; line-height: 1.6; }

/* =============================================================================
   #scale (散らからない) 用の追加 CSS
   -----------------------------------------------------------------------------
   置き場所: styles.css の「5.5 図解の部品」の中、.safe-card 群と
             「--- ループ図 ---」(.loop-grid) のあいだが素直。

   ⚠ **置き換え対象は無い。**
     旧 markup が使っていた .split / .split-card / .split-n / .mods /
     .steps5 / .split-key / .split-out は、**styles.css に 1 行も定義が無い**
     (`grep -n 'split\|mods\|steps5' styles.css` → 0 件)。
     つまりあの 2 カラムは既定スタイルのまま縦に積まれ、ul/ol は黒丸と数字の
     ままだった —— 「文章ばかりで見栄えがしない」の主因は分量ではなくこれ。
     新 markup ではこれらの class 名を使わないので、削除するものは無い。
   ============================================================================= */

/* --- 実験の「穴」(散らからない) --------------------------------------------
   ★ この節の図はこれ 1 つだけ。before/after を 1 枚に収めてある。
     LP の一区切りなのでコードは 4 行程度に留める —— 実装の粒度は /oss/ 側。
   ★ 有彩色 (amber) が出るのは **強調行 1 行だけ**。枠にも見出しにも配らない。
     「入口が 1 つ」がこの節の主張そのものなので、そこ以外に色を置くと
     封印バーと同じで「ただの飾りの色」に見えはじめる。 */
.hole {
  margin: 0 0 var(--s5);
  max-width: 680px;
}

.hole-code {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  /* 帯が .band.alt (= --surface) なので、コードの面は一段沈む --bg を使う。
     #why の .stat と同じ扱い。ここで --surface を使うと帯に溶けて枠が消える。 */
  background: var(--bg);
  overflow: hidden;
}

.hole-code pre {
  margin: 0;
  padding: var(--s5);
  /* 横スクロールはこの枠の中だけで起こす。pre を素のまま置くと長い行が
     ページ本体を押し広げ、モバイルで全体が横に揺れる。 */
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-2);
  tab-size: 4;
}

/* inline-block + min-width:100% にしておかないと、横スクロールしたときに
   強調行の背景が「見えている幅」で切れて、途中で色が終わる。 */
.hole-code code {
  font: inherit;
  display: inline-block;
  min-width: 100%;
}

/* 変わった場所 = 主張の核。ここだけ amber。
   margin-inline のマイナスで pre の padding 分まで背景を伸ばし、
   その分を padding-inline で戻しているので、文字の左端は他の行と揃う。 */
.hole-code .hl {
  display: block;
  margin-inline: calc(var(--s5) * -1);
  padding-inline: calc(var(--s5) - 2px);
  border-left: 2px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
}

.hole figcaption {
  margin-top: var(--s3);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-3);
}
.hole figcaption strong { color: var(--text-2); }

/* 図から読み取れることの言い直し。2 枚だけ。増やすと節が重くなる。 */
.hole-out {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 680px;
}
.hole-out li {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-2);
}
.hole-out b {
  display: block;
  font-size: 14px;
  color: var(--text);
}

@media (max-width: 560px) {
  /* 375px でも 55 桁前後は見える大きさ。これ以上詰めると読めなくなるので、
     残りは枠内の横スクロールに任せる (ページ本体は動かない)。 */
  .hole-code pre { padding: var(--s4); font-size: 12px; }
  .hole-code .hl {
    margin-inline: calc(var(--s4) * -1);
    padding-inline: calc(var(--s4) - 2px);
  }
  .hole-out li { padding: var(--s4); }
}

/* /oss/ 側でも同じコード枠を使う場合だけ必要 (scale-oss-html.txt を入れるなら).
   あちらの main は .band (帯の背景を敷いていない = 地は --bg) なので、
   --bg のままだと枠の中と外が同じ色になって「コードの面」に見えない。 */
.band:not(.alt) .hole-code { background: var(--surface); }
/* ★ .hl (強調行) は display:block なので、**行頭のインデントごと** span で
   包むこと。行の途中から包むと、そこで改行されてインデントだけの行が出る。 */
.hole figcaption code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
}

/* =============================================================================
   任意 (入れなくても #scale は成立する)
   -----------------------------------------------------------------------------
   .prose の中の <code> に見た目が無い。#scale の「if (フラグ)」と /oss/ の
   「metrics pull」「--dry-run」が、本文と同じ地のままの等幅で置かれている。
   .card code / .warn code / .faq dd code と同じ扱いに揃えるだけの規則。
   ============================================================================= */
.prose code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-3);
  padding: 1px var(--s1);
  border-radius: var(--r1);
}

/* -----------------------------------------------------------------------------
   6. 役割表
   --------------------------------------------------------------------------- */
.table-scroll {
  /* 狭い画面では横スクロールさせる。列を落とすと論が壊れる ——
     「いない」列と「abx では」列は対で意味を持つため。 */
  overflow-x: auto;
  margin-bottom: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
}
.roles {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}
.roles th, .roles td {
  padding: var(--s4) var(--s5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.roles thead th {
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 700;
  background: var(--surface-2);
  white-space: nowrap;
}
.roles tbody tr:last-child td { border-bottom: 0; }

/* 「いない」列。**赤くしない** (冒頭の設計指針)。沈めるだけ。 */
.roles .miss {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--line-3);
}
.roles .fill { color: var(--text); font-weight: 700; }
.roles code {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--text-2);
  background: var(--surface-3);
  padding: 2px var(--s2);
  border-radius: var(--r1);
}

/* -----------------------------------------------------------------------------
   7. 宛先カード
   --------------------------------------------------------------------------- */
.cards {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--bg);
}
.card h3 {
  margin: 0 0 var(--s2);
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 700;
}
.card-lead {
  margin: 0 0 var(--s4);
  font-size: 19px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.01em;
}
.card p { margin: 0 0 var(--s4); color: var(--text-2); font-size: 14.5px; }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--text); }
.card code {
  font-family: var(--mono); font-size: 13px;
  color: var(--text);
  background: var(--surface-3);
  padding: 1px var(--s1);
  border-radius: var(--r1);
}
.card-note {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 13.5px !important;
  color: var(--text-3) !important;
}

/* -----------------------------------------------------------------------------
   8. よくある質問 / 箇条の申告
   --------------------------------------------------------------------------- */

/* ★ FAQ を <details> で畳まない。
   この節は**射程の申告を兼ねている** —— できないことを隠す形にすると、
   節を置いた意味そのものが消える。開いたまま読ませる。 */
.faq {
  margin: 0;
  display: grid; gap: var(--s3);
}
.faq dt {
  margin-top: var(--s4);
  font-size: 16px; font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
.faq dt:first-of-type { margin-top: 0; }
.faq dd {
  margin: 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--line-2);
  color: var(--text-2);
  font-size: 15px;
}
.faq dd strong { color: var(--text); }
.faq dd code {
  font-family: var(--mono); font-size: 13px;
  color: var(--text);
  background: var(--surface-3);
  padding: 1px var(--s1);
  border-radius: var(--r1);
}
.faq dd a { color: var(--accent-text); text-decoration-thickness: 1px; }

/* 箇条の申告 (現在は未使用だが、/oss/ 側が使っている) */
.honest-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--s4);
}
.honest-list li {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 15px;
}
.honest-list strong { color: var(--text); }

/* -----------------------------------------------------------------------------
   9. フッタ
   --------------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s7);
  background: var(--surface);
}
.foot-inner {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  align-items: flex-start; justify-content: space-between;
}
.foot-brand { max-width: 40ch; }
.foot-brand svg { width: 28px; height: 28px; display: block; margin-bottom: var(--s3); }
.foot-brand p { margin: 0; color: var(--text-3); font-size: 14px; }

.site-foot nav {
  display: grid; gap: var(--s3);
  font-size: 14px;
}
.site-foot nav a {
  color: var(--text-2); text-decoration: none;
  transition: color var(--fast);
}
.site-foot nav a:hover { color: var(--text); }