/* =========================================================================
   MumoStream — サイトスタイル
   デザイントークンはアプリ／サーバ管理UI（app.css・Brand.swift）に一致させ、
   マーケティングサイトと製品が同じ家族に見えるようにしている。
   ========================================================================= */

/* ---------- Fonts（セルフホスト：管理UIと同一ファイル）---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans JP'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/notosansjp-400.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans JP'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/notosansjp-500.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans JP'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/notosansjp-700.woff2') format('woff2'); }

:root {
  --font-ui:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif;
  --bg:#0b0d12; --bg-2:#0e1118; --panel:#13161e; --panel-2:#181c26;
  --border:#232936; --border-soft:#1c212d;
  --text:#e7ecf3; --text-dim:#94a0b6; --muted:#6b7689;
  --accent:#5bb1ff; --accent-hi:#7cc2ff; --purple:#7c6bff;
  --accent-bg:rgba(91,177,255,.12);
  --green:#4ade80; --orange:#fbbf24; --red:#ef6b73; --yellow:#ffd60a;
  --grad:linear-gradient(135deg,#5bb1ff,#7c6bff);
  --grad-soft:linear-gradient(135deg,rgba(91,177,255,.16),rgba(124,107,255,.16));
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 24px 60px rgba(0,0,0,.45);
  --radius:8px; --radius-sm:6px; --radius-lg:16px; --maxw:1120px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-ui); font-size:16px; font-weight:400; line-height:1.7;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--accent); text-decoration:none; transition:color .15s; }
a:hover { color:var(--accent-hi); }
h1,h2,h3,h4 { margin:0; line-height:1.3; letter-spacing:.01em; }
/* 日本語の見出し・キャッチは語の途中で折り返さない（読点・空白で改行） */
.hero h1, .page-hero h1, .section-head h2, .section-head p, .shot-text h3,
.split h2, .cta-card h2, .doc-section > h2, .feature h3, .step h3 { word-break:keep-all; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.hidden { display:none !important; }
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#0a131e; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; }
.skip:focus { left:0; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---------- Icons ---------- */
.ms-ico { display:inline-flex; line-height:0; vertical-align:middle; }
.ms-ico svg { width:1em; height:1em; display:block; }
.btn .ms-ico { font-size:18px; } .btn-sm .ms-ico { font-size:16px; } .pill .ms-ico { font-size:17px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px;
  border-radius:10px; border:1px solid transparent; font-weight:600; font-size:15px; cursor:pointer;
  white-space:nowrap; transition:transform .12s, box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(91,177,255,.28); }
.btn-primary:hover { color:#fff; box-shadow:0 10px 28px rgba(91,177,255,.4); }
.btn-ghost { background:var(--panel-2); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { color:var(--text); border-color:#33415a; background:#1c2230; }
.btn-sm { padding:9px 15px; font-size:14px; border-radius:8px; }

/* ---------- Header / nav ---------- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(11,13,18,.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-soft); }
.nav { display:flex; align-items:center; gap:18px; height:64px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; font-size:18px; color:var(--text); }
.brand:hover { color:var(--text); }
.brand img { width:32px; height:32px; border-radius:8px; }
.nav-links { display:flex; align-items:center; gap:4px; margin:0 auto; }
.nav-links .nav-download { margin-left:8px; }
.nav-links > a:not(.nav-download), .nav-item > .nav-top { display:inline-flex; align-items:center; gap:6px; color:var(--text-dim);
  font-weight:500; font-size:15px; padding:8px 12px; border-radius:7px; background:none; border:0; cursor:pointer; font-family:inherit; }
.nav-links > a:not(.nav-download):hover, .nav-item:hover > .nav-top, .nav-item > .nav-top[aria-current="true"], .nav-links > a:not(.nav-download)[aria-current="true"] { color:var(--text); background:var(--panel-2); }
.nav-item { position:relative; }
.nav-item .nav-top .ms-ico { font-size:14px; color:var(--muted); }
.submenu { position:absolute; top:100%; left:0; min-width:230px; padding:8px; margin-top:6px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; z-index:60; }
.nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity:1; visibility:visible; transform:none; }
.submenu a { display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:8px; color:var(--text-dim); font-size:14px; }
.submenu a:hover { background:var(--panel-2); color:var(--text); }
.submenu a .ms-ico { font-size:18px; color:var(--accent); margin-top:1px; }
.submenu a small { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:1px; }
.submenu-2col { left:0; right:auto; min-width:466px; display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.submenu-2col .submenu-col { min-width:0; }
.submenu-2col .submenu-col + .submenu-col { border-left:1px solid var(--border-soft); padding-left:10px; }
.submenu-head { padding:7px 11px 5px; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-links > a, .nav-item > .nav-top, .nav-actions .lang-btn, .nav-links .nav-download { line-height:1; }
.nav-toggle { display:none; background:none; border:1px solid var(--border); border-radius:8px; color:var(--text); width:40px; height:40px; cursor:pointer; font-size:18px; }

/* language switcher */
.lang-switch { position:relative; }
.lang-btn { display:inline-flex; align-items:center; gap:7px; background:var(--panel-2); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:7px 11px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; white-space:nowrap; }
.lang-btn .ms-ico:first-child { font-size:16px; color:var(--muted); } .lang-btn .ms-ico:last-child { font-size:13px; color:var(--muted); }
.lang-menu { position:absolute; right:0; top:100%; margin-top:6px; min-width:150px; max-height:60vh; overflow:auto; list-style:none; padding:6px; margin-bottom:0;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; z-index:60; }
.lang-switch.open .lang-menu, .lang-switch:focus-within .lang-menu { opacity:1; visibility:visible; transform:none; }
.lang-menu a { display:block; padding:8px 11px; border-radius:7px; color:var(--text-dim); font-size:14px; }
.lang-menu a:hover { background:var(--panel-2); color:var(--text); }
.lang-menu a[aria-current="true"] { color:var(--accent-hi); background:var(--accent-bg); }

/* ---------- Hero ---------- */
.hero { position:relative; padding:84px 0 72px; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(900px 480px at 12% -8%, rgba(91,177,255,.16), transparent 60%),
  radial-gradient(820px 520px at 92% 8%, rgba(124,107,255,.16), transparent 60%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(34px,5vw,56px); font-weight:700; letter-spacing:-.01em; line-height:1.18; }
.hero .lede { margin:22px 0 0; font-size:clamp(16px,2.2vw,19px); color:var(--text-dim); max-width:30em; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-meta { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-size:14px; }
.hero-meta > span { display:inline-flex; align-items:center; gap:8px; }
.hero-meta > span::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.hero-meta b { color:var(--text-dim); font-weight:600; }
.hero-art { position:relative; min-height:520px; }
.hero-art .phone { position:absolute; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
.hero-art .phone.back { width:62%; left:40%; top:18px; opacity:.96; transform:rotate(5deg); }
.hero-art .phone.front { width:66%; left:0; top:0; z-index:2; transform:rotate(-3deg); }

/* ---------- Platform badges ---------- */
.platforms { padding:18px 0 8px; }
.platform-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 26px;
  padding:20px 24px; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); }
.platform-row .grp { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.platform-row .lbl { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--panel-2);
  border:1px solid var(--border); font-size:14px; font-weight:500; color:var(--text); }
.platform-row .div { width:1px; height:26px; background:var(--border); }

/* ---------- Section scaffolding ---------- */
section { position:relative; }
.section { padding:80px 0; }
.section-head { text-align:center; max-width:42em; margin:0 auto 48px; }
.eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.section-head h2 { font-size:clamp(26px,3.4vw,38px); font-weight:700; }
.section-head p { margin:14px 0 0; color:var(--text-dim); font-size:17px; }
.alt-bg { background:var(--bg-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

/* ---------- Feature grid ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 24px; transition:border-color .2s, transform .2s, box-shadow .2s; }
.feature:hover { border-color:#2f3a4e; transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.feature .ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--border); margin-bottom:16px; }
.feature .ic .ms-ico { font-size:24px; color:var(--accent-hi); }
.feature h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.feature p { margin:0; color:var(--text-dim); font-size:15px; }

/* ---------- GPU vendor cards (GPU section / index) ---------- */
.gpu-vendors { margin-top:22px; }
.gpu-vendors-label { display:block; margin-bottom:11px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.gpu-vendor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gpu-vendor-card { display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; }
.gpu-vendor-ic { font-size:24px; color:var(--accent); flex:none; }
.gpu-vendor-meta { min-width:0; }
.gpu-vendor-name { color:var(--text); font-weight:700; font-size:14px; line-height:1.2; }
.gpu-vendor-tech { color:var(--muted); font-size:12px; margin-top:2px; }

/* ---------- Screenshot showcase (app) ---------- */
.shots { display:flex; flex-direction:column; gap:72px; }
.shot-row { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.shot-row:nth-child(even) .shot-text { order:2; } .shot-row:nth-child(even) .shot-img { order:1; }
.shot-img { display:flex; justify-content:center; }
.shot-img .device { position:relative; width:218px; }
.shot-img .device::after { content:''; position:absolute; inset:-12% -12% -22%; z-index:-1; background:radial-gradient(closest-side, rgba(91,177,255,.18), transparent 72%); }
.shot-img img { width:218px; filter:drop-shadow(0 24px 44px rgba(0,0,0,.55)); }
.shot-text .num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--grad); color:#fff; font-weight:700; font-size:15px; margin-bottom:16px; }
.shot-text h3 { font-size:clamp(22px,2.6vw,28px); font-weight:700; }
.shot-text p { margin:14px 0 0; color:var(--text-dim); font-size:16px; }
.shot-text ul { margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.shot-text li { display:flex; gap:10px; align-items:flex-start; color:var(--text-dim); font-size:15px; }
.shot-text li::before { content:'✓'; color:var(--green); font-weight:700; flex:none; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; position:relative; }
.step .n { width:40px; height:40px; border-radius:10px; background:var(--grad-soft); border:1px solid var(--border); display:grid; place-items:center; font-weight:700; font-size:17px; color:var(--accent-hi); margin-bottom:16px; }
.step h3 { font-size:18px; margin-bottom:8px; }
.step p { margin:0; color:var(--text-dim); font-size:15px; }
.step code, .codeline { display:block; margin-top:14px; padding:11px 13px; border-radius:8px; background:#0a0c11; border:1px solid var(--border-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--accent-hi); overflow-x:auto; white-space:nowrap; }
.codeline .o { color:var(--accent-hi); }

/* ---------- Server highlight / admin shots ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split h2 { font-size:clamp(24px,3vw,32px); font-weight:700; }
.split > div > p { color:var(--text-dim); font-size:16px; margin:16px 0 0; }
.check-list { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:13px; }
.check-list li { display:flex; gap:11px; align-items:flex-start; font-size:15px; }
.check-list li .ms-ico { font-size:20px; flex:none; color:var(--green); margin-top:2px; }
.check-list li b { color:var(--text); font-weight:600; } .check-list li span { color:var(--text-dim); }
.browser-frame { background:#0a0c11; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); }
.bf-bar { display:flex; align-items:center; padding:9px 12px; background:var(--panel); border-bottom:1px solid var(--border-soft); }
.bf-url { flex:1; height:18px; border-radius:6px; background:var(--panel-2); border:1px solid var(--border); display:flex; align-items:center; padding:0 9px; }
.bf-url::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.55; flex:none; }
.browser-frame img { display:block; width:100%; height:auto; cursor:zoom-in; }
.js-zoom { cursor:zoom-in; }
.admin-shot { margin:0; }
.admin-shot figcaption { margin-top:12px; text-align:center; font-size:14px; font-weight:600; color:var(--text-dim); }
.admin-gallery { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:44px; }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(6,8,13,.86); backdrop-filter:blur(4px); cursor:zoom-out; }
.lightbox.open { display:flex; animation:lb-fade .18s ease; }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }
.lightbox img { max-width:min(1340px,96vw); max-height:92vh; width:auto; height:auto; border-radius:12px; border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-close { position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%; background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-size:20px; cursor:pointer; display:grid; place-items:center; }

.feature-grid > *, .steps > *, .split > *, .shot-row > *, .price-grid > * { min-width:0; }

/* ---------- CTA ---------- */
.cta-band { text-align:center; padding:32px 0 56px; }
.cta-card { background:var(--grad-soft); border:1px solid var(--border); border-radius:24px; padding:54px 32px; position:relative; overflow:hidden; }
.cta-card::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(600px 300px at 50% -30%, rgba(124,107,255,.2), transparent 70%); }
.cta-card h2 { font-size:clamp(26px,3.4vw,36px); font-weight:700; }
.cta-card p { margin:14px auto 0; color:var(--text-dim); font-size:17px; max-width:34em; }
.cta-card .cta-tmnote { color:var(--muted); font-size:12.5px; line-height:1.6; max-width:42em; margin-top:18px; }
.cta-card .hero-cta { justify-content:center; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero { padding:60px 0 8px; text-align:center; position:relative; }
.page-hero .eyebrow { margin-bottom:14px; }
.page-hero h1 { font-size:clamp(30px,4.2vw,46px); font-weight:700; }
.page-hero p { margin:16px auto 0; color:var(--text-dim); font-size:18px; max-width:40em; }

/* ---------- Download page ---------- */
.dl-jump { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.dl-group { padding:40px 0 8px; }
.dl-group-head { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.dl-group-head .ic { font-size:30px; color:var(--accent); display:inline-flex; }
.dl-group-head h2 { font-size:24px; font-weight:700; }
.dl-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; gap:18px; scroll-margin-top:90px; transition:border-color .2s, box-shadow .2s; }
.dl-card:hover { border-color:#2f3a4e; box-shadow:var(--shadow-lg); }
.dl-os-ic { width:54px; height:54px; flex:none; border-radius:14px; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--border); font-size:30px; }
.dl-card h3 { font-size:20px; font-weight:600; }
.dl-card .os-sub { color:var(--muted); font-size:14px; margin-top:2px; }
.dl-req { color:var(--text-dim); font-size:14px; display:flex; gap:7px; align-items:center; }
.dl-req .ms-ico { color:var(--muted); font-size:15px; }
.store-badge { display:inline-flex; align-items:center; gap:11px; padding:11px 18px; background:#fff; color:#000; border-radius:11px; font-weight:600; transition:transform .12s, box-shadow .2s; }
.store-badge:hover { color:#000; transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.4); }
.store-badge .ms-ico { font-size:26px; } .store-badge small { display:block; font-size:11px; font-weight:500; opacity:.7; line-height:1.1; } .store-badge b { display:block; font-size:16px; line-height:1.1; }
/* 統合ダウンロードカード（1OS=1行・複数OSを1カードにまとめ、末尾に更新履歴リンク） */
.dl-card-wide { gap:16px; }
.dl-meta-inline { display:flex; flex-wrap:wrap; gap:6px 24px; font-size:14px; color:var(--text-dim); }
.dl-meta-inline .mi b { color:var(--muted); font-weight:500; margin-right:6px; }
.dl-os-list { display:flex; flex-direction:column; }
.dl-os-row { display:flex; align-items:center; gap:15px; padding:18px 0; border-top:1px solid var(--border); }
.dl-os-row:first-child { border-top:0; padding-top:2px; }
.dl-os-row .dl-os-ic { width:46px; height:46px; font-size:26px; }
.dl-os-info { flex:1 1 auto; min-width:0; }
.dl-os-info h4 { font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-os-info .os-sub { color:var(--muted); font-size:13px; margin-top:2px; }
.dl-os-info .dl-req { margin-top:6px; }
.dl-os-act { flex:none; display:flex; flex-direction:column; gap:8px; align-items:stretch; width:230px; max-width:46%; }
.dl-os-act .btn { width:100%; }
.dl-card-foot { border-top:1px solid var(--border); padding-top:15px; }
.dl-changelog { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:14px; font-weight:600; }
.dl-changelog:hover { text-decoration:underline; }
.dl-changelog .ms-ico { font-size:16px; }
@media (max-width:640px){
  .dl-os-row { flex-wrap:wrap; }
  .dl-os-act { width:100%; max-width:none; }
}
.callout-body pre { margin:4px 0 0; padding:14px; border-radius:8px; background:#0a0c11; border:1px solid var(--border-soft); overflow-x:auto; font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--accent-hi); }
.badge-soft { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--accent-bg); color:var(--accent-hi); font-size:12px; font-weight:600; }
.hero-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.badge-jp { background:#fff; color:#bc002d; border:1px solid #fff; }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.price-card { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px; display:flex; flex-direction:column; }
.price-card.featured { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple), 0 20px 50px rgba(124,107,255,.18); }
.price-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.04em; }
.price-name { font-size:16px; font-weight:600; color:var(--text-dim); }
.price-amt { margin:12px 0 2px; font-size:40px; font-weight:700; letter-spacing:-.02em; }
.price-amt small { font-size:16px; color:var(--muted); font-weight:500; }
.price-sub { color:var(--muted); font-size:13px; min-height:18px; }
.price-card .btn { width:100%; margin-top:auto; }
.price-note { text-align:center; color:var(--muted); font-size:13px; margin-top:26px; }

/* ---------- Comparison table ---------- */
.compare { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
.compare table { width:100%; border-collapse:collapse; min-width:560px; }
.compare th, .compare td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--border-soft); }
.compare thead th { background:var(--panel-2); font-size:13px; font-weight:600; color:var(--text-dim); position:sticky; top:0; }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align:center; width:150px; }
.compare tbody td:first-child, .compare tbody th[scope="row"] { color:var(--text); font-weight:500; font-size:14.5px; }
.compare .grp-row td { background:var(--panel-2); color:var(--text); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; border-top:1px solid var(--border); box-shadow:inset 3px 0 0 var(--purple); }
.compare tbody tr:not(.grp-row) td:first-child { padding-left:36px; }
.compare .yes { color:var(--green); font-weight:600; } .compare .no { color:var(--red); } .compare .val { color:var(--text-dim); font-size:13.5px; }
.compare .ms-ico { font-size:19px; }
.plan-col-free { color:var(--text-dim); } .plan-col-pro { color:var(--accent-hi); }
/* external-playback 検証パターン：全セル中央揃え・結合セルは縦中央 */
.compare.matrix th, .compare.matrix td { text-align:center; vertical-align:middle; }
.compare.matrix tbody tr:not(.grp-row) td:first-child, .compare.matrix tbody tr:not(.grp-row) th[scope="row"] { padding-left:18px; font-weight:600; }
.mark-legend { text-align:center; color:var(--text-dim); font-size:13px; margin:12px 0 0; }
.mark-legend .yes { color:var(--green); } .mark-legend .no { color:var(--red); }
.mark-legend .ms-ico { font-size:16px; vertical-align:-3px; }

/* badges (free / pro) */
.badge-pro, .badge-free { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.badge-pro { background:rgba(124,107,255,.15); color:#b3a9ff; border:1px solid rgba(124,107,255,.4); }
.badge-free { background:rgba(74,222,128,.12); color:var(--green); border:1px solid rgba(74,222,128,.3); }

/* ---------- Requirements / spec tables ---------- */
.spec-wrap { display:grid; gap:22px; }
.spec-table { width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel); }
.spec-table th, .spec-table td { padding:13px 16px; border-bottom:1px solid var(--border-soft); text-align:left; vertical-align:top; font-size:14.5px; }
.spec-table thead th { background:var(--panel-2); color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.spec-table th[scope=row] { color:var(--text-dim); font-weight:600; width:200px; }
.spec-table.ports-table th, .spec-table.ports-table td { white-space:nowrap; }
.spec-table.ports-table th[scope=row] { width:auto; }
.spec-table.ports-table td:last-child { white-space:normal; }
.spec-table.ports-table thead th { text-align:center; vertical-align:middle; }
.spec-table td { color:var(--text); } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom:0; }
.spec-table code { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--accent-hi); background:rgba(91,177,255,.08); padding:1px 6px; border-radius:5px; }
/* ライセンス一覧：コンポーネント名＋ライセンスのカードを敷き詰め、列削除後の余白を均等に埋める */
.lic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.lic-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px; transition:border-color .2s; }
.lic-card:hover { border-color:#2f3a4e; }
.lic-name { display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; color:var(--text); word-break:break-word; }
.lic-lic { display:block; font-size:12.5px; color:var(--text-dim); margin-top:5px; }
.req-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.os-head { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin-bottom:14px; }
.os-head .ms-ico { font-size:24px; }

/* ---------- Doc / manual layout ---------- */
.doc-layout { display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; }
.doc-toc { position:sticky; top:90px; align-self:start; }
.doc-toc h4 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; }
.doc-toc ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:1px solid var(--border); }
.doc-toc a { display:block; padding:7px 14px; color:var(--text-dim); font-size:14px; border-left:2px solid transparent; margin-left:-1px; }
.doc-toc a:hover { color:var(--text); } .doc-toc a.active { color:var(--accent-hi); border-left-color:var(--accent); }
.doc-content { min-width:0; }
.doc-section { padding-bottom:48px; margin-bottom:8px; scroll-margin-top:88px; }
.doc-section > h2 { font-size:clamp(22px,3vw,30px); font-weight:700; padding-bottom:10px; border-bottom:1px solid var(--border-soft); margin-bottom:20px; display:flex; align-items:center; gap:11px; }
.doc-section > h2 .ms-ico { color:var(--accent); font-size:26px; }
.doc-section h3 { font-size:19px; font-weight:600; margin:30px 0 12px; }
.doc-section p { color:var(--text-dim); margin:0 0 14px; }
.doc-section ul, .doc-section ol { color:var(--text-dim); margin:0 0 16px; padding-left:22px; } .doc-section li { margin:6px 0; }
.doc-section strong { color:var(--text); font-weight:600; }
.doc-figure { margin:18px 0 22px; }
.doc-figure figcaption { margin-top:10px; font-size:13px; color:var(--muted); text-align:center; }
.doc-figure.phone img { width:260px; margin:0 auto; filter:drop-shadow(0 18px 36px rgba(0,0,0,.5)); }
.doc-figure.phone { display:flex; flex-direction:column; align-items:center; }

/* manual UI component demo (uses real app colors) */
.ui-demo { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin:18px 0; }
.ui-demo h4 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px; }
.ui-demo .demo-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.ui-demo .demo-row:last-child { margin-bottom:0; }
.demo-note { font-size:12.5px; color:var(--muted); }
/* app-accurate tags */
.atag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid; }
.atag-accent { background:rgba(91,177,255,.12); color:#7cc2ff; border-color:rgba(91,177,255,.3); }
.atag-green { background:rgba(74,222,128,.12); color:#4ade80; border-color:rgba(74,222,128,.3); }
.atag-warning { background:rgba(251,191,36,.12); color:#fbbf24; border-color:rgba(251,191,36,.3); }
.atag-red { background:rgba(239,107,115,.12); color:#ef6b73; border-color:rgba(239,107,115,.3); }
.atag-muted { background:transparent; color:#6b7689; border:0; }

/* callouts */
.callout { display:flex; gap:12px; padding:15px 18px; border-radius:12px; border:1px solid; margin:18px 0; font-size:14.5px; }
.callout .ms-ico { font-size:20px; flex:none; margin-top:1px; }
.callout p { margin:0; color:var(--text-dim); } .callout strong { color:var(--text); }
.callout-body { display:flex; flex-direction:column; gap:8px; min-width:0; }
.callout-body ul { margin:0; padding-left:18px; color:var(--text-dim); display:flex; flex-direction:column; gap:4px; }
.callout-body ul.dev-list { gap:0; } .callout-body ul.dev-list li { margin:0; line-height:1.5; }
.callout.info { background:rgba(91,177,255,.07); border-color:rgba(91,177,255,.25); } .callout.info .ms-ico { color:var(--accent); }
.callout.warn { background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.28); } .callout.warn .ms-ico { color:var(--orange); }
.step-list { counter-reset:s; list-style:none; padding:0; margin:18px 0; display:grid; gap:14px; }
.step-list li { position:relative; padding-left:42px; color:var(--text-dim); }
.step-list li::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:8px; background:var(--grad-soft); border:1px solid var(--border); color:var(--accent-hi); font-weight:700; font-size:13px; display:grid; place-items:center; }
.step-list li strong { color:var(--text); }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--border-soft); background:var(--bg-2); padding:48px 0 36px; margin-top:20px; }
.footer-grid { display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(0,1fr)); gap:32px 40px; align-items:start; }
.footer-brand { max-width:24em; } .footer-brand .brand { margin-bottom:12px; } .footer-brand p { color:var(--muted); font-size:14px; margin:0; }
.footer-col h5 { margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-col a { color:var(--text-dim); font-size:14px; } .footer-col a:hover { color:var(--text); }
/* フッターの段階的レスポンシブ：列数を固定し、flex の折り返し崩れ（最終列だけ回り込む）を防ぐ */
@media (max-width:960px){ .footer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .footer-brand { grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.footer-bottom { margin-top:36px; padding-top:22px; border-top:1px solid var(--border-soft); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* アプリ紹介の見出しは広い画面では1行に収める（狭い画面は折返し可） */
@media (min-width:721px) { #screens .section-head h2 { white-space:nowrap; } }

/* ---------- Responsive ---------- */
@media (max-width:960px) {
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .steps, .price-grid { grid-template-columns:1fr; }
  .hero-grid { grid-template-columns:1fr; gap:36px; }
  .hero-art { min-height:420px; max-width:420px; margin:0 auto; width:100%; }
  .split, .req-cols { grid-template-columns:1fr; gap:32px; }
  .shot-row { grid-template-columns:1fr; gap:24px; text-align:center; }
  .shot-row .shot-text { order:2 !important; } .shot-row .shot-img { order:1 !important; }
  .shot-text ul { display:inline-grid; text-align:left; } .shot-text li { justify-content:flex-start; }
  .admin-gallery { grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
  .doc-layout { grid-template-columns:1fr; } .doc-toc { display:none; }
  .price-grid { max-width:420px; margin:0 auto; }
}
@media (max-width:720px) {
  .nav { gap:10px; }
  .nav-links { display:none; }
  .nav-actions { margin-left:auto; gap:8px; }
  .nav-toggle { display:block; }
  .nav.open .nav-links .nav-download { justify-content:center; margin:6px 0 0; }
  .nav.open .nav-links { display:flex; flex-direction:column; align-items:stretch; gap:4px; position:absolute; top:64px; left:0; right:0; padding:14px 24px 18px; background:var(--bg); border-bottom:1px solid var(--border); margin:0; }
  .nav.open .nav-links .submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:4px 0 4px 16px; margin:0; background:none; }
  .nav.open .submenu-2col { display:block; min-width:0; }
  .nav.open .submenu-2col .submenu-col + .submenu-col { border-left:0; padding-left:0; margin-top:4px; }
  .feature-grid { grid-template-columns:1fr; } .section { padding:60px 0; }
  .platform-row .div { display:none; }
  .compare thead th:not(:first-child), .compare td:not(:first-child) { width:auto; }
  /* 本文は日本語の任意位置で折り返す（keep-all による溢れ・見切れを防ぐ。見出しは維持） */
  .section-head p { word-break:normal; }
  /* ダウンロードの群見出し：狭幅で見出しの不自然な折れを防ぐ */
  .dl-group-head { flex-wrap:wrap; }
  /* 仕様表：固定幅の行見出しと広い余白を狭め、狭幅での溢れを防ぐ */
  .spec-table th[scope=row] { width:auto; }
  .spec-table th, .spec-table td { padding:11px 12px; }
}
@media (max-width:480px) {
  .container { padding:0 18px; }
  /* 小型幅では見出しの keep-all を解除（溢れる場合のみ折り返す。収まる幅では不変） */
  .hero h1, .page-hero h1, .section-head h2, .shot-text h3,
  .split h2, .cta-card h2, .doc-section > h2, .feature h3, .step h3 { word-break:normal; }
  .hero { padding:64px 0 52px; }
  .cta-card { padding:40px 20px; }
  .price-amt { font-size:34px; }
  .dl-card { padding:22px; }
  .dl-os-ic { width:46px; height:46px; font-size:26px; }
  /* 最小幅の仕様表：余白・文字を詰め、横スクロールも許容して溢れを防ぐ */
  .spec-table { display:block; overflow-x:auto; }
  .spec-table th, .spec-table td { padding:9px 10px; font-size:13.5px; }
}