/* site/product.css — Orchestrator の Product ページ（Light）の様式。素の CSS 1ファイル。
   依存なし・CDN なし・JS なし。**外部参照は assets/Aijus-Regular.otf の1つだけ。**
   （このファイルは styles.css を読まない。Product は Light、Concept は Dark で、地の色を混ぜない。） */

/* 作り

   - **山場（`.peak`）と、支える節（`.quiet`）の強弱は、末尾の「強弱の設計」に
     まとめてある。**読み手は、まずそこを見れば強弱を追える。
   - Light のテーマ・カード・端末の絵・組織図・流れ・窓・格子・概念図を、その形のまま活かす。
   - 作法（Aijus の当て方・`skewX(-10deg)`・`.lang`）は Concept の `styles.css` と揃える。

   決めたこと

   1. 色は決めた組み合わせからだけ作る。**紫 #8A2BE2 は字に使わない**——
      白地では 5.96 あるが、面と罫にだけ置く。
     状態の緑 #1F9D55 は 3.49、琥珀 #B7791F は 3.64——**罫や点には使えるが、小さな字には足りない。**
     そこで小さな字には濃い側（--ok-ink / --warn-ink）を置いた。
   2. 書体は `assets/Aijus-Regular.otf`（**欧文だけの書体**）。総称と並べて置き、
      **当てた場所はすべて `transform: skewX(-10deg)` で傾ける**——
      `font-style: oblique` はこの書体に効かない（実測。**書かない**）。
      インラインの要素には `display: inline-block` を付ける。既に箱であるものの `display` は書き換えない。
      **和文の本文は総称のまま正立**させる（日本語が寝ない）。
   3. **狭い画面を既定**にして、`min-width` の側で広げる。図は横に縮めず、**縦に積む**。
   4. 絵を描かない。**罫と余白と字だけで組む**——挿絵・インライン SVG・絵文字を使わない。
   5. 小さな字の青は `#0072FF`（白地で 4.33）ではなく `--blue-ink: #0057C2`（同 6.68）を使う。
   6. 押せるものの境目は 3:1 を満たす濃さにする（`--line` #DCE3EE は白地で 1.29 であり、
      **操作の境界として見えない**）。 */

/* ================================================================ 値 */

:root {
  /* 地（白）と地（薄い青灰） */
  --bg: #FFFFFF;
  --bg-soft: #F5F7FB;

  /* 字と、弱い字 */
  --ink: #0F1B2D;
  --ink-dim: #5A6B82;              /* 白地 5.44 / 薄い青灰の上 5.07。小さい字でも AA */

  /* 罫。--line は節と枠の骨格、--line-strong は箱の縁、
     --line-control は**押せるものの境界**（白地 3.01。これを薄くすると操作が見えなくなる） */
  --line: #DCE3EE;
  --line-strong: #C3CFE0;
  --line-control: #8596B0;

  /* 主色とアクセント */
  --blue: #0072FF;                 /* 罫・面・大きい字用（白地 4.33） */
  --blue-ink: #0057C2;             /* 小さい字用（白地 6.68） */
  --blue-fill: #0068EA;            /* 白字を載せる面の明るい端（白字 5.04） */
  --blue-fill-deep: #0050C0;       /* 同・暗い端（白字 7.22） */
  --cyan: #00C6FF;                 /* 濃い地の上だけ（#0F1B2D の上で 8.66） */
  --violet: #8A2BE2;               /* **字に使わない**（白地 5.96。決めに従い、罫にだけ置く） */

  /* 状態。濃い側は字用 */
  --ok: #1F9D55;                   /* 白地 3.49（点・罫用） */
  --ok-ink: #14713D;               /* 白地 6.07（字用） */
  /* 琥珀。**この2つは、いま当てていない**——契約のクラス表に、
     「動いている」以外の状態を出す印が無いためである（**印を勝手に作らない**）。
     状態の印が HTML に来たら、ここから取る */
  --warn: #B7791F;                 /* 白地 3.64（点・罫用） */
  --warn-ink: #8A5A13;             /* 白地 5.91（字用） */

  /* 薄い面 */
  --tint-blue: #EAF3FF;
  --tint-cyan: #E6F8FF;
  --tint-violet: #F4ECFE;

  /* 濃い地（端末の絵と、結びの帯） */
  --dark: #0F1B2D;
  --dark-2: #123E86;
  --on-dark-dim: #D7E2F2;          /* #0B58C4 の上で 5.0 */

  --shadow: 0 12px 30px rgba(15, 27, 45, .06);

  --font-jp: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  /* Aijus は欧文だけの書体。無い字（仮名 ≒ ＝ → ● など）は総称へ落ちる */
  --font-en: "Aijus", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --content: 1180px;
  --gutter: clamp(16px, 5vw, 40px);
  --pad-inline: max(var(--gutter), calc((100% - var(--content)) / 2));

  --radius: 14px;
  --ease: .18s ease;
}

/* ============================================================== 書体 */

/* 自前の1つだけ。CDN を読まない。表示は止めない */
@font-face {
  font-family: "Aijus";
  src: url("assets/Aijus-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================== 下地 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 頭が貼り付くので、飛び先をその分だけ下げる。狭い画面では目次が2行目へ落ちる */
  scroll-padding-block-start: 104px;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* 図の並びは、すべて自分で組む（点を出さない） */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--blue-ink);
  text-underline-offset: .2em;
}

/* Aijus に斜体は無い。**合成の斜体を掛けない**（掛けても効かない。実測） */
em,
i,
cite,
dfn {
  font-style: normal;
}

/* 鍵で辿ったときだけ、はっきり見える輪を出す */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background-color: var(--cyan);
  color: var(--dark);
}

/* -------------------------------------------- Aijus を当てる場所（すべて傾ける）

   **和文の本文はここへ入れない。**総称のまま正立させる。
   インラインの要素は `display: inline-block` を添える（**`transform` はインラインに掛からない**）。
   既に箱であるもの（`.button`・`.kind` の面・`.stack-node` の段など）は `display` を書き換えない。 */

.brand span,
.brand b,
.eyebrow,
.section-label,
.kicker,
.lang,
.nav nav a,
.nav-cta,
.download-nav,
.os-list > *,
.provider-cat,
.provider-name,
.kind,
.overview-key,
.overview-sub,
.flow-actor,
.step-no,
.crossing-node,
.path-head,
.orgtree-role,
.orgtree-kind {
  font-family: var(--font-en);
  display: inline-block;
  transform: skewX(-10deg);
}

/* 既に箱であるもの（`flex`・`grid`・`block`）。**`display` を書き換えない**——中央寄せや間隔が落ちる */
.button,
.formula-eq,
.stack-node.ai > small,
.machine-head b,
.machine-head em,
.machine-head span,
.machine-head small {
  font-family: var(--font-en);
  transform: skewX(-10deg);
}

/* ---------------------------------------------------------------- 頭 */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(10px, 2.6vw, 24px);
  padding-block: clamp(10px, 2vw, 14px);
  padding-inline: var(--pad-inline);
  background-color: rgba(255, 255, 255, .88);
  border-block-end: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* 透かしが使えない環境では、地をそのまま敷く */
@supports not (backdrop-filter: blur(1px)) {
  .nav {
    background-color: var(--bg);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: clamp(15px, 2.8vw, 19px);
  line-height: 1.2;
  letter-spacing: .03em;
  text-decoration: none;
}

/* 記章（assets/orchestrator-4a-mark.svg）。**既に skewX(-10) で描かれている**ので、ここでは傾けない */
.mark {
  flex: none;
  inline-size: clamp(20px, 4.2vw, 26px);
}

/* 目次。狭い画面では2行目へ落として、**隠さない**（Download の導線を消さない） */
.nav nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(12px, 2.4vw, 26px);
  font-size: clamp(13px, 2.2vw, 14px);
}

.nav nav a {
  padding-block: .3em;
  color: var(--ink-dim);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.nav nav a:hover {
  color: var(--ink);
  border-block-end-color: var(--blue);
}

/* 目次の中の Download だけは、押せる先として色で示す */
.download-nav {
  color: var(--blue-ink);
}

/* 頭の Download（主の導線）。**境目は 3:1 を満たす青**にする */
.nav-cta {
  flex: none;
  padding: .5em 1.05em;
  color: var(--blue-ink);
  font-size: clamp(13px, 2.2vw, 14px);
  line-height: 1.2;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid var(--blue);
  border-radius: 999px;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}

.nav-cta:hover {
  color: var(--blue-ink);
  background-color: var(--tint-blue);
}

/* 日本語 / English の切り替え。**目立たないが押せる**——頭の中で .nav-cta の隣に並ぶ。
   中身は lang.js が入れる（`en` / `ja` の2字）ので、幅は成り行きでよい。 */
.lang {
  flex: none;
  /* 余りを左へ寄せ、切り替えと .nav-cta を右の端へまとめる（**隣り合って並ぶ**） */
  margin-inline-start: auto;
  padding: .5em .85em;
  color: var(--ink-dim);
  font-size: clamp(12px, 2.2vw, 13px);
  line-height: 1.2;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

.lang:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
  background-color: var(--bg-soft);
}

/* ---------------------------------------------------------- 押せるもの */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 22px;
  font-size: clamp(13px, 2.3vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform var(--ease), box-shadow var(--ease),
    border-color var(--ease), color var(--ease), background-color var(--ease);
}

/* 主のボタン。**白字が 5 を割らない青**で組む（#0072FF は 4.33 である） */
.button.primary {
  background-image: linear-gradient(135deg, var(--blue-fill), var(--blue-fill-deep));
  color: #FFFFFF;
}

.button.primary:hover {
  /* **傾きを落とさない。**`transform` は1つの値なので、書き直すときは必ず添える */
  transform: skewX(-10deg) translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 114, 255, .28);
}

/* 控えのボタン。**境目は青**（薄い罫は白地で 1.6 であり、操作の境界に見えない） */
.button.ghost {
  color: var(--ink);
  border-color: var(--blue);
}

.button.ghost:hover {
  color: var(--blue-ink);
  background-color: var(--tint-blue);
}

/* 配布の1つだけ大きい */
.button.large {
  padding: 16px 30px;
  font-size: clamp(15px, 3vw, 17px);
  font-weight: 400;
  letter-spacing: .02em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 14px);
  margin-block-start: clamp(22px, 4vw, 34px);
}

/* ------------------------------------------------------------ 節の共通 */

.section {
  padding-block: clamp(52px, 9vw, 92px);
  padding-inline: var(--pad-inline);
  border-block-start: 1px solid var(--line);
}

/* 節の中の要素の間隔。**` :where()` はかかりが 0 なので、クラスの付いた規則が必ず上書きできる** */
:where(.section, .overview, .download-cta) > :where(p, ul, ol, div, figure) + :where(p, ul, ol, div, figure, .note) {
  margin-block-start: clamp(18px, 3.6vw, 28px);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 2.2vw, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.section-label::before {
  content: "";
  flex: none;
  inline-size: clamp(18px, 3.5vw, 26px);
  block-size: 2px;
  border-radius: 2px;
  background-color: var(--blue);
}

.kicker {
  margin-block-start: clamp(20px, 4vw, 32px);
  font-size: clamp(10px, 2.2vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

/* 記章の線（参考の DOM にある空の span）。無ければ何も出ない */
.eyebrow span {
  flex: none;
  inline-size: clamp(18px, 3.5vw, 26px);
  block-size: 2px;
  border-radius: 2px;
  background-color: var(--blue);
}

.section h2,
.overview h2,
.download-cta h2 {
  margin-block-start: clamp(12px, 2.4vw, 18px);
  font-size: clamp(26px, 7.2vw, 44px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* 見出しの中で差し色になる一語。**和文なので正立**させる（傾けない）。

   印を2つ見ている。**`<span>` はその見出しに1つだけのとき**だけ差し色にする——
   Concept の側は `<em>` を差し色にする。
  行ごとに `data-en` を付ける書き方（`<span>` が複数）では、地の字のまま置く。 */
h1 em,
h2 em,
h1 > span:only-of-type,
h2 > span:only-of-type {
  color: var(--blue-ink);
}

.lead {
  max-inline-size: 44rem;
  margin-block-start: clamp(16px, 3vw, 22px);
  margin-inline: auto;
  font-size: clamp(15px, 3.4vw, 17px);
  line-height: 1.95;
  color: var(--ink);
}

.note {
  max-inline-size: 44rem;
  margin-block-start: clamp(16px, 3.2vw, 22px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: clamp(12px, 2.6vw, 13px);
  text-align: center;
}

/* 断りの1文（参考の manifesto）。上下の罫と薄い面だけで帯にする */
.statement {
  max-inline-size: 46rem;
  margin-block-start: clamp(26px, 5vw, 40px);
  margin-inline: auto;
  padding: clamp(16px, 3.4vw, 24px);
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--blue);
  border-radius: var(--radius);
  font-size: clamp(14px, 2.6vw, 16px);
  line-height: 1.9;
}

.statement :is(b, strong) {
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------------------------------ 01 題 */

/* 節のクラスが付かない場合も届くよう、id でも当てる */
#top {
  padding-block: clamp(48px, 11vw, 116px) clamp(40px, 9vw, 88px);
  text-align: center;
}

#top h1 {
  margin-block-start: clamp(16px, 3vw, 24px);
  font-size: clamp(28px, 8.6vw, 60px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.045em;
  text-wrap: balance;
}

#top .cta-row,
.download-cta .cta-row {
  justify-content: center;
}

/* ================================================================ 図 */

/* **罫と余白と字だけで組む。**どの図も、狭い画面では縦に積む（横に縮めない） */

/* ------------------------------------------------------ 02 WRAP / 段 */

.stack {
  display: grid;
  justify-items: center;
  max-inline-size: 36rem;
  margin-block-start: clamp(26px, 5vw, 40px);
  margin-inline: auto;
  text-align: center;
}

.stack-node {
  inline-size: 100%;
  padding: 14px 18px;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: clamp(13px, 2.8vw, 14px);
}

/* 段の中の字は、名（ARIA・Persona・Claude Code など）なので傾ける。
   **端末の本文（`pre`）は傾けない**——端末は面として置く */
.stack-node > * {
  display: block;
}

.stack-node > :not(pre, code) {
  transform: skewX(-10deg);
}

.stack-node > * + * {
  margin-block-start: 3px;
  font-size: .86em;
  color: var(--ink-dim);
}

/* 端末の絵（参考の濃い端末）。**AI の段だけを濃くする** */
.stack-node.ai {
  background-color: var(--dark);
  border-color: var(--dark);
  color: #FFFFFF;
}

.stack-node.ai > *,
.stack-node.ai > :not(pre, code) {
  color: rgba(255, 255, 255, .84);
}

.stack-node.ai > small,
.stack-node.ai > strong,
.stack-node.ai > b {
  color: #FFFFFF;
  letter-spacing: .14em;
}

.stack-node pre,
.stack-node code {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  color: var(--on-dark-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.stack-arrow {
  display: block;
  inline-size: 100%;
  padding-block: 6px;
  color: var(--blue-ink);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.stack-note {
  max-inline-size: 40rem;
  margin-block-start: clamp(14px, 3vw, 18px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 13px;
  text-align: center;
}

/* 誰にどの AI を当てるかの一覧（ARIA → Claude Code など）。**固定対応ではない例** */
.persona-map {
  max-inline-size: 34rem;
  margin-block-start: clamp(22px, 4.4vw, 32px);
  margin-inline: auto;
  padding: 2px clamp(14px, 3vw, 20px);
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.persona-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding-block: 11px;
  border-block-start: 1px solid var(--line);
  font-size: 13px;
  text-align: start;
}

.persona-map-row:first-child {
  border-block-start: 0;
}

.persona-map-row :is(b, strong) {
  font-family: var(--font-en);
  font-size: 14px;
  text-decoration: none;
  transform: skewX(-10deg);
}

.persona-map-row :is(span, i, small) {
  color: var(--ink-dim);
}

/* --------------------------------------------------- 03 PERSONA / 表 */

.persona-table {
  inline-size: 100%;
  margin-block-start: clamp(24px, 5vw, 40px);
  font-size: clamp(12px, 2.7vw, 13px);
}

.persona-table th {
  padding: 0 0 10px;
  padding-inline-end: clamp(8px, 2vw, 14px);
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  text-align: start;
  vertical-align: bottom;
  border-block-end: 1px solid var(--line-strong);
}

.persona-table td {
  padding: 12px 0;
  padding-inline-end: clamp(8px, 2vw, 14px);
  text-align: start;
  vertical-align: baseline;
  border-block-end: 1px solid var(--line);
}

.persona-table tbody tr:last-child td {
  border-block-end: 0;
}

.persona-table :is(b, strong) {
  font-weight: 600;
}

/* 種別の印。**字は薄い罫の上でも 5 を割らない色**にする。**紫は字に使わない** */
.kind {
  padding: 2px 9px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .12em;
  color: var(--ink-dim);
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.kind.human {
  color: var(--ink);
}

.kind.ai {
  color: var(--blue-ink);
  background-color: var(--tint-blue);
  border-color: #BFDBFF;
}

/* Persona ≠ AI Agent の一節 */
.formula {
  max-inline-size: 40rem;
  margin-block-start: clamp(24px, 5vw, 36px);
  margin-inline: auto;
  padding: clamp(16px, 3.6vw, 26px);
  text-align: center;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.formula-eq {
  display: inline-block;
  font-size: clamp(16px, 3.6vw, 21px);
  line-height: 1.6;
  letter-spacing: .01em;
}

.formula p {
  margin-block-start: 6px;
  color: var(--ink-dim);
  font-size: clamp(13px, 2.8vw, 14px);
}

/* ------------------------------------------------ 04 ORGANIZATION / 樹 */

.orgtree {
  margin-block-start: clamp(26px, 5vw, 44px);
  display: grid;
  justify-items: start;
}

.orgtree-root,
.orgtree-node {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: start;
}

.orgtree-root {
  border-color: var(--blue);
}

.orgtree-root > :is(b, strong),
.orgtree-node > :is(b, strong) {
  font-family: var(--font-en);
  font-size: clamp(14px, 2.9vw, 16px);
  font-weight: 400;
  letter-spacing: .02em;
  transform: skewX(-10deg);
}

.orgtree-role {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .06em;
}

.orgtree-kind {
  align-self: start;
  margin-block-start: 4px;
  padding: 1px 8px;
  color: var(--ink-dim);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .12em;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* 縦に積む（狭い画面の既定）。幹を1本引き、枝で各の段へつなぐ */
.orgtree-list {
  position: relative;
  display: grid;
  gap: 12px;
  margin-block-start: 16px;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--line);
}

.orgtree-list::before {
  content: "";
  position: absolute;
  inset-block-start: -16px;
  inset-inline-start: -2px;
  inline-size: 2px;
  block-size: 16px;
  background-color: var(--line);
}

.orgtree-node {
  position: relative;
}

.orgtree-node::before {
  content: "";
  position: absolute;
  inset-block-start: 24px;
  inset-inline-start: -22px;
  inline-size: 20px;
  block-size: 2px;
  background-color: var(--line);
}

/* ----------------------------------------------------- 05 PROJECT / 境界 */

.boundary {
  max-inline-size: 40rem;
  margin-block-start: clamp(24px, 5vw, 40px);
  margin-inline: auto;
  padding: clamp(18px, 3.8vw, 28px);
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.boundary > :is(b, strong, h3) {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(14px, 3vw, 17px);
  font-weight: 400;
  letter-spacing: .12em;
  transform: skewX(-10deg);
}

.boundary-list {
  display: grid;
  gap: 10px;
  margin-block-start: clamp(14px, 3vw, 20px);
}

.boundary-node {
  padding: 8px 13px;
  font-size: 12px;
  letter-spacing: .04em;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* 節点の中の小札と、値。**同じ行に密着していた**——
   `PROJECTProject Atlas` と1語に見えていた。罫の下で2段に割る。
   `.boundary > :is(b, strong)` は**直下の子にしか当たっておらず**、
   `.boundary-node` の中の `b` は素のままだった */
.boundary-node > :is(b, strong) {
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--blue-ink);
  transform: skewX(-10deg);
}

.boundary-node > span {
  display: block;
  margin-block-start: 2px;
  font-size: 13px;
}

/* ------------------------------------------------------ 06 WORKFLOW / 流れ */

.flowchart {
  display: grid;
  justify-items: center;
  max-inline-size: 34rem;
  margin-block-start: clamp(24px, 5vw, 40px);
  margin-inline: auto;
}

.flow-step {
  inline-size: 100%;
  padding: 13px 18px;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.flow-actor {
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--blue-ink);
}

.flow-task {
  display: block;
  margin-block-start: 2px;
  font-size: clamp(14px, 3vw, 16px);
}

.flow-arrow {
  display: block;
  inline-size: 100%;
  padding-block: 5px;
  color: var(--blue-ink);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

/* 分かれ道（指摘あり？ YES / NO）。**破線で、決める段だと示す。**罫は紫の側——
   参考も、レビューの段を紫の側の罫で囲っていた。**字には使わない** */
.flow-branch {
  inline-size: 100%;
  padding: 12px 18px;
  text-align: center;
  border: 1px dashed var(--violet);
  border-radius: 12px;
}

.flow-branch > * + * {
  margin-block-start: 8px;
}

.flow-caption {
  display: block;
  max-inline-size: 34rem;
  margin-block-start: 10px;
  color: var(--ink-dim);
  font-size: 11px;
  text-align: center;
}

/* 図の最後の段（Deploy）だけを濃くする。**印が契約に無いので、位置で当てる**——
   当たらなければ、ただの白い段のままになる（崩れない） */
.flowchart > .flow-step:last-child {
  background-color: var(--dark);
  border-color: var(--dark);
  color: #FFFFFF;
}

.flowchart > .flow-step:last-child .flow-actor {
  color: var(--cyan);
}

/* ---------------------------------------------------- 07 CLI × SLACK / 交差 */

.crossing {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-block-start: clamp(24px, 5vw, 40px);
}

.crossing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}

.crossing-node {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .04em;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.crossing-node pre,
.crossing-node code {
  font-family: var(--font-mono);
  font-size: 11px;
}

.crossing-arrow {
  color: var(--blue-ink);
  font-size: 13px;
  line-height: 1;
}

/* ----------------------------------------------------- 08 SHARED / 2枚 */

.two-paths {
  display: grid;
  gap: clamp(12px, 2.8vw, 18px);
  margin-block-start: clamp(24px, 5vw, 40px);
}

.path {
  padding: clamp(20px, 4.4vw, 32px);
  text-align: center;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.path-head {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.path-body {
  display: block;
  margin-block-start: 10px;
}

.path :is(h3, h4) {
  font-family: var(--font-en);
  font-size: clamp(18px, 4.2vw, 24px);
  font-weight: 400;
  letter-spacing: .08em;
  transform: skewX(-10deg);
}

.path p {
  margin-block-start: 4px;
  color: var(--ink-dim);
  font-size: 13px;
}

/* -------------------------------------------------- 09 IDENTITY / 定義 */

.identity-list {
  display: grid;
  margin-block-start: clamp(24px, 5vw, 40px);
}

.identity-term {
  display: block;
  margin-block-start: 14px;
  padding-block-start: 14px;
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .14em;
  border-block-start: 1px solid var(--line);
}

.identity-term:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.identity-value {
  display: block;
  margin: 0;
  font-size: clamp(14px, 2.9vw, 15px);
}

/* ------------------------------------------------- 10 WORKPLACE / 窓 */

.machine {
  max-inline-size: 44rem;
  margin-block-start: clamp(24px, 5vw, 40px);
  margin-inline: auto;
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.machine-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 13px clamp(14px, 3vw, 20px);
  background-color: var(--bg-soft);
  border-block-end: 1px solid var(--line);
  font-size: 12px;
}

.machine-head :is(b, strong) {
  font-weight: 400;
  letter-spacing: .02em;
}

/* 状態の字。**緑は薄い罫の上でも 5 を割らない濃い側**を使う */
.machine-head :is(em, small) {
  color: var(--ok-ink);
  font-size: 11px;
  letter-spacing: .08em;
}

.machine-head span {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .08em;
}

.machine-body {
  padding: clamp(14px, 3vw, 20px);
}

.machine-list {
  display: grid;
}

.machine-list > * {
  display: grid;
  gap: 2px 12px;
  padding-block: 11px;
  border-block-start: 1px solid var(--line);
  font-size: clamp(11px, 2.6vw, 12px);
}

.machine-list > *:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

/* 名（Persona）と道具（AI Agent）は傾ける。**説明になりうる `span`・`small` は正立** */
.machine-list :is(b, strong, i) {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .03em;
  display: inline-block;
  transform: skewX(-10deg);
}

.machine-list :is(span, small) {
  color: var(--ink-dim);
}

/* 対応する環境。**中身は欧文の名**なので傾ける */
.os-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: clamp(18px, 3.6vw, 24px);
}

.os-list > * {
  padding: 6px 12px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .04em;
  background-color: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

/* ------------------------------------------------ 11 INFRASTRUCTURE / 格子 */

/* 列数: 狭い画面は1列、40rem で2列、64rem で3列（**7つの区分を3列で並べる**） */
.providers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2.4vw, 14px);
  margin-block-start: clamp(24px, 5vw, 40px);
}

.provider-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: clamp(16px, 3.4vw, 22px);
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.provider-cat {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.provider-name {
  font-size: clamp(15px, 3vw, 17px);
  letter-spacing: .02em;
  color: var(--ink);
}

.provider-note {
  color: var(--ink-dim);
  font-size: 12px;
}

/* ------------------------------------------------ 12 PROVISIONING / 段取り */

.steps {
  display: grid;
  margin-block-start: clamp(24px, 5vw, 40px);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  align-items: baseline;
  padding-block: clamp(14px, 3vw, 18px);
  border-block-start: 1px solid var(--line);
}

.step:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.step-no {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--blue-ink);
}

.step-body {
  font-size: clamp(13px, 2.8vw, 15px);
}

.step-body :is(b, strong) {
  display: block;
  font-weight: 600;
}

.step-body :is(p, small) {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
}

/* ------------------------------------------------- 13 OVERVIEW / 概念図 */

.overview {
  max-inline-size: 62rem;
  margin-block-start: clamp(20px, 4vw, 32px);
  margin-inline: auto;
  padding: clamp(20px, 4.6vw, 44px);
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.overview > :is(b, strong) {
  display: block;
  margin-block-end: clamp(14px, 3vw, 20px);
  font-family: var(--font-en);
  font-size: clamp(13px, 2.8vw, 15px);
  font-weight: 400;
  letter-spacing: .16em;
  transform: skewX(-10deg);
}

/* 幹を1本引いて、各の段を枝でつなぐ（ASCII の `├─` を罫で組む） */
.overview-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding-block: 10px;
  padding-inline-start: 26px;
  border-inline-start: 2px solid var(--line);
}

.overview-line::before {
  content: "";
  position: absolute;
  inset-block-start: 21px;
  inset-inline-start: 0;
  inline-size: 14px;
  block-size: 2px;
  background-color: var(--line);
}

.overview-key {
  font-size: clamp(13px, 2.9vw, 15px);
  letter-spacing: .04em;
  color: var(--ink);
}

.overview-sub {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-dim);
}

/* -------------------------------------------------------- 14 結びの帯 */

/* 地は Orchestrator Blue の側。**白の字が 4.5 を割らない濃さ**で組む */
.download-cta {
  max-inline-size: var(--content);
  margin-block-start: clamp(24px, 5vw, 40px);
  margin-inline: auto;
  padding: clamp(44px, 9vw, 88px) clamp(20px, 5vw, 56px);
  text-align: center;
  color: #FFFFFF;
  background-image: linear-gradient(135deg, var(--dark), var(--dark-2) 55%, #0B58C4);
  border-radius: clamp(18px, 3vw, 28px);
}

.download-cta .kicker,
.download-cta .section-label,
.download-cta .eyebrow {
  color: var(--cyan);
}

.download-cta .section-label::before,
.download-cta .eyebrow span {
  background-color: var(--cyan);
}

.download-cta h2 {
  color: #FFFFFF;
}

.download-cta h2 em,
.download-cta h2 > span:only-of-type {
  color: var(--cyan);
}

.download-cta p {
  color: var(--on-dark-dim);
}

/* 濃い地の上では、主のボタンを白へ反転させる（参考の `.download.light` と同じ扱い） */
.download-cta .button.primary {
  background-image: none;
  background-color: #FFFFFF;
  color: var(--ink);
}

.download-cta .button.primary:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.download-cta .button.ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
}

.download-cta .button.ghost:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, .12);
}

.download-note {
  max-inline-size: 40rem;
  margin-block-start: clamp(16px, 3.4vw, 24px);
  margin-inline: auto;
  color: var(--on-dark-dim);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

/* -------------------------------------------------------------- 足 */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 28px var(--pad-inline);
  background-color: var(--bg);
  border-block-start: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 12px;
}

footer p,
footer small {
  font-size: 12px;
}

/* ==================================================== 広い画面（既定は狭い） */

@media (min-width: 40rem) {
  .providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-list > * {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
  }
}

@media (min-width: 48rem) {
  .nav nav {
    order: 0;
    flex-basis: auto;
  }

  .section {
    padding-block: clamp(64px, 8vw, 108px);
  }

  /* 定義の並びを2段にして、語と値を横に並べる */
  .identity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 4vw, 44px);
  }

  .identity-term {
    margin-block-start: 0;
  }

  .identity-value {
    padding-block-start: 12px;
    border-block-start: 1px solid var(--line);
  }
}

@media (min-width: 56rem) {
  /* 組織図は横へ広げる。根の下に水平の罫を1本引き、各の段を枝でつなぐ */
  .orgtree {
    justify-items: center;
  }

  .orgtree-list {
    align-items: stretch;
    grid-auto-flow: column;
    margin-block-start: 18px;
    padding-block-start: 18px;
    padding-inline-start: 0;
    column-gap: 16px;
    border-inline-start: 0;
  }

  .orgtree-list::before {
    inset-block-start: 0;
    inset-inline-start: 8%;
    inline-size: 84%;
    block-size: 2px;
  }

  .orgtree-node::before {
    inset-block-start: -18px;
    inset-inline-start: 50%;
    inline-size: 2px;
    block-size: 18px;
  }

  .overview-key {
    min-inline-size: 11rem;
  }
}

@media (min-width: 64rem) {
  .providers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- 動き */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav nav a,
  .nav-cta,
  .lang,
  .button {
    transition: none;
  }

  .button.primary:hover {
    transform: skewX(-10deg);
  }
}

/* ------------------------------------------------------- 印刷（破綻しない程度） */

@page {
  margin: 18mm;
}

@media print {
  :root {
    --bg: #FFFFFF;
    --bg-soft: #FFFFFF;
    --ink: #101318;
    --ink-dim: #3E4A5C;
    --line: #B9C2CF;
    --line-strong: #8A96A8;
  }

  body {
    background-color: #FFFFFF;
    color: var(--ink);
    font-size: 10.5pt;
    line-height: 1.7;
  }

  .nav {
    position: static;
    background-color: transparent;
    backdrop-filter: none;
  }

  .nav nav,
  .lang,
  .cta-row,
  .button,
  .download {
    display: none;
  }

  /* 差し色は落として、罫と字だけにする */
  .section-label::before,
  .eyebrow span {
    background-color: var(--ink-dim);
  }

  .flow-branch {
    border-color: var(--line-strong);
  }

  .section {
    padding-block: 1.6rem;
  }

  #top {
    padding-block: 0 1.6rem;
  }

  #top h1 {
    font-size: 20pt;
  }

  .section h2,
  .download-cta h2 {
    font-size: 15pt;
  }

  /* 濃い面は落として、罫と字だけにする */
  .stack-node.ai,
  .flowchart > .flow-step:last-child,
  .download-cta {
    background-image: none;
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }

  .stack-node.ai > *,
  .stack-node.ai > :not(pre, code),
  .stack-node.ai > small,
  .stack-node.ai > strong,
  .stack-node.ai > b,
  .stack-node pre,
  .stack-node code,
  .flowchart > .flow-step:last-child .flow-actor,
  .download-cta p,
  .download-note {
    color: var(--ink);
  }

  .download-cta h2,
  .download-cta h2 em,
  .download-cta h2 > span:only-of-type {
    color: var(--ink);
  }

  .button.primary {
    background-image: none;
    background-color: var(--bg-soft);
    color: var(--ink);
  }

  a {
    color: var(--ink);
    text-decoration: underline;
  }

  .stack-node,
  .persona-map-row,
  .persona-table tr,
  .orgtree-node,
  .boundary-node,
  .flow-step,
  .path,
  .identity-list > *,
  .machine-list > *,
  .provider-card,
  .step,
  .overview-line {
    break-inside: avoid;
  }
}

/* 切り替えは、JS が動いてから見せる（**JS が無いとき、
   押しても何も起きないボタンを残さない**）。 */
.lang {
  display: none;
}

.lang-ready .lang {
  display: inline-flex;
}

/* ======================================================== 強弱の設計

   **情報を足していない。字を足していない。クラスも足していない**——
   `.peak`・`.quiet`・`.peak-figure` は既に HTML に在る。ここでしたのは、
   **同じ材料へ強弱を付け直すこと**だけである。

   **対比**（下限は狭い画面の値。括弧は広い画面＝`min-width` の側で開いた値）

   | 軸 | `.peak`（山場5節） | `.quiet`（支える9節） |
   | --- | --- | --- |
   | 節の余白 | 76px（104〜152px） | 44px（52〜64px） |
   | 見出し `h2` | 30px（42〜72px） | 20px（24〜32px） |
   | 本文 | 15px（〜17px） | 13.5px（〜15px） |
   | 節のラベル | 青・印は幅26〜44px・太さ3px | 灰・印は幅12〜18px・太さ2px |
   | 面（カード） | 白＋強い影 | 薄い青灰＋影なし |
   | 図 | `.peak-figure` の舞台の上で拡大 | 舞台を使わない |

   **下限（clamp の左端）を節ごとに変えるのが要である。**
   下限が揃っていると、狭い画面で全部が同じ強さへ戻る。
   **下限を割ると、速くスクロールしても山場が引っかからない。**

   **リズム**——「大きなメッセージ → 図 → 短い説明 → 実画面 → 十分な余白」。
   同じテンポで「見出し＋説明＋カード」が続かないよう、
   **山場は図（`.peak-figure`）を主役に据え、静かな節は字と罫へ落とす。 */

/* ------------------------------------------------- 節の余白と、影の強さ */

/* 山場の余白。**「次の節へ入った」と体で分かる量**にする */
.section.peak {
  padding-block: clamp(76px, 13vw, 132px);
  /* 山場の箱は浮かせる。**`--shadow` を節の内側で上書きする**ので、
     子孫の `box-shadow: var(--shadow)` がまとめて強くなる */
  --shadow: 0 18px 44px rgba(15, 27, 45, .09);
  border-block-start-color: var(--line-strong);
}

/* 静かな節の余白。**山場の半分以下**に詰める（薄い地と罫で区切る） */
.section.quiet {
  padding-block: clamp(44px, 6.6vw, 60px);
  /* 静かな節は影を持たない。**面は薄い地と罫だけで示す** */
  --shadow: none;
}

/* --------------------------------------------------------- 節のラベル */

/* 山場の印。**青い、長い、太い罫**——速くスクロールしても、ここが山場だと分かる */
.section.peak > .section-label {
  font-size: clamp(11px, 2.4vw, 13px);
  letter-spacing: .24em;
}

.section.peak > .section-label::before {
  inline-size: clamp(26px, 5vw, 44px);
  block-size: 3px;
}

/* 静かな節の印。**灰で、短く、細く。**ラベルは目次であって、見出しではない */
.section.quiet:not(#download) > .section-label {
  font-size: clamp(9.5px, 2.1vw, 11px);
  letter-spacing: .2em;
  color: var(--ink-dim);
}

.section.quiet:not(#download) > .section-label::before {
  inline-size: clamp(12px, 2.6vw, 18px);
  block-size: 2px;
  background-color: var(--line-strong);
}

/* --------------------------------------------------------------- 見出し */

.section.peak > h2 {
  margin-block-start: clamp(18px, 3vw, 28px);
  font-size: clamp(30px, 8vw, 58px);
  line-height: 1.14;
  letter-spacing: -.04em;
}

.section.quiet:not(#download) > h2 {
  margin-block-start: clamp(10px, 2vw, 14px);
  font-size: clamp(20px, 4.8vw, 28px);
  line-height: 1.32;
  letter-spacing: -.02em;
}

/* 見出しの下の息。**山場は広く、静かな節は狭く** */
.section.peak > h2 + * {
  margin-block-start: clamp(22px, 3.6vw, 34px);
}

.section.quiet:not(#download) > h2 + * {
  margin-block-start: clamp(12px, 2.4vw, 18px);
}

/* ----------------------------------------------------------- 説明の字 */

.section.peak > p {
  font-size: clamp(15px, 2.9vw, 17px);
  line-height: 1.95;
}

.section.quiet:not(#download) > p {
  font-size: clamp(13.5px, 2.6vw, 15px);
  line-height: 1.88;
}

/* 静かな節では、**2つ目以降の段落を弱い字へ落とす。**
   ——説明として読ませる。**節の頭の1文だけが強い。**
   （`--ink-dim` は白地 5.44。**小さくなっても AA を割らない**） */
.section.quiet:not(#download) > p + p,
.overview.quiet p + p {
  color: var(--ink-dim);
}

.section.quiet:not(#download) > .note,
.section.quiet:not(#download) .note {
  font-size: clamp(11.5px, 2.4vw, 13px);
}

/* 静かな節の中の間隔（` :where()` の規則はかかりが 0 なので、ここで詰める） */
.section.quiet:not(#download) > * + * {
  margin-block-start: clamp(14px, 2.8vw, 20px);
}

/* ------------------------------------------------- 図の舞台（`.peak-figure`） */

/* 山場の図を、**節の説明と混ざらない面へ載せる。**
   白い段と濃い段は、この舞台の上で浮く。**図が説明より先に目に入る** */
.peak-figure {
  margin-block: clamp(34px, 6vw, 60px);
  padding: clamp(18px, 3.6vw, 40px) clamp(14px, 3vw, 36px);
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 2.4vw, 22px);
}

/* 舞台の中の図は、自分の上余白を持たない。**余白は舞台が持つ** */
.peak-figure > :where(.stack, .orgtree, .flowchart, .two-paths) {
  margin-block-start: 0;
}

/* 図の幅。**山場の図は、このページで一番広い図**である（横に縮めない） */
.peak-figure .stack {
  max-inline-size: 46rem;
}

.peak-figure .flowchart {
  max-inline-size: 44rem;
}

.peak-figure .orgtree,
.peak-figure .two-paths {
  max-inline-size: 54rem;
  margin-inline: auto;
}

/* -------------------------------------- 山場 01 WRAP の図（この節は特に重要） */

/* `ARIA → Persona → orchestrator-agent → Claude Code` の縦の流れと、
   `CLI ↔ ARIA ↔ Slack` の関係を一目で。**段を大きく、矢印を強く**する */

.peak-figure .stack-node {
  padding: clamp(16px, 3.2vw, 22px) clamp(18px, 3.6vw, 26px);
  border-radius: 14px;
  font-size: clamp(15px, 3.2vw, 18px);
}

/* 段の中の名は、字間を少し開けて置く */
.peak-figure .stack-node > :not(pre, code) {
  letter-spacing: .02em;
}

/* 「Persona」「wraps」——段と段の間に落ちる語。**小さく、字間を開けて**、
   段そのものと混ざらないようにする */
.peak-figure .stack-note {
  margin-block-start: clamp(10px, 2vw, 14px);
  font-size: clamp(11px, 2.3vw, 13px);
  letter-spacing: .16em;
  color: var(--blue-ink);
}

/* 最後の1行（`CLI ↔ ARIA ↔ Slack`）は、**この節の主張そのもの**——
   罫と薄い面で帯にする（字は `--blue-ink`。白地 6.68） */
.peak-figure .stack-note:last-child {
  margin-block-start: clamp(14px, 2.8vw, 20px);
  padding: 7px 16px;
  font-size: clamp(12px, 2.5vw, 14px);
  letter-spacing: .1em;
  background-color: var(--tint-blue);
  border: 1px solid #BFDBFF;
  border-radius: 999px;
}

/* 矢印。**太く、大きく、青で。**（22px は大きい字なので、白地 4.33 で足りる） */
.peak-figure .stack-arrow {
  padding-block: clamp(8px, 1.8vw, 14px);
  color: var(--blue);
  font-size: clamp(17px, 3.4vw, 22px);
  font-weight: 700;
}

/* 誰にどの CLI を当てるかの一覧（**固定の組み合わせではない例**）。
   山場の中でも、これは説明なので静かに置く */
.peak .persona-map {
  max-inline-size: 40rem;
  margin-block-start: clamp(24px, 4.4vw, 34px);
}

.peak .persona-map-row {
  font-size: 14px;
}

.peak .persona-map-row :is(b, strong) {
  font-size: 15px;
}

/* --------------------------------------------- 山場 03 ORGANIZATION の図 */

.peak-figure .orgtree-root,
.peak-figure .orgtree-node {
  padding: clamp(14px, 3vw, 20px) clamp(16px, 3.2vw, 24px);
  border-radius: 14px;
}

/* 根（Human の上司）は太い青で囲む。**ここから下が同じ組織である** */
.peak-figure .orgtree-root {
  border-width: 2px;
}

.peak-figure .orgtree-root > :is(b, strong),
.peak-figure .orgtree-node > :is(b, strong) {
  font-size: clamp(16px, 3.4vw, 21px);
}

.peak-figure .orgtree-role {
  font-size: clamp(11px, 2.4vw, 12.5px);
}

.peak-figure .orgtree-kind {
  font-size: 10px;
}

/* 枝を組む罫は、静かな節の罫より1段濃くして、木のかたちを見せる */
.peak-figure .orgtree-list {
  gap: clamp(12px, 2.6vw, 18px);
  border-inline-start-color: var(--line-strong);
}

.peak-figure .orgtree-list::before,
.peak-figure .orgtree-node::before {
  background-color: var(--line-strong);
}

/* ------------------------------------------------ 山場 05 WORKFLOW の図 */

.peak-figure .flow-step {
  padding: clamp(15px, 3vw, 20px) clamp(18px, 3.6vw, 26px);
  border-radius: 14px;
}

.peak-figure .flow-actor {
  font-size: clamp(10px, 2.2vw, 12px);
}

.peak-figure .flow-task {
  margin-block-start: 4px;
  font-size: clamp(15px, 3.2vw, 19px);
}

/* 引き継ぎの矢印。**「渡している」ことが見える太さ**にする */
.peak-figure .flow-arrow {
  padding-block: clamp(7px, 1.6vw, 12px);
  color: var(--blue);
  font-size: clamp(16px, 3.2vw, 20px);
  font-weight: 700;
}

/* 分かれ道（指摘あり？）。**破線のまま**——決める段であることを残す */
.peak-figure .flow-branch {
  padding: clamp(14px, 2.8vw, 20px) clamp(16px, 3.2vw, 24px);
  border-width: 2px;
}

.peak-figure .flow-caption {
  margin-block-start: clamp(10px, 2vw, 16px);
  font-size: clamp(11px, 2.3vw, 13px);
}

/* Deploy の段を濃くする当て方は、上の `.flowchart > .flow-step:last-child` である。

   分岐の中に段を置く形（`修正（YES）` と `Deploy` を並べる形）にすると
   `.flowchart` の最後の子が段ではなくなり、**当たらない**。
   **分岐の並びを変えるなら、当たっているかを測り直すこと。** */

/* --------------------------------------------- 山場 07 SHARED の2枚 */

.peak-figure .two-paths {
  gap: clamp(14px, 2.8vw, 24px);
}

.peak-figure .path {
  padding: clamp(26px, 4.8vw, 46px) clamp(20px, 4vw, 34px);
  border-radius: 18px;
  border-block-start-width: 3px;
  /* 中の字を、**カードの内側の幅**で測る（下の `cqi` の基準） */
  container-type: inline-size;
}

/* 会話の側と、成果物の側。**罫の色だけを変えて、2枚を見分けられるようにする**
   （紫は字に使わない。**罫にだけ置く**） */
.peak-figure .two-paths > .path:first-child {
  border-block-start-color: var(--blue);
}

.peak-figure .two-paths > .path:last-child {
  border-block-start-color: var(--violet);
}

.peak-figure .path-head {
  font-size: clamp(11px, 2.4vw, 13px);
}

/* 実体の名（SLACK / REPOSITORY）。**この節で一番大きい字**にする。

   ただし上限は**カードの内側の幅で決める**。Aijus は字幅が広く（1字あたり約 0.98em）、
   幅は**画面幅ではなく、2枚に割ったあとの幅**で決まる——`vw` で決めると、
   `REPOSITORY` の 10 字がカードの内側を超えて `REPOSITOR` / `Y` に割れる。
   よって**カード自身を基準にする `cqi`** を使う。`cqi` を解さない環境では
   この宣言が無効になり、上の既定の大きさのまま残る（**崩れない**） */
.peak-figure .path-body :is(b, strong) {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(20px, 8.4cqi, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--ink);
  transform: skewX(-10deg);
}

.peak-figure .path-body :is(span, small) {
  display: block;
  margin-block-start: clamp(6px, 1.4vw, 10px);
  color: var(--ink-dim);
  font-size: clamp(12px, 2.5vw, 15px);
}

/* ---------------------------------------- 山場 00 HERO（ページで一番大きい字） */

#top {
  padding-block: clamp(64px, 12vw, 136px) clamp(56px, 10vw, 112px);
}

#top h1 {
  margin-block-start: clamp(18px, 3.4vw, 28px);
  font-size: clamp(30px, 9vw, 62px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

#top .lead {
  margin-block-start: clamp(18px, 3.4vw, 28px);
  font-size: clamp(15px, 3.4vw, 18px);
}

/* 「AIエージェントを選ぶソフトウェアではありません」の断り。
   **HERO の中の、2番目に強い帯**として残す */
#top .statement {
  padding: clamp(18px, 3.6vw, 28px);
  font-size: clamp(14px, 2.8vw, 17px);
}

/* ------------------------------------------------- 静かな節の面（カード） */

/* 影を落とした白いカードをやめ、**薄い地と罫だけ**にする。
   山場の白い段と、ひと目で区別が付く */
.section.quiet .provider-card,
.section.quiet .boundary,
.section.quiet .crossing-node,
.section.quiet .os-list > * {
  background-color: var(--bg-soft);
}

/* 稼働マシンの窓は「実画面」なので、白のまま置く（**影だけが落ちる**） */

/* ------------------------------------------- 静かな節の例外（`#overview`） */

/* 概念図は `.overview` の面を持ったまま（`.section` ではない）、**静かな字へ** */
.overview.quiet {
  margin-block: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px);
}

.overview.quiet > .section-label {
  font-size: clamp(9.5px, 2.1vw, 11px);
  letter-spacing: .2em;
  color: var(--ink-dim);
}

.overview.quiet > .section-label::before {
  inline-size: clamp(12px, 2.6vw, 18px);
  background-color: var(--line-strong);
}

.overview.quiet h2 {
  font-size: clamp(20px, 4.6vw, 28px);
}

.overview.quiet .overview-key {
  font-size: clamp(12px, 2.7vw, 14px);
}

/* -------------------------------------------- 静かな節の例外（`#download`） */

/* 結びの帯。**地の濃さも、余白も、`.download-cta` の作法のまま**——
   静かな節の詰め方（44〜60px）へは落とさない（**濃い地はここだけ**）。
   見出しも、**静かな節の上限 32px ではなく、結びに足る大きさ**にする */
#download {
  padding-block: clamp(48px, 9vw, 88px);
}

#download h2 {
  font-size: clamp(26px, 6vw, 46px);
  line-height: 1.2;
}

#download p {
  font-size: clamp(14px, 2.8vw, 16px);
}

/* ============================================= 広い画面（落差をさらに開く）

   **狭い画面の下限は、既に節ごとに割ってある**（76 と 44、30 と 20）。
   ここでは `min-width` の側で、その差をさらに開く。 */

@media (min-width: 48rem) {
  .section.peak {
    padding-block: clamp(104px, 11.5vw, 152px);
  }

  .section.quiet {
    padding-block: clamp(52px, 5.4vw, 64px);
  }

  .section.peak > h2 {
    font-size: clamp(42px, 5.6vw, 72px);
  }

  .section.quiet:not(#download) > h2,
  .overview.quiet h2 {
    font-size: clamp(24px, 2.8vw, 32px);
  }

  #top h1 {
    font-size: clamp(44px, 5.4vw, 76px);
  }

  #download h2 {
    font-size: clamp(30px, 4vw, 48px);
  }

  /* 図は、広い画面でさらに広げる（**縮めない**） */
  .peak-figure .stack {
    max-inline-size: 48rem;
  }

  .peak-figure .flowchart {
    max-inline-size: 46rem;
  }

  .peak-figure .orgtree,
  .peak-figure .two-paths {
    max-inline-size: 58rem;
  }

  /* 実体の名（SLACK / REPOSITORY）の大きさは、**上の `cqi` の式が自分で止まる**——
     広い画面でもカードの内側は 382px で、8.4cqi は 32px にしかならない。
     よってここで上限を開き直さない（**開いても効かない規則を残さない**） */
}

/* ============================================================== 印刷

   **紙では、強弱は濃さの意味を持たない。**落差を消して、罫と字だけに戻す。
   （既存の印刷規則より後に置かないと、上の余白と見出しが勝ってしまう。） */

@media print {
  .section.peak,
  .section.quiet {
    padding-block: 1.6rem;
    --shadow: none;
  }

  #download {
    padding-block: 1.6rem;
  }

  .section.peak > h2,
  .section.quiet > h2,
  .overview.quiet h2,
  #download h2 {
    font-size: 15pt;
    letter-spacing: normal;
  }

  #top h1 {
    font-size: 20pt;
  }

  .peak-figure {
    margin-block: 1rem;
    padding: 0;
    background-color: transparent;
    border: 0;
  }

  /* 濃い段は、その濃さを落とす（既存の印刷規則と同じ扱い。**選択子は既存側の
     `.flowchart > .flow-step:last-child` に戻した**——Deploy が最後の段である） */

  .peak-figure .stack-arrow,
  .peak-figure .flow-arrow {
    color: var(--ink);
  }

  .peak-figure .stack-note:last-child {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
  }

  .peak-figure .two-paths > .path:first-child,
  .peak-figure .two-paths > .path:last-child {
    border-block-start-color: var(--line-strong);
  }

  .peak-figure .path-body :is(b, strong) {
    font-size: 15pt;
  }

  .section.quiet .provider-card,
  .section.quiet .boundary,
  .section.quiet .crossing-node,
  .section.quiet .os-list > * {
    background-color: transparent;
  }
}