/* Kite の Web サイト。色と文字は docs/brand.md に合わせる。
   ページは site-src から scripts/build-site.py で組み立てる（このファイルは手で書く）。
   トップの形：ひとこと＋絵 → 測った数字 → なぜ Kite → 3つのつなぎ方 → できること → 使う場面 → はじめ方 → 比べる表 → できないこと → 安心 → 値段 → よくある質問 → 最後のひと押し。
   暗い地が基本（アプリと同じ）、明るいモードにも合わせる */
:root {
  --night: #F7F7FA;
  --surface: #FFFFFF;
  --line: #E3E4EC;
  --text: #12131A;
  --subtext: #5E6375;
  --violet: #5B4BF0;
  --cyan: #0A93B3;
  --green: #1F9D66;
  --amber: #B56E00;
  /* 小さい文字に使うときの色（地の上で 4.5:1 を超えるように少し濃く・明るくしたもの） */
  --link: #5B4BF0; --cyan-text: #08768F; --amber-text: #8F5600;
  --band: #FFFFFF; --dev: #FFFFFF; --scr: #E6E7F4;
  --glass-a: #EDEBFF;
  --glass-b: #E4F6FB;
  --shadow: 0 18px 50px rgba(18, 19, 26, 0.10);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night: #0E0F13; --surface: #171922; --line: #2A2D3A; --text: #F2F3F7; --subtext: #8A8FA3;
    --violet: #6C5CFF; --cyan: #3DD6F5; --green: #3DDC97; --amber: #FFB547;
    --link: #A79DFF; --cyan-text: #3DD6F5; --amber-text: #FFB547;
    --band: #12141B; --dev: #1C1E28; --scr: #0B0C12;
    --glass-a: #1B1640; --glass-b: #0E1A2A; --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --night: #0E0F13; --surface: #171922; --line: #2A2D3A; --text: #F2F3F7; --subtext: #8A8FA3;
  --violet: #6C5CFF; --cyan: #3DD6F5; --green: #3DDC97; --amber: #FFB547;
  --link: #A79DFF; --cyan-text: #3DD6F5; --amber-text: #FFB547;
  --band: #12141B; --dev: #1C1E28; --scr: #0B0C12;
  --glass-a: #1B1640; --glass-b: #0E1A2A; --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { width: min(1120px, 100%); margin: 0 auto; padding-inline: 20px; }
section { padding-block: 88px; }
section + section { border-top: 1px solid var(--line); }
/* 帯ごとに地の色を変えて区切る（Apple・Lightspan） */
section.band { background: var(--band); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 700; }
h3 { font-size: 19px; font-weight: 650; }
p { margin: 0; }
.lead { color: var(--subtext); font-size: 19px; max-width: 60ch; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtext); }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }

/* 上の帯 */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--night) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--subtext); }
.nav-links a:hover { color: var(--text); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.nav-links .lang { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 760px) { .nav-links .hide-sm { display: none; } }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 14px; font-weight: 650; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { opacity: .85; }
.btn-primary { background: var(--violet); color: #fff; }
.btn-ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn small { font-weight: 500; opacity: .8; }
.btn svg { width: 18px; height: 18px; flex: none; }
.nav .btn { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* 最初の画面 */
.hero { padding-block: 80px 72px; overflow: hidden; position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(38% 55% at 78% 32%, color-mix(in srgb, var(--violet) 34%, transparent), transparent 70%),
  radial-gradient(30% 45% at 58% 85%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--subtext) 40%, transparent) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 70% at 72% 45%, #000, transparent 75%); mask-image: radial-gradient(55% 70% at 72% 45%, #000, transparent 75%); opacity: .55; }
.pill { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; }
.hero h1 .accent { background: linear-gradient(100deg, var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.facts li { font-size: 14px; color: var(--subtext); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--surface); }
.strip { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, var(--night)); }
.strip ul { list-style: none; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; max-width: 1120px; }
.strip li { padding: 15px 22px; font-size: 14px; color: var(--subtext); }
.strip li + li { border-left: 1px solid var(--line); }
@media (max-width: 760px) { .strip ul { padding-block: 8px; gap: 2px 0; } .strip li { padding: 6px 12px; font-size: 13px; } .strip li + li { border-left: 0; } }
.hero-art { position: relative; min-width: 0; }
.hero-art .dev { fill: var(--dev); stroke: var(--line); stroke-width: 1.5; }
.hero-art .scr { fill: var(--scr); }
.hero-art .win { fill: var(--surface); }
.hero-art .win2 { fill: color-mix(in srgb, var(--surface) 70%, var(--violet)); }
.hero-art .bar { fill: color-mix(in srgb, var(--subtext) 30%, transparent); }
.hero-art .rail { fill: color-mix(in srgb, var(--night) 88%, transparent); stroke: var(--line); }
.hero-art .key { fill: var(--subtext); font: 600 13px var(--mono); }
.hero-art .key-on { fill: var(--violet); }
.hero-art .ink { fill: var(--text); }
.hero-art .glow { stroke: var(--cyan); stroke-width: 10; fill: none; opacity: .25; filter: blur(6px); }
.hero-art .badge { fill: var(--surface); stroke: var(--line); }
.hero-art .badge-t { fill: var(--cyan-text); font: 600 14px var(--mono); }
.hero-art .badge-s { fill: var(--subtext); font: 12px var(--mono); }
.hero-art svg { display: block; width: 100%; height: auto; }
.string-line { stroke: var(--cyan); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 2 9; animation: travel 1.6s linear infinite; }
@keyframes travel { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .string-line { animation: none; } }
.art-frame { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.art-glass { fill: url(#glass); }
.art-text { fill: var(--subtext); font-family: var(--mono); font-size: 13px; }
.art-latency { fill: var(--cyan); font-family: var(--mono); font-size: 15px; font-weight: 600; }
.art-win { fill: var(--surface); opacity: .9; }
.art-bar { fill: var(--line); }

/* 測った数字 */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { background: var(--surface); padding: 26px 22px; display: grid; gap: 6px; align-content: start; }
.metric b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(30px, 4vw, 40px); font-weight: 600; color: var(--cyan); line-height: 1.1; }
.metric span { color: var(--subtext); font-size: 15px; }
.metric-note { margin-top: 14px; font-size: 13px; color: var(--subtext); }

/* 3つのつなぎ方 */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .routes { grid-template-columns: 1fr; } }
.route { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--surface); display: grid; gap: 12px; align-content: start; min-width: 0; }
.route .tag { font-family: var(--mono); font-size: 13px; color: var(--cyan-text); }
.route p { color: var(--subtext); font-size: 16px; }
.route-diagram { height: 44px; display: flex; align-items: center; gap: 10px; color: var(--subtext); font-family: var(--mono); font-size: 13px; }
.route-diagram i { flex: 1; height: 0; border-top: 2px dashed var(--cyan); }
.route-diagram i.solid { border-top-style: solid; }

/* できること */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature { display: grid; gap: 10px; align-content: start; min-width: 0; position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: var(--surface); }
.feature .tag { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtext); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--night); }
.feature h3 { margin-top: 18px; }
.feature.wide { grid-column: span 2; grid-template-columns: 1fr 1fr; gap: 10px 28px; align-items: center; background: radial-gradient(70% 90% at 85% 20%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%), var(--surface); }
.feature.wide > div { display: grid; gap: 10px; }
.feature.wide h3 { font-size: 24px; }
.feature.wide .art { width: 100%; height: auto; }
@media (max-width: 900px) { .feature.wide { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .feature.wide { grid-column: auto; } }
.feature .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--text); color: var(--night); }
.feature .icon svg { width: 22px; height: 22px; }
.feature p { color: var(--subtext); font-size: 16px; }
.feature .new { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--cyan); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }

/* サイドバーの見本 */
.sidebar-demo { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 56px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 640px) { .sidebar-demo { grid-template-columns: 1fr; } }
.rail { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--night); width: max-content; }
.rail span { width: 40px; height: 36px; display: grid; place-items: center; border-radius: 9px; font-family: var(--mono); font-size: 17px; color: var(--text); }
.rail span.on { background: var(--violet); color: #fff; }
.rail span.lat { font-size: 12px; color: var(--cyan); height: 30px; }
.rail hr { border: 0; border-top: 1px solid var(--line); margin: 2px 6px; }
.sidebar-demo dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; min-width: 0; }
.sidebar-demo dt { font-family: var(--mono); color: var(--text); }
.sidebar-demo dd { margin: 0; color: var(--subtext); }

/* はじめ方 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; padding: 0; margin: 0; list-style: none; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.steps li { border: 1px solid var(--line); border-radius: 20px; padding: 26px; background: var(--surface); display: grid; gap: 8px; align-content: start; }
.steps li::before { counter-increment: step; content: counter(step); font-family: var(--display); font-size: 48px; line-height: 1; font-weight: 700; color: color-mix(in srgb, var(--subtext) 45%, transparent); margin-bottom: 14px; }
.steps p { color: var(--subtext); font-size: 16px; }

/* 比べる表 */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: 14px; color: var(--subtext); font-weight: 600; }
thead th.us { color: var(--text); }
td.us { background: color-mix(in srgb, var(--violet) 8%, transparent); font-weight: 600; }
th.us, td.us { min-width: 170px; }
th.us, td.us { box-shadow: inset 2px 0 0 var(--violet), inset -2px 0 0 var(--violet); }
thead th.us { box-shadow: inset 2px 0 0 var(--violet), inset -2px 0 0 var(--violet), inset 0 2px 0 var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
tbody tr:last-child td.us { box-shadow: inset 2px 0 0 var(--violet), inset -2px 0 0 var(--violet), inset 0 -2px 0 var(--violet); }
td.yes::before, td.no::before, td.part::before { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 8px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
td.yes::before { content: "✓" / ""; background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
td.no::before { content: "✕" / ""; background: color-mix(in srgb, var(--subtext) 18%, transparent); color: var(--subtext); }
td.part::before { content: "–" / ""; background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber-text); }
tbody th { font-weight: 500; color: var(--subtext); width: 26%; }
.yes { color: var(--green); font-weight: 600; }
.no { color: var(--subtext); }
table.t-narrow { min-width: 520px; }
.table-note { margin-top: 12px; font-size: 13px; color: var(--subtext); }

/* 安心 */
.privacy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 820px) { .privacy { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: color-mix(in srgb, var(--green) 22%, transparent); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 9px var(--green); }
.checks b { display: block; }
.checks span { color: var(--subtext); font-size: 16px; }

/* ダウンロード */
.download { text-align: center; }
.download .wrap { display: grid; gap: 22px; justify-items: center; }
.download .appicon { width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow); }
.download .cta { justify-content: center; }
.req { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(820px, 100%); text-align: left; }
@media (max-width: 720px) { .req { grid-template-columns: 1fr; } }
.req div { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--surface); display: grid; gap: 4px; }
.req b { font-size: 15px; }
.req span { color: var(--subtext); font-size: 14px; }
.signed { font-size: 14px; color: var(--subtext); }

/* よくある質問 */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--subtext); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; color: var(--subtext); font-size: 16px; }

/* 下の帯 */
footer { border-top: 1px solid var(--line); padding-block: 56px 40px; font-size: 14px; color: var(--subtext); }
footer .wrap { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 36px 48px; }
@media (max-width: 820px) { footer .wrap { grid-template-columns: 1fr; } }
.footer-brand { display: grid; gap: 10px; align-content: start; }
.footer-brand .brand { color: var(--text); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 640px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-cols div { display: grid; gap: 10px; align-content: start; }
.footer-cols h2 { font-size: 13px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); font-weight: 600; margin-bottom: 4px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }
.footer-note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 24px; font-size: 13px; }

/* 読み上げだけ・本文へ飛ぶ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--violet); color: #fff; padding: 8px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* 文中のリンク・続きへ */
.more { margin-top: 22px; font-size: 16px; }
.more a, .text-link, .prose a, .faq a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.more a { font-weight: 600; text-decoration: none; }
.more a:hover { text-decoration: underline; }
.req-line { font-size: 13px; color: var(--subtext); }

/* なぜ Kite */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .why { grid-template-columns: 1fr; } }
.why article { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); display: grid; gap: 10px; align-content: start; }
.why-no { font-family: var(--mono); font-size: 14px; color: var(--subtext); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--subtext) 60%, transparent); }
.why p { color: var(--subtext); font-size: 16px; }
.why-yes { color: var(--text); font-weight: 600; }

/* 使う場面 */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uses { grid-template-columns: 1fr; } }
.uses article { border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface) 60%); border: 1px solid var(--line); }
.use-tag { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); letter-spacing: .06em; text-transform: uppercase; }
.uses p { color: var(--subtext); font-size: 15px; }

/* できないこと */
.limits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; max-width: 980px; }
@media (max-width: 820px) { .limits { grid-template-columns: 1fr; } }
.limits li { padding-left: 26px; position: relative; color: var(--subtext); font-size: 16px; }
.limits li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--amber); }
.limits b { color: var(--text); }

/* 値段 */
.price-card { width: min(560px, 100%); border: 1px solid var(--line); border-radius: 24px; padding: 36px; background: radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%), var(--surface); box-shadow: var(--shadow); display: grid; gap: 18px; text-align: left; }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.price-card .label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--subtext); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; width: max-content; }
.price-card .req-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtext); text-align: center; }
.price span { color: var(--subtext); }
.price-sub { color: var(--subtext); margin-top: -8px; }
.price-card .cta { display: grid; gap: 10px; }
.price-card .cta .btn { width: 100%; border-radius: 999px; }

/* 最後のひと押し */
.closing { text-align: center; background: radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 70%); }
.closing .wrap { display: grid; gap: 18px; justify-items: center; }
.closing h2 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -0.02em; }
.closing .cta { justify-content: center; }

/* ほかのページの頭 */
.page-head { padding-block: 72px 48px; }
.page-head .wrap { display: grid; gap: 16px; }
.page-head h1 { font-size: clamp(36px, 5.5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.narrow { width: min(820px, 100%); }
.updated { font-size: 14px; color: var(--subtext); }
section.page-head + section { border-top: 1px solid var(--line); }

/* 文章 */
.prose { display: grid; gap: 16px; }
.prose h2 { font-size: 24px; margin-top: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--subtext); font-size: 16px; }
.prose b { color: var(--text); }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose-lead { color: var(--subtext); font-size: 18px; margin-top: 14px; }
pre { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow-x: auto; }
code { font-family: var(--mono); font-size: .92em; }
.data-table { min-width: 560px; font-size: 15px; }
.data-table td { color: var(--subtext); }
.data-table td:first-child { color: var(--text); white-space: nowrap; }

/* ダウンロード */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 820px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card { border: 1px solid var(--line); border-radius: 24px; padding: 30px; background: var(--surface); display: grid; gap: 14px; align-content: start; justify-items: start; }
.dl-card .tag { font-family: var(--mono); font-size: 13px; color: var(--cyan-text); }
.dl-card h2 small { font-size: 18px; color: var(--subtext); font-weight: 500; }
.dl-card p { color: var(--subtext); }
.spec { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; font-size: 14px; color: var(--subtext); }
.spec li::before { content: "✓"; color: var(--green); margin-right: 8px; }
.howto { list-style: none; counter-reset: how; padding: 0; margin: 28px 0 0; display: grid; gap: 28px; }
.howto > li { counter-increment: how; display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; }
.howto > li::before { content: counter(how); grid-row: span 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 15px; }
.howto h3 { margin-top: 4px; }
.howto p, .howto ul { color: var(--subtext); font-size: 16px; }
.howto ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.howto a { color: var(--link); }

/* サポート */
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--surface); display: grid; gap: 10px; margin-top: 8px; }
.contact-card div { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.contact-card a { font-family: var(--mono); color: var(--link); font-size: 17px; }
.contact-card p { color: var(--subtext); font-size: 15px; }
.faq details ul { margin: 0; padding: 0 0 18px 20px; display: grid; gap: 8px; color: var(--subtext); font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; text-decoration: none; background: var(--surface); color: var(--text); }
.chip:hover { border-color: var(--violet); }

/* 比べるページ */
.part { color: var(--amber-text); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.win-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--surface); display: grid; gap: 18px; align-content: start; }
.win-card h2 { font-size: 22px; }
.win-card.them .checks li::before { background: color-mix(in srgb, var(--subtext) 22%, transparent); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 9px var(--subtext); }
.win-card .checks li { grid-template-columns: 22px 1fr; color: var(--subtext); font-size: 16px; }
.vs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vs-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); display: grid; gap: 8px; text-decoration: none; transition: border-color .15s ease; }
.vs-card:hover { border-color: var(--violet); }
.vs-card span { color: var(--subtext); font-size: 15px; }

/* 日本語の見出しは文節で折り返す（「つなが／ったまま」と切れないように） */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }

/* 見出しの2文目を薄くする（BetterCast・Apple） */
.dim { color: var(--subtext); }

/* 家と外を点の地図で（Jump の地図） */
.route-map { position: relative; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
.route-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--subtext) 45%, transparent) 1.2px, transparent 1.6px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent 80%); opacity: .6; }
.route-map svg { position: relative; display: block; width: 100%; height: auto; }
.route-map .pin { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.route-map .pin-dot { fill: var(--cyan); }
.route-map .pin-t { fill: var(--text); font: 600 15px var(--sans); }
.route-map .pin-s { fill: var(--subtext); font: 13px var(--mono); }
.route-map .glow { stroke: var(--cyan); stroke-width: 10; fill: none; opacity: .22; filter: blur(5px); }
.route-map .lbl { fill: var(--cyan-text); font: 600 13px var(--mono); }

/* 光る一行（Lightspan） */
.tagline { text-align: center; padding-block: 120px; background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 70%), var(--night); }
.tagline p { font-family: var(--display); font-size: clamp(32px, 5.5vw, 60px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); text-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 45%, transparent); }
.tagline svg { display: block; width: min(520px, 80%); height: auto; margin: 26px auto 0; }

.center { text-align: center; margin-inline: auto; justify-items: center; }
#faq .faq { margin-inline: auto; }
.feature .sidebar-demo { margin: 0; padding: 0; border: 0; background: none; gap: 20px; }
.feature .sidebar-demo dl { font-size: 15px; }
.eyebrow.pill { text-transform: none; letter-spacing: .01em; font-family: var(--sans); font-size: 13px; }
:lang(ja) .hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.12; }
:lang(ja) .tagline p { font-size: clamp(24px, 3.6vw, 40px); word-break: auto-phrase; }
@media (max-width: 560px) { .route-map { display: none; } }