/* ==========================================================================
   /ai-crm — Claude・ChatGPT × CRM 獲得ページ
   トップの「紙と糸」と同じ体系のまま、こちらは「実行ログ／仕様書」の顔にする。
   夜色のヒーロー・方眼・等幅ラベル・表組み。
   ========================================================================== */

main .label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--thread); margin-bottom: 22px;
}
main .label::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 2px; }
main .night .label, main .night.ai-hero .label { color: var(--thread-night); }

/* ---------- hero ---------- */
.ai-hero { position: relative; padding-top: calc(var(--header-h) + clamp(48px, 7vw, 100px)); padding-bottom: clamp(72px, 9vw, 128px); overflow: hidden; }
.ai-hero .grid-lines { -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 10%, transparent 70%); }
.ai-hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(40px, 5vw, 72px); align-items: center; position: relative; }
.ai-hero h1 {
  font-family: var(--serif); font-weight: 800; font-feature-settings: "palt" 1;
  font-size: clamp(1.7rem, 1rem + 1.95vw, 2.6rem); line-height: 1.45; letter-spacing: .01em;
}
.ai-hero h1 .brandword { color: var(--thread-night); }
.ai-hero .lead { margin-top: 26px; }
.spec {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  margin-top: 34px; border-top: 1px solid var(--rule-night); border-bottom: 1px solid var(--rule-night);
}
.spec div { padding: 12px 22px 12px 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--on-night-3); }
.spec div + div { padding-left: 22px; border-left: 1px solid var(--rule-night); }
.spec b { display: block; font-family: var(--sans); font-size: .95rem; letter-spacing: .02em; color: var(--on-night); margin-top: 2px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.hero-cta .fine { color: var(--on-night-3); }
.early {
  margin-top: 26px; display: flex; gap: 14px; align-items: baseline;
  font-size: .86rem; color: var(--on-night-2); border-left: 2px solid var(--thread-night); padding-left: 14px; max-width: 34em;
}
.early b { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--thread-night); white-space: nowrap; }
@media (max-width: 960px) { .ai-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .spec { grid-template-columns: 1fr 1fr; }
  .spec div, .spec div + div { padding: 12px 12px 12px 0; border-left: 0; }
  .spec div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule-night); }
  .spec div:nth-child(n+3) { border-top: 1px solid var(--rule-night); }
  .early { flex-direction: column; gap: 4px; }
}

/* セッションログ（ヒーロー・会話ログ共通） */
.session {
  background: var(--surface); color: var(--ink); border-radius: 14px; overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .06);
}
.session-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-soft); background: #f1efe9;
}
.session-bar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 0 3px var(--thread-glow); }
.session-bar .stat { margin-left: auto; color: var(--thread-2); font-weight: 700; }
.session-in { padding: 20px 20px 8px; }
.xrow { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 10px 0; font-size: .9rem; line-height: 1.8; }
.xrow .who { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--ink-3); padding-top: 4px; }
.xrow .who.ai { color: var(--thread); font-weight: 700; }
.xrow .who.gpt { color: #3b5b8a; font-weight: 700; }
.xrow.said .msg { font-weight: 700; }
.xrow .msg strong { font-weight: 700; }
.xtools { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px 90px; }
.xtool {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .7rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 5px; padding: 3px 8px; background: #fff;
}
.xtool i { width: 6px; height: 6px; border-radius: 2px; background: var(--thread); }
.xtool.ro i { background: #6b8fc2; }
.xtool em { font-style: normal; font-family: var(--sans); color: var(--ink-3); font-size: .7rem; }
.session-out { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 18px; border-top: 1px dashed var(--rule); background: var(--thread-tint); }
.session-out span { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; border: 1px solid rgba(15, 122, 95, .3); color: var(--thread-2); background: var(--surface); border-radius: 4px; padding: 3px 8px; }
.session-cap { margin-top: 12px; font-size: .76rem; color: var(--on-night-3); }
@media (max-width: 520px) {
  .xrow { grid-template-columns: 1fr; gap: 2px; }
  .xtools { padding-left: 0; }
}

/* ---------- ページ内目次（仕様書のタブ） ---------- */
.toc {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(245, 243, 238, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.toc ol { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.toc ol::-webkit-scrollbar { display: none; }
.toc a {
  display: flex; align-items: baseline; gap: 8px; padding: 14px 14px; white-space: nowrap;
  font-size: .84rem; font-weight: 700; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.toc a span { font-family: var(--mono); font-size: .66rem; font-weight: 400; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--thread); }
.toc a[aria-current="true"] span { color: var(--thread); }
.toc li:first-child a { padding-left: 0; }

/* ---------- shift（発想の転換） ---------- */
.shift-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.shift-col { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); }
.shift-col.before { border: 1px dashed var(--rule); color: var(--ink-3); }
.shift-col.after { background: var(--ink); color: var(--on-night); }
.shift-col .tag { margin-bottom: 18px; }
.shift-col.after .tag { background: transparent; color: var(--thread-night); border-color: rgba(79, 191, 152, .4); }
.shift-col h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); margin-bottom: 18px; color: var(--ink); }
.shift-col.after h3 { color: var(--on-night); }
.shift-col li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font-size: .93rem; }
.shift-col.after li { border-color: var(--rule-night); }
.shift-col li svg { width: 16px; height: 16px; margin-top: 6px; }
.shift-col.before li svg { color: #b4552d; }
.shift-col.after li svg { color: var(--thread-night); }
.shift-arrow { display: grid; place-items: center; color: var(--thread); }
.shift-arrow svg { width: 28px; height: 28px; }
@media (max-width: 860px) {
  .shift-grid { grid-template-columns: 1fr; }
  .shift-arrow { padding: 10px 0; transform: rotate(90deg); }
}

/* ---------- 01 how ---------- */
#how h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.85rem, 1.05rem + 2.9vw, 3.35rem); line-height: 1.34; font-feature-settings: "palt" 1; }
#how .lead { margin-top: 22px; }
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); position: relative; }
.rail::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 34px; height: 2px;
  background: linear-gradient(90deg, var(--thread) 0 0) no-repeat, var(--rule); background-size: calc(var(--p, 1) * 100%) 100%, 100% 100%;
}
.rnode { position: relative; text-align: center; padding: 0 clamp(12px, 2vw, 32px); }
.rnode .dot {
  width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; position: relative; z-index: 1;
  display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--rule);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-2);
}
.rnode.on .dot { background: var(--thread); border-color: var(--thread); color: #fff; box-shadow: 0 0 0 8px var(--thread-glow); }
.rnode .cap { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--ink-3); }
.rnode h3 { font-size: 1.08rem; font-weight: 700; margin: 6px 0 10px; }
.rnode p { font-size: .9rem; color: var(--ink-2); max-width: 22em; margin-inline: auto; }
@media (max-width: 760px) {
  .rail { grid-template-columns: 1fr; gap: 28px; }
  .rail::before { left: 34px; right: auto; top: 34px; bottom: 34px; width: 2px; height: auto; background: var(--thread); }
  .rnode { text-align: left; display: grid; grid-template-columns: 68px 1fr; gap: 0 18px; padding: 0; }
  .rnode .dot { margin: 0; grid-row: span 3; }
  .rnode p { margin: 0; }
}

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); border-top: 1.5px solid var(--ink); }
.way { padding: 24px clamp(16px, 2.4vw, 32px) 8px 0; }
.way + .way { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--rule); }
.way .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.way .k i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: .74rem; }
.way h3 { font-size: 1.12rem; font-weight: 700; margin: 14px 0 10px; }
.way p { font-size: .9rem; color: var(--ink-2); max-width: 34em; }
.way p b { color: var(--ink); }
@media (max-width: 860px) {
  .ways { grid-template-columns: 1fr; }
  .way, .way + .way { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- 02 MCP ---------- */
.mcp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.mcp-body p { color: var(--ink-2); margin-top: 16px; max-width: 34em; }
.mcp-body strong { color: var(--ink); }
.mcp-body em { font-style: normal; background: linear-gradient(180deg, transparent 60%, var(--thread-glow) 60%); }
.tools { background: var(--night); color: var(--on-night); border-radius: var(--r-lg); padding: 26px 26px 22px; box-shadow: var(--shadow-soft); }
.tools .th { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule-night); margin-bottom: 8px; }
.tools .th p { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--on-night-3); }
.tools .th b { font-size: .84rem; color: var(--thread-night); }
.trow { display: grid; grid-template-columns: 7.5em 1fr 2.2em; gap: 12px; align-items: center; padding: 7px 0; font-size: .86rem; }
.trow .nm { color: var(--on-night-2); }
.trow .sqs { display: flex; flex-wrap: wrap; gap: 3px; }
.trow .sqs i { width: 10px; height: 10px; border-radius: 2px; background: var(--thread-night); opacity: .85; }
.trow.b2 .sqs i { background: rgba(236, 238, 243, .45); }
.trow .n { font-family: var(--mono); text-align: right; color: var(--on-night); }
.split { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-night); display: grid; gap: 8px; }
.split > div { display: grid; grid-template-columns: 7.5em 1fr 2.2em; gap: 12px; align-items: center; font-size: .82rem; }
.split .sl { color: var(--on-night-2); }
.split .sb { height: 6px; border-radius: 3px; background: rgba(236, 238, 243, .1); overflow: hidden; }
.split .sb i { display: block; height: 100%; border-radius: 3px; }
.split .ro i { background: #7ea6dc; }
.split .wr i { background: var(--thread-night); }
.split .dg i { background: #e0a36a; }
.split .sn { font-family: var(--mono); text-align: right; }
.tools .tf { margin-top: 16px; font-size: .78rem; color: var(--on-night-3); line-height: 1.8; }
@media (max-width: 900px) { .mcp-grid { grid-template-columns: 1fr; } }

.fig { margin-top: clamp(56px, 7vw, 96px); }
.fig-bar { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.fig-bar b { color: var(--ink); }
.fig-bar .r { margin-left: auto; font-family: var(--sans); letter-spacing: .02em; }
.fig-img { display: block; width: fit-content; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-soft); background: #fff; transition: transform .4s var(--ease-out); }
.fig-img:hover { transform: translateY(-3px); }
.fig figcaption { margin-top: 12px; font-size: .8rem; color: var(--ink-3); }

/* ---------- 03 audit / ecosystem ---------- */
.trace-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tlog { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 10px 22px; box-shadow: var(--shadow-soft); }
.tlog li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; }
.tlog li:last-child { border-bottom: 0; }
.tlog time { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); padding-top: 3px; }
.tlog .who { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 8px; border-radius: 4px; margin-right: 8px; background: var(--paper-2); color: var(--ink-2); }
.tlog .who.ai { background: var(--thread-tint); color: var(--thread-2); }
.eco { margin-top: clamp(80px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.eco-map { position: relative; aspect-ratio: 1 / .78; max-width: 560px; width: 100%; }
.eco-map svg { width: 100%; height: 100%; overflow: visible; }
.eco-map .ring { fill: none; stroke: var(--rule); stroke-width: 1.2; stroke-dasharray: 3 7; }
.eco-map .spoke { stroke: var(--rule); stroke-width: 1.4; }
.eco-map .spoke.k { stroke: var(--thread); stroke-width: 2; }
.eco-map .hub { fill: var(--ink); }
.eco-map .node { fill: var(--surface); stroke: var(--rule); stroke-width: 1.4; }
.eco-map .node.k { fill: var(--thread); stroke: var(--thread); }
.eco-map text { font-family: var(--sans); font-weight: 700; fill: var(--ink); }
.eco-map text.sub { font-weight: 400; fill: var(--ink-3); }
.eco-map .on-dark { fill: #fff; }
.eco-map .on-dark.sub { fill: rgba(255, 255, 255, .78); }
@media (prefers-reduced-motion: no-preference) {
  .eco-map .ring { animation: spin 60s linear infinite; transform-origin: 280px 218px; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .trace-grid, .eco { grid-template-columns: 1fr; } .eco-map { margin-inline: auto; } }

/* ---------- 04 logs ---------- */
.logs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.tabs { display: flex; gap: 6px; margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex-shrink: 0; text-align: left; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--rule-night);
  color: var(--on-night-2); font-size: .88rem; font-weight: 700; line-height: 1.5; transition: background .2s, color .2s, border-color .2s;
}
.tabs button span { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; font-weight: 400; color: var(--on-night-3); }
.tabs button:hover { color: var(--on-night); border-color: rgba(236, 238, 243, .3); }
.tabs button[aria-selected="true"] { background: var(--on-night); color: var(--ink); border-color: var(--on-night); }
.tabs button[aria-selected="true"] span { color: var(--thread); }
.stage { margin-top: 18px; }
.stage .log { max-width: 880px; }
.log-note { font-size: .82rem; color: var(--ink-2); background: #eef2f8; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.demo-fine { margin-top: 16px; font-size: .76rem; color: var(--on-night-3); }

/* ---------- 05 before/after ---------- */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.ba > div { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); }
.ba-old { border: 1px dashed var(--rule); }
.ba-new { background: var(--thread); color: #fff; }
.ba .h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.ba-new .h { border-color: rgba(255, 255, 255, .25); }
.ba .h h3 { font-size: 1.1rem; font-weight: 700; }
.ba .h .t { font-family: var(--mono); font-size: 1.3rem; }
.ba-old li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); font-size: .93rem; }
.ba-old li .i-no { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); padding-top: 3px; }
.ba-old li.x .tx { text-decoration: line-through; text-decoration-color: #b4552d; }
.ba-new .said-q { font-size: 1.05rem; font-weight: 700; margin-top: 14px; line-height: 1.7; }
.ba-new .said-q span { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; font-weight: 400; opacity: .75; margin-bottom: 4px; }
.ba-new .then { font-size: .8rem; opacity: .8; margin: 18px 0 6px; }
.ba-new li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .93rem; }
.ba-new li svg { width: 16px; height: 16px; margin-top: 5px; }
.gauge { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: var(--r-lg); }
.gauge .gh { font-size: .84rem; font-weight: 700; margin-bottom: 14px; }
.grow { display: grid; grid-template-columns: 5.5em 1fr 6em; gap: 14px; align-items: center; padding: 6px 0; font-size: .86rem; }
.grow .gt { height: 12px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.grow .gf { display: block; height: 100%; border-radius: 6px; transform-origin: left; }
.grow.slow .gf { width: 100%; background: linear-gradient(90deg, #d6b89a 0 50%, #b4552d 50%); }
.grow.fast .gf { width: 1.67%; min-width: 6px; background: var(--thread); }
.js .gauge .gf { transform: scaleX(0); transition: transform 1.4s var(--ease-io) .2s; }
.js .gauge.is-in .gf { transform: scaleX(1); }
.grow .gv { font-family: var(--mono); font-size: .8rem; text-align: right; }
.gauge .gf-note { font-size: .74rem; color: var(--ink-3); margin-top: 10px; }
@media (max-width: 860px) { .ba, .logs-head { grid-template-columns: 1fr; } }

/* ---------- 06 compare ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: .82rem; color: var(--ink-2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.mk { font-style: normal; font-weight: 700; display: inline-grid; place-items: center; width: 1.5em; flex-shrink: 0; }
.mk.a { color: var(--thread); }
.mk.b { color: #3b5b8a; }
.mk.c { color: #a0702a; }
.mk.d { color: #b4552d; }
.sheet { margin-top: 20px; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.sheet:focus-visible { outline-offset: 4px; }
.st { width: 100%; min-width: 860px; font-size: .84rem; line-height: 1.65; }
.st th, .st td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.st thead th { font-size: 1rem; font-weight: 800; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.st thead th em { display: block; font-style: normal; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--ink-3); font-weight: 400; margin-bottom: 2px; }
.st .k { font-weight: 700; color: var(--ink); width: 12em; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.st .me { background: var(--thread-tint); }
.st thead .me { background: var(--thread); color: #fff; }
.st thead .me em { color: rgba(255, 255, 255, .75); }
.st tbody tr:last-child td { border-bottom: 0; }
.st { table-layout: fixed; }
.st thead th:first-child { width: 11em; }
.st .cell { display: grid; grid-template-columns: 1.5em 1fr; gap: 4px; align-items: start; }
.st .cell .mk { line-height: 1.65; }
.st .pr { display: block; font-family: var(--serif); font-weight: 800; font-size: 1.3rem; }
.st .pr.me { color: var(--thread-2); }
.st .sub { display: block; font-size: .76rem; color: var(--ink-3); }
.sheet-note { margin-top: 14px; font-size: .76rem; color: var(--ink-3); }
.scroll-hint { display: none; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); margin-top: 18px; }
@media (max-width: 900px) { .scroll-hint { display: block; } }
@media (max-width: 600px) {
  .st { min-width: 720px; font-size: .8rem; }
  .st thead th:first-child { width: 6.8em; }
  .st th, .st td { padding: 14px 12px; }
  .st .k { box-shadow: 1px 0 0 var(--rule); }
}

/* ---------- 07 start ---------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.steps { margin-top: 36px; position: relative; }
.steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--thread), var(--thread)) no-repeat top / 100% calc(var(--p, 1) * 100%), var(--rule); }
.step { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; }
.step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--thread); font-family: var(--mono); font-size: .76rem; color: var(--thread-2); position: relative; z-index: 1; }
.step.fin .n { background: var(--thread); color: #fff; }
.step b { display: block; font-size: 1rem; }
.step span.d { font-size: .84rem; color: var(--ink-3); }
.step .tm { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.step.fin .tm { color: var(--thread); font-weight: 700; }
.steps-fine { margin-top: 12px; font-size: .84rem; font-weight: 700; color: var(--thread-2); }
.also h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); margin-bottom: 14px; }
.also p { color: var(--ink-2); margin-top: 12px; max-width: 34em; }
@media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } }

/* ---------- 08 FAQ ---------- */
#faq .faq-list { margin-top: clamp(36px, 5vw, 56px); }
#faq .faq-item .q-text { font-size: 1.05rem; }

/* ---------- final ---------- */
.ai-final { text-align: left; position: relative; overflow: hidden; }
.ai-final .inner { max-width: 820px; }
.ai-final h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.25; font-feature-settings: "palt" 1; }
.ai-final .lead { margin-top: 24px; }
.ai-final .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.ai-final .fine { color: var(--on-night-3); font-family: var(--mono); letter-spacing: .1em; }

.section-head { max-width: 860px; }
.section-head .h2 + .lead { margin-top: 22px; }

/* ---------- 会話の再生（ai.js が .rp / .on / .run / .ok を付ける） ----------
   話しかけた言葉は打ち込むように、AIの返答は上から印字されるように出る */
.rp > * { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-out); }
.rp > .on { opacity: 1; transform: none; }
.rp > .xrow.said.on .msg { animation: type var(--d, .8s) steps(28, end) both; }
.rp > .xrow:not(.said).on .msg { animation: print var(--d, .8s) linear both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.rp .xtool { opacity: .35; transition: opacity .3s, border-color .3s, background .3s; }
.rp .xtool.run { opacity: 1; border-color: var(--thread); background: var(--thread-tint); }
.rp .xtool.run i { animation: pulse .6s infinite; }
.rp .xtool.ok { opacity: 1; }
.rp + .session-out span { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.rp + .session-out.on span { opacity: 1; transform: none; }
.rp + .session-out.on span:nth-child(2) { transition-delay: .12s; }
.rp + .session-out.on span:nth-child(3) { transition-delay: .24s; }
.rp + .session-out.on span:nth-child(4) { transition-delay: .36s; }

/* ヒーローの手書きメモ */
.session-note { margin: 18px 0 0 24px; }

/* ---------- 比較表の手前の、軽いCTA帯 ---------- */
.cta-band { background: var(--thread); color: #fff; }
.cta-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 30px; }
.cta-band b { display: block; font-family: var(--serif); font-weight: 800; font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); line-height: 1.5; }
.cta-band span { display: block; font-size: .86rem; opacity: .85; margin-top: 4px; }
.cta-band .btn-primary { background: #fff; color: var(--thread-2); box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--paper); }