/* =========================================================
   Shannon LLC — home (front page) — 角丸・製品推しレイアウト
   トップと /products/ でのみ読み込む。共通部品は styles.css / pages.css。
   ========================================================= */

/* ---------------- Hero（旧デザインどおり白地＋パーティクル、左寄せのコピーのみ） ---------------- */
.hero__headline {
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  margin-bottom: 26px;
}

/* ヒーローの登場アニメーション（見出し→ラベル→本文→ボタンの順にフェードアップ） */
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
.hero .eyebrow, .hero__headline--product, .hero__ctas, .demo {
  animation: heroIn .9s cubic-bezier(.2, .6, .2, 1) both;
}
.hero__headline--product { animation-delay: .1s; }
.hero__ctas { animation-delay: .22s; }
.demo { animation-delay: .3s; }
.hero__headline .line:nth-child(2) { animation-delay: .1s; }
.hero__ctas { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero__headline--product, .hero__ctas, .demo { animation: none; }
}

/* 製品画像はわずかに縮んだ状態からふわっと浮き上がる */
.prow__media[data-reveal] { transform: translate3d(0, 28px, 0) scale(.97); }
.prow__media[data-reveal].is-in { transform: none; }
.prow__card img { transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.prow__card:hover img { transform: scale(1.02); }

/* ---------------- News ticker（ヒーロー直下。最新 3 件を数秒ごとに入れ替える） ---------------- */
.news-ticker { margin-top: 0; }
.news-ticker__inner { padding: 22px 0; font-size: var(--fs-base); gap: 20px; }
/* 3 件を同じマスに重ね、is-on だけ見せる（高さは一番長い項目に合わせて固定） */
.news-ticker__stack { flex: 1 1 auto; min-width: 0; display: grid; }
.news-ticker__stack .news-ticker__link {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.news-ticker__stack .news-ticker__link.is-on { opacity: 1; transform: none; pointer-events: auto; }
.news-ticker__dots { flex: none; display: flex; gap: 6px; }
.news-ticker__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s ease, transform .3s ease; }
.news-ticker__dots i.is-on { background: var(--ink); transform: scale(1.2); }
@media (max-width: 720px) {
  .news-ticker__inner { padding: 18px 0; font-size: var(--fs-base); gap: 14px; }
  .news-ticker__link { flex-wrap: wrap; gap: 8px 12px; }
  .news-ticker__title { flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .news-ticker__cat { display: inline-block; }
  .news-ticker__arrow { display: none; }
}

/* ---------------- Section header (split lead) ---------------- */
.home-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.home-head__lead--below { margin: calc(-1 * var(--space-4)) 0 var(--space-6); max-width: 640px; }
.home-head__lead {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--muted);
  max-width: 460px;
  margin: 0;
}
/* 「一覧を見る」ピル */
.home-morelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.home-morelink:hover { border-color: rgba(91,108,255,.4); transform: translateY(-1px); box-shadow: var(--shadow); }
.home-morelink .ul { background: none; padding-bottom: 0; }

/* ---------------- Products（自社製品: 文章＋大きな製品画像を左右交互に） ---------------- */
.prow-list { display: grid; gap: clamp(48px, 7vw, 104px); }
.prow {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.prow--flip .prow__media { order: -1; }
.prow__title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  margin: 0 0 14px;
}
.prow__logo { height: 34px; width: auto; display: block; }
.prow__brandmark { display: inline-flex; align-items: center; gap: 10px; }
.prow__brandmark img { height: 30px; width: auto; }
.prow__sub {
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  margin: -6px 0 12px;
}
.prow__tag {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-3);
  white-space: nowrap;
}
.prow__body {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: var(--ink-3);
  margin: 0 0 26px;
  max-width: 520px;
}
/* 画像カードは薄い影で浮かせ、後ろに淡い角丸のブロックをずらして敷く */
.prow__media { position: relative; padding: 24px 0 32px 32px; }
.prow--flip .prow__media { padding: 24px 32px 32px 0; }
.prow__media::before {
  content: "";
  position: absolute;
  inset: 0 -4% 0 12%;
  border-radius: 28px;
  background: var(--bg-muted);
  z-index: 0;
}
.prow--flip .prow__media::before { inset: 0 12% 0 -4%; }
.prow__card {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 16 / 10;
  box-shadow: 0 30px 60px -28px rgba(17,19,24,.28), 0 4px 16px -8px rgba(17,19,24,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.prow__card:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -30px rgba(17,19,24,.32), 0 6px 18px -8px rgba(17,19,24,.12); }
.prow__card img,
.prow__card video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.prow__card--diagram img { object-fit: contain; padding: 14px; }
@media (max-width: 860px) {
  .prow { grid-template-columns: 1fr; gap: 24px; }
  .prow__media, .prow--flip .prow__media { order: -1; padding: 12px 0 20px 16px; }
  /* 画面の外にはみ出さないよう、スマホでは後ろの板を右端で止める */
  .prow__media::before, .prow--flip .prow__media::before { inset: 0 0 0 10%; }
  .prow__media, .prow--flip .prow__media { padding-right: 16px; }
}

/* ホームのカードは 1px の枠を弱め、薄い影で浮かせる（neoscorp 風） */
#services .service-card, .works-scroll .case-card, .works-scroll .insight-card, .ptile {
  border-color: rgba(17,19,24,.06);
  box-shadow: 0 12px 32px -20px rgba(17,19,24,.22);
}

/* ---------------- 取扱製品（製品カード） ---------------- */
/* 製品カード（白カード。自社製品は画面・映像、取扱製品はロゴまたは写真） */
.ptile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ptile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(91,108,255,.3); }
.ptile__media {
  position: relative;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 28px;
  background: #f6f7fa;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ptile__media img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.ptile__media--photo { padding: 0; background: #0b0d1a; }
.ptile__media--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.ptile__wordmark {
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.ptile__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ptile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ptile__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); margin: 0; }
.ptile__tag {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--muted);
  white-space: nowrap;
}
.ptile__text { font-size: var(--fs-sm); line-height: 1.8; color: var(--muted); margin: 0; }
.ptile__more { padding-top: 10px; }
@media (max-width: 1020px) { .ptile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ptile-grid { grid-template-columns: 1fr; } .ptile__media { height: 150px; } }

/* ---------------- Services（4枚を2×2の角丸カードで） ---------------- */
#services .services { grid-template-columns: repeat(2, 1fr); }
#services .services > .service-card,
#services .services > .service-card:last-child { grid-column: auto; }
@media (max-width: 720px) { #services .services { grid-template-columns: 1fr; } }

/* ---------------- /products/ のロゴカード（ProductCards.astro） ---------------- */
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prod-grid--logos { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(91,108,255,.3); }
.prod-card--logo .prod-card__media {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 28px;
  background: #f6f7fa;
  border-bottom: 1px solid var(--line);
}
.prod-card--logo .prod-card__media img { width: auto; height: auto; max-width: 100%; max-height: 60px; object-fit: contain; }
.prod-card__wordmark {
  font-family: var(--font-ui);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
}
.prod-card__brand { display: inline-flex; align-items: center; gap: 14px; }
.prod-card--logo .prod-card__media .prod-card__mark { width: 44px; height: 44px; max-height: none; }
.prod-card__brand .prod-card__wordmark { font-family: var(--font-jp); font-weight: var(--fw-heavy); font-size: var(--fs-xl); }
.prod-card__text { padding: 20px 22px 22px; }
.prod-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.prod-card__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); margin: 0; }
.prod-card__tag {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--muted);
  white-space: nowrap;
}
.prod-card__body { font-size: var(--fs-sm); line-height: 1.8; color: var(--muted); margin: 0; }
@media (max-width: 1020px) { .prod-grid--logos { grid-template-columns: 1fr 1fr; } }
/* 黒の角丸マーク付きのロゴ（avacast・Membercore・SealGate・Webhook Admin）は高さをそろえ、マークの大きさを同じにする。
   max-height だけだと、横に長いロゴほど幅で縮められてマークが小さくなる */
.prod-card--logo:is([data-pz-key="avacast"], [data-pz-key="membercore"], [data-pz-key="sealgate"], [data-pz-key="webhookadmin"]) .prod-card__media img { height: 36px; max-height: none; max-width: none; }
/* /products/ の自社プロダクト: 折り返さずに横へ送る（.works-scroll は pages.css） */
.prod-scroll > .prod-card { flex: 0 0 clamp(260px, 27vw, 300px); scroll-snap-align: start; }
@media (max-width: 720px) { .prod-grid, .prod-grid--logos { grid-template-columns: 1fr; gap: 20px; } }

/* ---------------- News list（お知らせページと同じ罫線区切りの行。カードにはしない） ---------------- */
.news-list { display: block; border-top: 0; }
.news-row {
  display: grid;
  grid-template-columns: 110px 150px 1fr 28px;
  gap: 24px;
  align-items: center;
  padding: 20px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transition: background .2s ease;
}
.news-row:hover { background: var(--bg-alt); }
.news-row__date { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.news-row__cat {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  text-align: center;
  color: var(--ink-3);
  background: var(--bg);
}
.news-row__title { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.news-row .ul { background: none; padding-bottom: 0; }
.news-row__arrow { justify-self: end; color: var(--muted); }
@media (max-width: 720px) {
  .news-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date cat" "title title";
    gap: 8px 14px;
    padding: 16px 18px;
  }
  .news-row__date { grid-area: date; }
  .news-row__cat { grid-area: cat; justify-self: start; }
  .news-row__title { grid-area: title; }
  .news-row__arrow { display: none; }
}

/* ---------------- Hero: 動くデモを全面の背景に、コピーを左下に（zeals 風） ---------------- */
.hero--stage {
  position: relative;
  padding: 0;
  min-height: clamp(560px, 82vh, 840px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #f6f7fa;
  color: var(--on-accent);
}
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,12,20,0) 38%, rgba(10,12,20,.42) 72%, rgba(10,12,20,.78) 100%),
    linear-gradient(90deg, rgba(10,12,20,.35) 0%, rgba(10,12,20,0) 55%);
}
.hero--stage .hero__inner { position: relative; z-index: 2; max-width: var(--max); padding-bottom: clamp(40px, 6vw, 72px); padding-top: 120px; width: 100%; }
.hero__copy { max-width: 560px; }
.hero--stage .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.hero--stage .eyebrow::before { background: rgba(255,255,255,.8); }
.hero__headline--product { margin: 0 0 26px; }
.hero__headline--product img { height: clamp(44px, 5vw, 76px); width: auto; display: block; filter: drop-shadow(0 6px 24px rgba(0,0,0,.25)); }
@media (max-width: 720px) {
  .hero--stage { min-height: clamp(480px, 68vh, 600px); }
  .hero--stage .hero__inner { padding-top: 40px; padding-bottom: 28px; }
  .hero__headline--product { margin-bottom: 20px; }
}

/* ヒーローの登場アニメーション */
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
.hero .eyebrow, .hero__headline--product, .hero__ctas {
  animation: heroIn .9s cubic-bezier(.2, .6, .2, 1) both;
}
.hero__headline--product { animation-delay: .1s; }
.hero__ctas { animation-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero__headline--product, .hero__ctas { animation: none; }
}

.demo { position: relative; }
/* 全面モード: 枠・影なしでヒーローいっぱいに広げ、文字は画面幅に応じて拡大 */
.demo--full, .demo--full .demo__frame, .demo--full .demo__stage { position: absolute; inset: 0; }
.demo--full .demo__frame { border-radius: 0; border: 0; box-shadow: none; }
.demo--full .demo__stage { aspect-ratio: auto; }
.demo--full { font-size: clamp(11px, 1.05vw, 16px); }
.demo--full .demo__scene--admin { font-size: 1em; }
.demo--full .demo__side { width: 22%; padding: 2em 1.4em; }
.demo--full .demo__logo { height: 1.4em; margin-bottom: 1.6em; }
.demo--full .demo__side li { font-size: 1em; padding: .55em .8em; }
.demo--full .demo__main { padding: 2em 2.4em; }
.demo--full .demo__main h4 { font-size: 1.35em; }
.demo--full .demo__main p { font-size: .95em; margin-bottom: 1em; }
.demo--full .demo__search { height: 2.4em; line-height: 2.4em; font-size: .95em; max-width: 46%; }
.demo--full .demo__tags span { font-size: .9em; padding: .2em .8em; }
.demo--full .demo__tags { margin: .9em 0 1em; }
.demo--full .demo__grid { gap: .9em; max-width: 78%; }
.demo--full .demo__card b { font-size: .85em; }
.demo--full .demo__toast { font-size: 1em; right: 2em; bottom: 2em; padding: .6em 1.2em; }
.demo--full .demo__scene--code { padding: 3em clamp(24px, 8vw, 120px); }
.demo--full .demo__scene--code pre { font-size: clamp(11px, 1.1vw, 17px); }
.demo--full .demo__editor-bar { font-size: 1em; }
.demo--full .demo__site { padding: 2em clamp(24px, 6vw, 96px); }
.demo--full .demo__site-bar i { height: .8em; width: 4.4em; }
.demo--full .demo__site-bar i:first-child { width: 6.6em; height: 1.2em; }
.demo--full .demo__site-hero i { height: 1.1em; margin-bottom: 1em; }
.demo--full .demo__site-hero .demo__site-btn { width: 9em; height: 2.2em; }
.demo--full .demo__site-cols i { height: 7em; }
.demo--full .demo__widget { width: 34%; min-width: 260px; max-width: 420px; right: clamp(16px, 4vw, 64px); top: 8%; bottom: 8%; font-size: 1.05em; }
@media (max-width: 720px) {
  .demo--full { font-size: var(--fs-2xs); }
  .demo--full .demo__side { display: none; }
  .demo--full .demo__grid { max-width: none; }
  /* 縦画面: 会話ウィジェットは上寄せにして、下に重なるコピーと分ける */
  .demo--full .demo__widget { width: 66%; min-width: 0; right: 14px; top: 16px; bottom: 44%; }
  .demo--full .demo__video { aspect-ratio: 16 / 10; }
  /* 下に重なるコピーとぶつからないよう、トーストは上に出す */
  .demo--full .demo__toast { top: 14px; bottom: auto; right: 14px; }
  .demo--full .demo__scene--code { padding: 20px 18px; }
  .demo--full .demo__scene--code pre { font-size: var(--fs-2xs); }
  .demo--full .demo__widget { bottom: 36%; }
}
.demo__frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -30px rgba(17,19,24,.32), 0 6px 18px -8px rgba(17,19,24,.10);
}
.demo__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--line);
}
.demo__chrome > span { width: 9px; height: 9px; border-radius: 50%; background: #d7d9de; }
.demo__url {
  margin-left: 10px;
  flex: 1;
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--bg);
  font: 500 10.5px/20px var(--font-mono);
  color: var(--muted);
  font-style: normal;
  letter-spacing: var(--ls-wide);
}
.demo__stage { position: relative; aspect-ratio: 16 / 10; background: var(--bg); }
.demo__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  font-family: var(--font-jp);
}
.demo__scene.is-on { opacity: 1; }

/* 1) 管理画面 */
.demo__scene--admin { display: flex; }
.demo__side {
  width: 27%;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: #fafbfc;
}
.demo__logo { height: 14px; width: auto; margin: 2px 0 18px 4px; }
.demo__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.demo__side li { font-size: var(--fs-2xs); color: var(--muted); padding: 6px 8px; border-radius: 6px; }
.demo__side li.is-active { background: var(--bg); color: var(--ink); font-weight: var(--fw-bold); border: 1px solid var(--line); }
.demo__main { flex: 1; padding: 18px 20px; position: relative; min-width: 0; }
.demo__main h4 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--ink); }
.demo__main p { margin: 3px 0 10px; font-size: var(--fs-2xs); color: var(--muted); }
.demo__search {
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: var(--fs-2xs);
  color: var(--muted-2);
  max-width: 62%;
}
.demo__tags { display: flex; gap: 5px; margin: 8px 0 10px; }
.demo__tags span { font-size: 9.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.demo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo__card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: #eef0f3;
  aspect-ratio: 4 / 3;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.demo__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo__card b {
  position: absolute;
  left: 6px; bottom: 6px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  color: var(--on-accent);
  background: var(--ink);
  border-radius: 999px;
  padding: 2px 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.demo__card.is-selected { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,19,24,.10); transform: translateY(-1px); }
.demo__card.is-selected b { opacity: 1; transform: none; }
.demo__toast {
  position: absolute;
  right: 16px; bottom: 14px;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  color: var(--on-accent);
  background: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.demo__toast.is-on { opacity: 1; transform: none; }
.demo__cursor {
  position: absolute;
  left: 60%; top: 80%;
  z-index: 2;
  opacity: 0;
  transition: left 1s cubic-bezier(.2,.7,.2,1), top 1s cubic-bezier(.2,.7,.2,1), opacity .3s ease, transform .12s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.demo__cursor.is-on { opacity: 1; }
.demo__cursor.is-click { transform: scale(.85); }

/* 2) 埋め込みコード */
.demo__scene--code { background: #0f1218; padding: 22px; }
.demo__editor { height: 100%; display: flex; flex-direction: column; }
.demo__editor-bar { font: 500 10.5px var(--font-mono); color: rgba(255,255,255,.45); margin-bottom: 12px; }
.demo__scene--code pre { margin: 0; font: 400 11.5px/1.85 var(--font-mono); color: #e6e8ee; white-space: pre; overflow: hidden; }
.demo__line { display: block; min-height: 1.85em; }
.demo__line.is-typing::after { content: ""; display: inline-block; width: 6px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: #e6e8ee; animation: demoBlink .9s steps(2) infinite; }
@keyframes demoBlink { to { opacity: 0; } }

/* 3) サイト上のチャット */
.demo__scene--site { background: #f6f7fa; }
.demo__site { position: absolute; inset: 0; padding: 18px 22px; }
.demo__site-bar { display: flex; gap: 10px; align-items: center; height: 26px; margin-bottom: 26px; }
.demo__site-bar i { display: block; height: 8px; width: 48px; border-radius: 4px; background: #dfe2e8; }
.demo__site-bar i:first-child { width: 72px; height: 12px; background: var(--ink); opacity: .85; }
.demo__site-hero i { display: block; height: 12px; border-radius: 6px; background: #dfe2e8; margin-bottom: 10px; }
.demo__site-hero .demo__site-btn { width: 96px; height: 22px; border-radius: 999px; background: var(--ink); opacity: .85; margin-top: 16px; }
.demo__site-cols { display: flex; gap: 12px; margin-top: 26px; width: 58%; }
.demo__site-cols i { flex: 1; height: 70px; border-radius: 10px; background: #e6e9ee; }
.demo__widget {
  position: absolute;
  right: 16px; top: 14px; bottom: 14px;
  width: 46%;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(17,19,24,.35);
  overflow: hidden;
  font-size: 10.5px;
}
.demo__widget-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-weight: var(--fw-heavy); color: var(--ink); border-bottom: 1px solid var(--line); }
.demo__live { display: inline-flex; align-items: center; gap: 5px; font: 600 8.5px var(--font-mono); letter-spacing: var(--ls-wider); color: var(--ink-3); }
.demo__live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; animation: demoPulse 1.4s ease-in-out infinite; }
@keyframes demoPulse { 50% { opacity: .35; } }
.demo__video { flex: none; aspect-ratio: 4 / 3; background: #e9edf2; }
/* 会話部分だけがスクロールし、顔は隠れない */
.demo__msgs { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; scrollbar-width: none; }
.demo__msgs::-webkit-scrollbar { display: none; }
.demo__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo__bubble {
  margin: 8px 10px 0;
  padding: 6px 9px;
  border-radius: 10px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.demo__bubble.is-on { opacity: 1; transform: none; }
.demo__bubble--user { margin-left: 28%; background: var(--ink); color: var(--on-accent); border-bottom-right-radius: 3px; }
.demo__bubble--avatar { margin-right: 18%; background: #f1f3f6; color: var(--ink); border-bottom-left-radius: 3px; min-height: 2.2em; }

@media (max-width: 520px) {
  .demo__stage { aspect-ratio: 4 / 3; }
  .demo__side { display: none; }
  .demo__widget { width: 60%; min-width: 0; right: 10px; top: 10px; bottom: 10px; }
  .demo__video { aspect-ratio: 16 / 10; }
  .demo__video video { object-position: center top; }
  .demo__bubble--user { margin-left: 18%; }
  .demo__scene--code { padding: 16px; }
  .demo__scene--code pre { font-size: var(--fs-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  .demo__scene, .demo__cursor, .demo__bubble, .demo__toast { transition: none; }
}

/* ---------------- 製品カードの動くデモ（警備サイン: AI 配置 ／ 規程ログ: AI 法令レビュー） ----------------
   カード幅を基準（cqw）に寸法を決めるので、どの幅でも同じ見え方（動画のように拡縮）になる。 */
.prow__card { container-type: inline-size; }
.prow__card--demo { background: var(--bg); }
.pd {
  position: absolute;
  inset: 0;
  display: flex;
  font-family: var(--font-jp);
  font-size: 1.7cqw;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
}
.pd__side {
  width: 22%;
  flex: none;
  background: #fafbfc;
  border-right: 1px solid var(--line);
  padding: 2.2cqw 1.8cqw;
}
.pd__brand { font-size: 2.1cqw; font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); margin-bottom: 2.2cqw; color: var(--ink); }
.pd__brand--kl { color: #1f3a6b; }
.pd__user { font-size: 1.5cqw; font-weight: var(--fw-bold); margin-bottom: 2cqw; line-height: 1.3; }
.pd__user small { display: block; font-size: 1.15cqw; font-weight: var(--fw-normal); color: #8b9096; }
.pd__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqw; }
.pd__side li { font-size: 1.5cqw; color: var(--muted); padding: .8cqw 1.2cqw; border-radius: .8cqw; white-space: nowrap; }
.pd__side li.pd__group { color: #2f3f8f; font-weight: var(--fw-bold); margin-top: .6cqw; }
.pd__side li.pd__sub { padding-left: 3cqw; }
.pd__side li.is-active { background: #eef0f8; color: #2f3f8f; font-weight: var(--fw-bold); }
.pd--kl .pd__side li.is-active { background: #e9eef6; color: #1f3a6b; }
.pd__main { flex: 1; min-width: 0; position: relative; padding: 2.4cqw 2.6cqw; }
.pd__bar { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 1.6cqw; }
.pd__bar h4 { margin: 0; font-size: 2.4cqw; font-weight: var(--fw-heavy); }
.pd__month { font-size: 1.4cqw; color: var(--muted); border: 1px solid var(--line); border-radius: .7cqw; padding: .6cqw 1.2cqw; }
.pd__ai {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .7cqw;
  font: 600 1.45cqw/1 var(--font-jp);
  color: var(--on-accent); background: #4f46e5;
  border: 0; border-radius: .8cqw;
  padding: 1cqw 1.6cqw;
  box-shadow: 0 .6cqw 1.6cqw -.6cqw rgba(79,70,229,.6);
  transition: transform .15s ease;
}
.pd__ai.is-press { transform: scale(.96); }
.pd__spark { color: #ffd54a; font-size: 1.2em; line-height: 1; }
.pd__grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1.3cqw; }
.pd__grid th, .pd__grid td { border: 1px solid var(--line); height: 4.6cqw; padding: 0; text-align: center; }
.pd__grid thead th { background: #f3f4f7; color: var(--muted); font-weight: var(--fw-bold); font-size: 1.25cqw; line-height: 1.15; }
.pd__grid thead th small { display: block; font-size: 1cqw; font-weight: var(--fw-medium); color: #8b9096; }
.pd__grid thead th.is-off { background: #eceef3; }
.pd__grid tbody th { width: 22%; text-align: left; padding: 0 1cqw; font-weight: var(--fw-bold); font-size: 1.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fbfbfc; }
.pd__grid thead th:first-child { width: 22%; }
.pd__chip {
  display: inline-block;
  font-size: 1.15cqw; font-weight: var(--fw-bold);
  color: #166534; background: #dcfce7;
  border-radius: 999px; padding: .35cqw .9cqw;
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.pd__chip.is-on { opacity: 1; transform: none; }
.pd__modal {
  position: absolute; inset: 0;
  background: rgba(17,19,24,.28);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
}
.pd__modal.is-on { opacity: 1; }
.pd__modal-box {
  width: 44%; background: var(--bg); border-radius: 1.2cqw; padding: 2cqw 2.2cqw;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.4);
  display: grid; gap: 1.1cqw;
  transform: translateY(1cqw); transition: transform .25s ease;
}
.pd__modal.is-on .pd__modal-box { transform: none; }
.pd__modal-head { font-size: 1.8cqw; font-weight: var(--fw-heavy); display: flex; align-items: center; gap: .6cqw; margin-bottom: .4cqw; }
.pd__modal-box label { display: flex; align-items: center; gap: .9cqw; font-size: 1.4cqw; color: var(--ink-3); }
.pd__check { width: 1.6cqw; height: 1.6cqw; border-radius: .35cqw; background: #4f46e5; position: relative; }
.pd__check::after { content: ""; position: absolute; left: .5cqw; top: .2cqw; width: .45cqw; height: .85cqw; border: solid var(--bg); border-width: 0 .25cqw .25cqw 0; transform: rotate(45deg); }
.pd__gen { margin-top: .6cqw; font: 600 1.45cqw/1 var(--font-jp); color: var(--on-accent); background: #4f46e5; border: 0; border-radius: .8cqw; padding: 1.1cqw; }
.pd__toast {
  position: absolute; right: 2.4cqw; bottom: 2.2cqw;
  font-size: 1.4cqw; font-weight: var(--fw-bold); color: var(--on-accent); background: var(--ink);
  border-radius: 999px; padding: .9cqw 1.6cqw;
  opacity: 0; transform: translateY(.8cqw); transition: opacity .25s ease, transform .25s ease;
}
.pd__toast.is-on { opacity: 1; transform: none; }
.pd__cursor {
  position: absolute; left: 50%; top: 80%; z-index: 3;
  width: 2.4cqw; height: auto;
  opacity: 0;
  transition: left .9s cubic-bezier(.2,.7,.2,1), top .9s cubic-bezier(.2,.7,.2,1), opacity .3s ease, transform .12s ease;
  filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.3));
}
.pd__cursor svg { width: 100%; height: auto; }
.pd__cursor.is-on { opacity: 1; }
.pd__cursor.is-click { transform: scale(.85); }

/* 規程ログ */
.pd__sub-text { margin: -.6cqw 0 1.6cqw; font-size: 1.35cqw; color: #767b80; }
.pd__laws { width: 100%; border-collapse: collapse; font-size: 1.45cqw; }
.pd__laws th { text-align: left; font-size: 1.15cqw; font-weight: var(--fw-medium); color: #8b9096; padding: 0 1cqw .8cqw; border-bottom: 1px solid var(--line); }
.pd__laws td { padding: 1.05cqw 1cqw; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.pd__law { font-weight: var(--fw-bold); white-space: nowrap; }
.pd__date { color: #767b80; font-size: 1.3cqw; white-space: nowrap; }
.pd__st { display: inline-block; font-size: 1.15cqw; font-weight: var(--fw-bold); padding: .35cqw .9cqw; border-radius: .5cqw; white-space: nowrap; }
.pd__st--ok { color: #8b9096; }
.pd__st--warn { color: #1f3a6b; background: #e9eef6; }
.pd__st--idle { color: #8b9096; }
.pd__st--run { color: #1f3a6b; background: #e9eef6; }
.pd__st--run::after { content: ""; display: inline-block; width: .9cqw; height: .9cqw; margin-left: .6cqw; border: .2cqw solid #1f3a6b; border-right-color: transparent; border-radius: 50%; vertical-align: -.1cqw; animation: pdSpin .8s linear infinite; }
@keyframes pdSpin { to { transform: rotate(360deg); } }
.is-target [data-run], .is-target [data-done], .is-target [data-see] { display: none; }
.is-target.is-run [data-idle], .is-target.is-run [data-review] { display: none; }
.is-target.is-run [data-run] { display: inline-block; }
.is-target.is-done [data-idle], .is-target.is-done [data-review] { display: none; }
.is-target.is-done [data-done] { display: inline-block; }
.is-target.is-done [data-see] { display: inline-block; }
.pd__act { text-align: right; white-space: nowrap; }
.pd__btn { font: 600 1.25cqw/1 var(--font-jp); color: var(--ink); background: var(--bg); border: 1px solid #d7d9de; border-radius: .6cqw; padding: .8cqw 1.3cqw; }
.pd__btn--dark { color: var(--on-accent); background: #1f3a6b; border-color: #1f3a6b; }
.pd__panel {
  position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 2cqw;
  background: var(--bg); border: 1px solid var(--line); border-radius: 1.2cqw;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.35);
  padding: 1.6cqw 2cqw;
  opacity: 0; transform: translateY(1.5cqw); transition: opacity .3s ease, transform .3s ease;
}
.pd__panel.is-on { opacity: 1; transform: none; }
.pd__panel-head { font-size: 1.5cqw; font-weight: var(--fw-heavy); display: flex; align-items: center; gap: .6cqw; margin-bottom: 1cqw; }
.pd__diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.pd__diff b { display: block; font-size: 1.1cqw; font-weight: var(--fw-bold); color: #8b9096; letter-spacing: var(--ls-wide); margin-bottom: .4cqw; }
.pd__diff p { margin: 0; font-size: 1.3cqw; line-height: 1.6; color: var(--ink-3); }
.pd__diff mark { background: #fff1a8; color: #7a5a00; padding: 0 .3cqw; border-radius: .2cqw; }
.pd__note { margin-top: 1.1cqw; padding: 1cqw 1.2cqw; border-radius: .8cqw; background: #e9eef6; color: #1f3a6b; font-size: 1.3cqw; line-height: 1.6; min-height: 3.6cqw; }
.pd__note:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pd__chip, .pd__modal, .pd__toast, .pd__cursor, .pd__panel { transition: none; }
}

/* Our Services のカードは 2×2 で幅があるぶん、文字と余白を詰める */
#services .service-card { padding: 34px 32px 30px; }
#services .service-card__num { font-size: var(--fs-xs); margin-bottom: 14px; }
#services .service-card h3 { font-size: var(--fs-lg); margin: 0 0 10px; }
#services .service-card p { font-size: var(--fs-base); line-height: 1.8; margin: 0 0 18px; }
@media (max-width: 720px) {
  #services .service-card { padding: 26px 22px 24px; }
  #services .service-card h3 { font-size: var(--fs-h3); }
  #services .service-card p { font-size: var(--fs-sm); }
}

/* 閲覧状況に応じたヒーローの差し替え（動画ではなく製品の画面を出すとき） */
.hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero--still .hero__shade {
  background:
    linear-gradient(180deg, rgba(10,12,20,.30) 0%, rgba(10,12,20,.55) 55%, rgba(10,12,20,.86) 100%),
    linear-gradient(90deg, rgba(10,12,20,.45) 0%, rgba(10,12,20,.05) 60%);
}
/* 出し分けたヒーローの、製品名の下のキャッチコピー */
.hero__lead { max-width: 26em; margin: -8px 0 var(--space-6); font-size: var(--fs-md); line-height: 1.7; color: rgba(255,255,255,.88); word-break: auto-phrase; text-wrap: balance; }
.hero__headline--text { font-size: clamp(40px, 6vw, 80px); font-weight: var(--fw-heavy); color: var(--on-accent); letter-spacing: var(--ls-tight); line-height: 1.05; margin: 0 0 26px; text-shadow: 0 6px 24px rgba(0,0,0,.25); }
@media (max-width: 860px) { .hero__headline--text { margin-bottom: 20px; } }

/* 製品の画面を出すヒーロー（規程ログ・警備サイン）。デモと同じ明るい地で、画面はブラウザの枠に入れて右に置く */
.hero-shot { position: absolute; right: clamp(24px, 5vw, 96px); top: 50%; transform: translateY(-50%); width: min(54%, 760px); border-radius: 14px; background: var(--bg); box-shadow: 0 30px 60px -24px rgba(17,19,24,.28), 0 0 0 1px rgba(17,19,24,.08); overflow: hidden; }
.hero-shot__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.hero-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot--bare { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
/* 管理画面のデモを入れるとき。枠と影は .pdemo--card__frame のものを使う */
.hero-shot:has(.hero-shot__frame) { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.hero-shot__frame { max-width: none; margin: 0; }
/* ヒーローの小見出しは日本語なので、英字ラベル用の大文字変換をしない（SaaS が SAAS になる） */
.hero .eyebrow { text-transform: none; }

/* 管理画面とスマホを並べるヒーロー（規程ログ）。スマホを管理画面の右下に重ねる */
.hero-pair { position: absolute; inset: 0; }
.hero-pair .hero-shot { right: clamp(96px, 11vw, 200px); width: min(50%, 700px); }
.klp { position: absolute; right: clamp(24px, 4vw, 72px); top: 50%; transform: translateY(-38%); width: 16em; height: 33em; font-size: clamp(10px, .95vw, 14px); border-radius: 2.6em; background: #0b0c10; padding: .75em; box-shadow: 0 30px 60px -20px rgba(17,19,24,.4), inset 0 0 0 .16em #2a2d36; z-index: 3; color: var(--ink); }
.klp__screen { position: absolute; inset: .75em; border-radius: 2em; background: #f5f7fb; overflow: hidden; }
.klp__status { position: absolute; top: .9em; left: 1.6em; right: 1.6em; display: flex; justify-content: space-between; font-size: .85em; font-weight: var(--fw-heavy); z-index: 2; }
.klp__status-r i { display: inline-block; width: .4em; height: .85em; background: var(--ink); margin-left: .15em; border-radius: .1em; vertical-align: middle; }
.klp__head { padding: 2.9em 1.2em .8em; background: var(--bg); border-bottom: 1px solid var(--line); font-weight: var(--fw-heavy); font-size: 1.05em; color: #1f3a6b; }
.klp__page { position: absolute; inset: 5.2em 0 0; padding: 1em; opacity: 0; transform: translateX(6%); transition: opacity .35s, transform .35s; }
.klp__page.is-on { opacity: 1; transform: none; }
.klp__label { margin: 0 0 .7em; font-size: .8em; color: var(--muted); }
.klp__item { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: .8em; padding: .8em .9em; margin-bottom: .55em; box-shadow: 0 1px 2px rgba(17,19,24,.06); transition: background .2s; }
.klp__item b { display: block; font-size: .95em; font-weight: var(--fw-bold); }
.klp__item small { display: block; margin-top: .15em; font-size: .75em; color: var(--muted); }
.klp__item.is-press { background: #e9eef6; }
.klp__chev { width: .5em; height: .5em; border-right: .14em solid #9aa1ad; border-top: .14em solid #9aa1ad; transform: rotate(45deg); }
.klp__title { margin: 0 0 .6em; font-size: 1.05em; font-weight: var(--fw-heavy); }
.klp__text { margin: 0 0 .7em; font-size: .85em; line-height: 1.7; background: #fff8d6; padding: .5em .6em; border-radius: .4em; }
.klp__text--muted { background: none; padding: 0 .6em; color: var(--muted); }
.klp__ask { position: absolute; left: 1em; right: 1em; bottom: 1.6em; height: 2.8em; border: 0; border-radius: 1.4em; background: #1f3a6b; color: #fff; font: inherit; font-size: .9em; font-weight: var(--fw-bold); }
.klp__toast { position: absolute; left: 1em; right: 1em; bottom: 5.4em; padding: .6em .8em; border-radius: .7em; background: #0f5132; color: #fff; font-size: .8em; text-align: center; opacity: 0; transform: translateY(.6em); transition: opacity .3s, transform .3s; }
.klp__toast.is-on { opacity: 1; transform: none; }
.klp__q { margin: 0 0 .8em auto; max-width: 85%; width: fit-content; min-height: 1.6em; padding: .6em .8em; border-radius: 1em 1em .3em 1em; background: #2f5bd3; color: #fff; font-size: .85em; line-height: 1.6; opacity: 0; }
.klp__q.is-on { opacity: 1; }
.klp__typing { display: none; gap: .3em; width: fit-content; padding: .7em .8em; border-radius: 1em; background: var(--bg); }
.klp__typing.is-on { display: flex; }
.klp__typing i { width: .45em; height: .45em; border-radius: 50%; background: #9aa1ad; animation: klp-dot 1s infinite; }
.klp__typing i:nth-child(2) { animation-delay: .15s; } .klp__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes klp-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.klp__a { max-width: 92%; padding: .7em .8em; border-radius: 1em 1em 1em .3em; background: var(--bg); box-shadow: 0 1px 2px rgba(17,19,24,.06); font-size: .85em; line-height: 1.7; opacity: 0; transform: translateY(.4em); transition: opacity .35s, transform .35s; }
.klp__a.is-on { opacity: 1; transform: none; }
.klp__a p { margin: 0 0 .5em; }
.klp__src { display: inline-block; padding: .2em .6em; border-radius: .5em; background: #e9eef6; color: #1f3a6b; font-size: .85em; font-weight: var(--fw-bold); }
.klp__tap { position: absolute; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: rgba(47,91,211,.35); opacity: 0; pointer-events: none; }
.klp__tap.is-on { animation: klp-tap .6s ease-out; }
/* 警備サインのスマホ（地図・署名） */
.klp__item--tall { padding: 1em .9em; border-left: .3em solid #4f46e5; }
.ssp__map { position: relative; height: 11em; border-radius: .8em; background: repeating-linear-gradient(0deg, #e9edf3 0 1px, transparent 1px 1.6em), repeating-linear-gradient(90deg, #e9edf3 0 1px, transparent 1px 1.6em), #f7f9fc; overflow: hidden; }
.ssp__area { position: absolute; left: 50%; top: 50%; width: 7em; height: 7em; margin: -3.5em 0 0 -3.5em; border-radius: 50%; background: rgba(79,70,229,.12); border: .12em solid rgba(79,70,229,.45); }
.ssp__pin { position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; background: #4f46e5; box-shadow: 0 0 0 .35em rgba(79,70,229,.25); }
.ssp__ok { margin: .8em 0 0; padding: .5em .7em; border-radius: .6em; background: #e7f6ee; color: #0f5132; font-size: .85em; font-weight: var(--fw-bold); opacity: 0; transition: opacity .3s; }
.ssp__ok.is-on { opacity: 1; }
.ssp__pad { height: 6.5em; border-radius: .8em; border: .1em dashed #b8bfcb; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.ssp__pad svg { width: 88%; height: auto; }
.ssp__stroke { fill: none; stroke: #111318; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.ssp__stroke.is-on { transition: stroke-dashoffset 1.8s ease; stroke-dashoffset: 0; }
@keyframes klp-tap { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* ===== 製品の「動画のようなデモ」（ヒーローの出し分けで出す。SealGate = .sgd、Membercore = .sgd.mcd） ===== */
/* デモのヒーローも avacast と同じく、画面を全面に敷いて暗いグラデーションを重ね、文字は白 */
[class*="hero--demo-"] .hero__stage {
  background-image:
    linear-gradient(to right, rgba(17,19,24,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,19,24,.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
[class*="hero--demo-"] .sgd { z-index: 1; }
.sgd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: clamp(24px, 4vw, 64px); padding: 0 clamp(24px, 7vw, 120px) 0 0; font-size: clamp(11px, 1vw, 15px); color: var(--ink); }
.sgd__phone { position: relative; width: 20em; height: 41em; border-radius: 3.2em; background: #0b0c10; padding: .9em; box-shadow: 0 30px 60px -20px rgba(17,19,24,.35), inset 0 0 0 .18em #2a2d36; flex: 0 0 auto; transform: translateY(1.5em); }
.sgd__phone::before { content: ""; position: absolute; top: 1.35em; left: 50%; width: 6.4em; height: 1.55em; transform: translateX(-50%); background: #0b0c10; border-radius: 1em; z-index: 4; }
.sgd__status { position: absolute; top: 1.35em; left: 2.2em; right: 2.2em; display: flex; justify-content: space-between; font-size: .95em; font-weight: var(--fw-heavy); color: var(--ink); z-index: 5; }
.sgd__status-r i { display: inline-block; width: .45em; height: .95em; background: var(--ink); margin-left: .18em; border-radius: .1em; vertical-align: middle; }
.sgd__status-r i:nth-child(2) { height: .75em; } .sgd__status-r i:nth-child(1) { height: .55em; }
.sgd__url { position: absolute; top: 3.6em; left: 1.9em; right: 1.9em; height: 2em; border-radius: 1em; background: #eef0f4; font-size: .85em; line-height: 2.35em; text-align: center; color: var(--muted); z-index: 3; }
.sgd__url i { display: inline-block; width: .7em; height: .85em; border: .12em solid #8a8f99; border-radius: .18em .18em .1em .1em; margin-right: .4em; vertical-align: -.1em; }
.sgd__screen { position: absolute; inset: .9em; border-radius: 2.5em; background: var(--bg); overflow: hidden; }
.sgd__page { position: absolute; inset: 0; padding: 7.4em 1.6em 1.6em; opacity: 0; transition: opacity .35s; }
.sgd__page.is-on { opacity: 1; }
.sgd__brand { display: flex; align-items: center; gap: .5em; font-weight: var(--fw-heavy); font-size: 1.1em; color: var(--ink); }
.sgd__brand b { display: inline-flex; width: 1.7em; height: 1.7em; border-radius: .5em; background: linear-gradient(135deg, var(--blue), #8f5bff); color: var(--on-accent); align-items: center; justify-content: center; font-size: .9em; }
.sgd__page h4 { margin: 1.6em 0 .8em; font-size: 1.45em; font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); }
.sgd__field { height: 3em; border: .12em solid var(--line-strong); border-radius: .7em; padding: 0 1em; line-height: 2.8em; font-size: .95em; color: var(--ink); margin-bottom: .9em; }
.sgd__btn { position: relative; width: 100%; height: 3.2em; border: 0; border-radius: .8em; background: var(--ink); color: var(--on-accent); font: inherit; font-weight: var(--fw-heavy); font-size: 1em; display: flex; align-items: center; justify-content: center; gap: .5em; transition: transform .12s, opacity .35s, max-height .35s, margin .35s; overflow: hidden; margin-bottom: .8em; }
.sgd__btn--ghost { background: var(--bg); color: var(--ink); border: .12em solid var(--line-strong); }
.sgd__btn--sm { height: 2.6em; font-size: .9em; margin: .6em 0 0; }
.sgd__btn.is-hidden { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
.sgd__btn.is-new { box-shadow: 0 0 0 .25em rgba(91,108,255,.35); animation: sgdNew 1.2s ease-in-out 2; }
@keyframes sgdNew { 0%, 100% { box-shadow: 0 0 0 .2em rgba(91,108,255,.35); } 50% { box-shadow: 0 0 0 .6em rgba(91,108,255,0); } }
.sgd__btn.is-tap { transform: scale(.97); background: #2a2d36; }
.sgd__tap { position: absolute; left: 50%; top: 50%; width: 2.2em; height: 2.2em; border-radius: 50%; border: .18em solid rgba(91,108,255,.9); transform: translate(-50%,-50%) scale(.3); opacity: 0; pointer-events: none; }
.is-tap > .sgd__tap { animation: sgdTap .6s ease-out forwards; }
@keyframes sgdTap { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } }
.sgd__dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sgd__dim.is-on { opacity: 1; }
.sgd__sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #f7f7f9; border-radius: 1.6em 1.6em 2.5em 2.5em; padding: .8em 1.6em 2.2em; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.8,.2,1); text-align: center; }
.sgd__sheet.is-on { transform: translateY(0); }
.sgd__grab { width: 2.6em; height: .3em; border-radius: .2em; background: #c9ccd4; margin: 0 auto 1em; }
.sgd__sheet-title { font-weight: var(--fw-heavy); font-size: 1.1em; }
.sgd__sheet-body { font-size: .85em; color: var(--muted); line-height: 1.5; margin: .5em 0 1.2em; }
.sgd__faceid { position: relative; height: 6.6em; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); }
.sgd__faceid-icon, .sgd__check { position: absolute; top: 0; transition: opacity .25s, transform .25s; }
.sgd__check { opacity: 0; transform: scale(.7); color: #16a34a; }
.sgd__faceid-label, .sgd__faceid-done { position: absolute; bottom: 0; font-size: .9em; font-weight: var(--fw-heavy); }
.sgd__faceid-done { opacity: 0; color: #16a34a; }
.sgd__faceid.is-scan .sgd__faceid-icon { animation: sgdScan 1.1s ease-in-out infinite; color: var(--blue); }
@keyframes sgdScan { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .55; } }
.sgd__faceid.is-done .sgd__faceid-icon, .sgd__faceid.is-done .sgd__faceid-label { opacity: 0; }
.sgd__faceid.is-done .sgd__check { opacity: 1; transform: scale(1); }
.sgd__faceid.is-done .sgd__faceid-done { opacity: 1; }
.sgd__toast { position: absolute; top: 7.3em; left: 1.6em; right: 1.6em; background: var(--ink); color: var(--on-accent); border-radius: .7em; padding: .7em 1em; font-size: .85em; font-weight: var(--fw-heavy); display: flex; align-items: center; gap: .5em; transform: translateY(-.8em); opacity: 0; transition: opacity .3s, transform .3s; z-index: 2; }
.sgd__toast.is-on { opacity: 1; transform: translateY(0); }
.sgd__toast svg { color: #4ade80; flex: 0 0 auto; }
.sgd__appbar { display: flex; justify-content: space-between; align-items: center; }
.sgd__avatar { width: 2.2em; height: 2.2em; border-radius: 50%; background: #e9ebf5; color: var(--blue); font-weight: var(--fw-heavy); display: inline-flex; align-items: center; justify-content: center; font-size: .95em; }
.sgd__page--home h4 { margin-top: 2.4em; }
.sgd__hello { margin: 0 0 1.2em; font-size: .95em; color: var(--muted); }
.sgd__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-bottom: 1.2em; }
.sgd__card { border: .12em solid #e5e7ee; border-radius: .8em; padding: .8em .9em; display: flex; flex-direction: column; gap: .3em; }
.sgd__card span { font-size: .75em; color: var(--muted-2); } .sgd__card b { font-size: .95em; }
.sgd__rows i { display: block; height: 2.6em; border-radius: .6em; background: #f1f2f6; margin-bottom: .6em; }
/* 横の面: エージェントの会話 ⇄ 管理画面 */
.sgd__side { position: relative; width: 25em; height: 21em; flex: 0 0 auto; }
.sgd__panel { position: absolute; left: 0; right: 0; top: 0; min-height: 12em; background: var(--bg); border-radius: 1em; box-shadow: 0 20px 60px rgba(0,0,0,.4); padding: 1.1em 1.2em 1.2em; opacity: 0; transform: translateY(.6em); transition: opacity .35s, transform .35s; overflow: hidden; }
.sgd__panel.is-on { opacity: 1; transform: none; }
.sgd__console-head { display: flex; align-items: center; gap: .6em; }
.sgd__console-logo { font-weight: var(--fw-heavy); font-size: 1.1em; color: var(--ink); }
.sgd__console-tag { font-size: .7em; color: var(--muted); border: .1em solid var(--line-strong); border-radius: .3em; padding: .1em .45em; }
.sgd__console-sub { font-size: .8em; color: var(--muted); margin: .5em 0 .8em; }
.sgd__chat { display: flex; flex-direction: column; gap: .55em; margin-top: .9em; }
.sgd__msg { font-size: .82em; line-height: 1.45; border-radius: .7em; padding: .55em .8em; opacity: 0; transform: translateY(.4em); transition: opacity .3s, transform .3s; display: flex; align-items: center; gap: .5em; }
.sgd__msg.is-on { opacity: 1; transform: none; }
.sgd__msg--user { align-self: flex-end; background: var(--ink); color: var(--on-accent); max-width: 90%; }
.sgd__msg--ai { background: #f1f2f6; color: var(--ink); }
.sgd__msg--tool { background: var(--bg); border: .1em solid #e3e5ec; color: #333842; padding: .45em .7em; }
.sgd__msg--tool code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--accent-soft); color: #3b49d6; border-radius: .3em; padding: .05em .4em; flex: 0 0 auto; }
.sgd__spin { width: .9em; height: .9em; border-radius: 50%; border: .15em solid var(--line-strong); border-top-color: var(--blue); animation: sgdSpin .8s linear infinite; flex: 0 0 auto; display: none; }
.sgd__tick { color: #16a34a; flex: 0 0 auto; display: none; }
.sgd__msg--tool.is-running .sgd__spin { display: inline-block; }
.sgd__msg--tool.is-done .sgd__tick { display: inline-block; }
@keyframes sgdSpin { to { transform: rotate(360deg); } }
.sgd__row { display: grid; grid-template-columns: 4.4em 1fr 2.8em 5.4em; gap: .5em; align-items: center; font-size: .78em; padding: .5em 0; border-top: .08em solid #eceef3; opacity: 0; transform: translateY(-.4em); transition: opacity .35s, transform .35s; }
.sgd__row.is-on { opacity: 1; transform: none; }
.sgd__row--head { opacity: 1; transform: none; border-top: 0; color: var(--muted-2); font-weight: var(--fw-heavy); }
.sgd__row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; background: #f4f5f8; border: .08em solid #e3e5ec; border-radius: .3em; padding: .05em .4em; }
.sgd__ok { color: #15803d; font-weight: var(--fw-heavy); border: .1em solid #15803d; border-radius: .3em; text-align: center; font-size: .9em; }
/* Membercore の会員アプリ */
.mcd__page { padding-top: 3.8em; }
.mcd__bar { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider); font-size: .95em; margin-bottom: .9em; }
.mcd__card { background: linear-gradient(135deg, #1b1f3b, #3b49d6); color: var(--on-accent); border-radius: 1em; padding: .8em 1em; margin-bottom: .7em; }
.mcd__card-top { display: flex; justify-content: space-between; font-size: .75em; opacity: .85; }
.mcd__rank { font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider); }
.mcd__qr { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2em; width: 3.2em; margin: .5em 0 .4em; }
.mcd__qr i { display: block; aspect-ratio: 1; background: var(--bg); border-radius: .1em; }
.mcd__qr i:nth-child(2), .mcd__qr i:nth-child(4), .mcd__qr i:nth-child(6), .mcd__qr i:nth-child(8) { opacity: .35; }
.mcd__no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: var(--ls-wider); font-size: .9em; }
.mcd__pts { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5em; font-size: .8em; }
.mcd__pts b { font-size: 1.4em; }
.mcd__section { border: .12em solid #e5e7ee; border-radius: .9em; padding: .6em .9em; margin-bottom: .6em; transition: opacity .4s, transform .4s; }
.mcd__section.is-hidden { opacity: 0; transform: translateY(.6em); }
.mcd__section.is-new { box-shadow: 0 0 0 .25em rgba(91,108,255,.3); }
.mcd__sec-head { display: flex; flex-direction: column; gap: .1em; font-weight: var(--fw-heavy); font-size: .9em; }
.mcd__note { font-weight: var(--fw-normal); font-size: .75em; color: var(--muted-2); }
.mcd__stamps { display: flex; gap: .45em; margin: .6em 0 .2em; }
.mcd__stamps i { width: 2em; height: 2em; border-radius: 50%; border: .12em dashed #c9ccd4; display: block; transition: transform .25s, background .25s, border-color .25s; }
.mcd__stamps i.is-on { background: var(--blue); border: .12em solid var(--blue); box-shadow: inset 0 0 0 .3em var(--bg); }
.mcd__stamps i.is-pop { animation: mcdPop .5s ease-out; }
@keyframes mcdPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.mcd__coupon { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin-top: .5em; border: .1em dashed var(--blue); border-radius: .7em; padding: .6em .8em; background: #f5f6ff; transition: opacity .3s; }
.mcd__coupon.is-used { opacity: .45; }
.mcd__coupon > div { display: flex; flex-direction: column; gap: .15em; }
.mcd__coupon > div b { font-size: .95em; } .mcd__coupon > div span { font-size: .72em; color: var(--muted-2); }
.mcd__use { position: relative; border: 0; border-radius: .6em; background: var(--blue); color: var(--on-accent); font: inherit; font-weight: var(--fw-heavy); font-size: .85em; padding: .5em .9em; transition: transform .12s, background .2s; overflow: hidden; flex: 0 0 auto; }
.mcd__use.is-tap { transform: scale(.94); }
.mcd__use.is-done { background: #9aa0ad; }
.mcd__use-done { display: none; } .mcd__use.is-done .mcd__use-label { display: none; } .mcd__use.is-done .mcd__use-done { display: inline; }
.mcd__scan { position: absolute; inset: 0; background: #0b0c10; color: var(--on-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; opacity: 0; transition: opacity .3s; pointer-events: none; }
.mcd__scan.is-on { opacity: 1; }
.mcd__scan p { font-size: .9em; margin: 0; opacity: .85; }
.mcd__finder { position: relative; width: 11em; height: 11em; border: .18em solid rgba(255,255,255,.9); border-radius: 1.2em; overflow: hidden; }
.mcd__finder i { position: absolute; left: .5em; right: .5em; height: .18em; background: #4ade80; box-shadow: 0 0 .8em #4ade80; animation: mcdScan 1.2s ease-in-out infinite; }
@keyframes mcdScan { 0%, 100% { top: 8%; } 50% { top: 90%; } }
@media (max-width: 860px) {
  /* スマホも avacast と同じく重ねる。端末は上に寄せ、下の文字とはグラデーションで分ける */
  [class*="hero--demo-"] { min-height: 0; }
  [class*="hero--demo-"] .hero__inner { padding-top: 300px; }
  [class*="hero--demo-"] .sgd { bottom: auto; height: 360px; padding-inline: var(--pad); font-size: 6px; }
  [class*="hero--demo-"] .hero__shade {
    background: linear-gradient(180deg, rgba(10,12,20,0) 0, rgba(10,12,20,0) 200px, rgba(10,12,20,.6) 320px, rgba(10,12,20,.88) 420px, rgba(10,12,20,.92) 100%);
  }
  .hero--shot .hero__stage { padding: var(--space-5) var(--pad) 0; }
  .hero-shot { position: relative; right: auto; top: auto; transform: none; width: 100%; }
  .hero-pair { position: relative; inset: auto; padding-bottom: 36px; }
  .hero-pair .hero-shot { right: auto; width: 86%; }
  .klp { top: auto; bottom: 0; right: 0; transform: none; font-size: 6.6px; }
  .sgd { justify-content: center; padding: 0; font-size: 6.6px; align-items: flex-start; padding-top: 2.4em; }
  .sgd__side { display: none; }
  .sgd__phone { transform: none; }
}
.prow__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* avacast デモの見出しバーの長さ（マークアップに style を書かないため） */
.demo__site-hero .w-56 { width: 56%; }
.demo__site-hero .w-38 { width: 38%; }

/* ===== SealGate のデモ: Web（ブラウザ）とスマホの両方でパスキー（.sgd--web / .sgw） =====
   配置: 左上にブラウザ、右下にスマホを重ねる。前半は左上にエージェント、後半は下に監査ログのカード。 */
.sgd--web { justify-content: flex-end; align-items: center; padding: 0 clamp(24px, 5vw, 96px) 0 0; }
.sgw { position: relative; width: 57em; height: 38em; flex: none; }
.sgw__browser { position: absolute; left: 0; top: 3em; width: 44em; height: 30em; border-radius: 1em; background: var(--bg); box-shadow: 0 30px 60px -24px rgba(17,19,24,.28), 0 0 0 .08em rgba(17,19,24,.08); overflow: hidden; }
.sgw__bar { display: flex; align-items: center; gap: .45em; height: 2.6em; padding: 0 1em; background: var(--bg-muted); border-bottom: .08em solid var(--line); }
.sgw__bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--line-strong); }
.sgw__url { margin-left: 1em; padding: 0 1.2em; height: 1.7em; line-height: 1.7em; border-radius: .9em; background: var(--bg); color: var(--muted); font-size: .8em; }
.sgw__screen { position: absolute; top: 2.6em; left: 0; right: 0; bottom: 0; }
.sgw__page { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.sgw__page.is-on { opacity: 1; }
.sgw__nav { display: flex; align-items: center; justify-content: space-between; height: 3.4em; padding: 0 1.6em; border-bottom: .08em solid var(--line-2); }
.sgw__links { display: flex; gap: 1.2em; }
.sgw__links i { width: 3.6em; height: .6em; border-radius: .3em; background: var(--line-2); }
.sgw__login { width: 18em; margin: 2.2em auto 0; }
.sgw__login h4, .sgw__home h4 { margin: 0 0 .8em; font-size: 1.45em; font-weight: var(--fw-heavy); color: var(--ink); }
.sgw__home { position: relative; padding: 1.6em 3.4em 1.6em 2em; }
.sgw__home h4 { margin-bottom: .3em; }
.sgw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-bottom: 1.2em; }
.sgw__toast { top: 1.2em; left: auto; right: 3.4em; }
/* カーソル（座標は JS が決める） */
.sgw__cursor { position: absolute; left: 82%; top: 92%; z-index: 5; width: 1.5em; height: 1.5em; opacity: 0; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%23111318' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), opacity .2s; }
.sgw__cursor.is-on { opacity: 1; }
/* OS の Touch ID ダイアログ */
.sgw__dim { position: absolute; inset: 0; z-index: 6; background: rgba(17,19,24,.25); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sgw__dim.is-on { opacity: 1; }
.sgw__dialog { position: absolute; left: 50%; top: 50%; z-index: 7; width: 18em; padding: 1.6em 1.4em 1.2em; border-radius: 1.1em; background: rgba(250,250,252,.97); box-shadow: 0 24px 60px -12px rgba(17,19,24,.4); text-align: center; opacity: 0; transform: translate(-50%, -44%) scale(.96); transition: opacity .25s, transform .25s; }
.sgw__dialog.is-on { opacity: 1; transform: translate(-50%, -50%); }
.sgw__touch { position: relative; display: flex; justify-content: center; height: 4em; color: #e0457b; }
.sgw__finger, .sgw__ok { position: absolute; top: 0; width: 3.8em; height: 3.8em; transition: opacity .25s, transform .25s; }
.sgw__ok { opacity: 0; transform: scale(.7); color: #16a34a; }
.sgw__touch.is-scan .sgw__finger { animation: sgdScan 1.1s ease-in-out infinite; }
.sgw__touch.is-done .sgw__finger { opacity: 0; }
.sgw__touch.is-done .sgw__ok { opacity: 1; transform: none; }
.sgw__dtitle { margin-top: .8em; font-weight: var(--fw-heavy); color: var(--ink); }
.sgw__dbody { margin-top: .3em; font-size: .8em; color: var(--muted); }
.sgw__dhint { margin-top: .8em; font-size: .75em; color: var(--muted-2); }
.sgw__dbtn { margin-top: 1em; padding: .5em; border-radius: .6em; background: var(--line-2); font-size: .85em; font-weight: var(--fw-bold); color: var(--ink); }
/* スマホ・カードの位置 */
.sgd--web .sgw__browser { z-index: 1; }
.sgd--web .sgd__phone { z-index: 2; }
.sgd--web .sgd__phone { position: absolute; right: 0; bottom: 0; font-size: .74em; transform: none; box-shadow: 0 30px 60px -20px rgba(17,19,24,.35), inset 0 0 0 .18em #2a2d36; }
.sgd--web .sgd__panel { z-index: 8; border: .08em solid var(--line); box-shadow: 0 20px 50px -16px rgba(17,19,24,.3); }
.sgw__agent { left: -3em; right: auto; top: 0; width: 23em; }
.sgw__audit { left: 3em; right: auto; top: auto; bottom: -1em; width: 26em; min-height: 0; }
@media (max-width: 860px) {
  /* スマホ幅: 端末を大きめにし、ブラウザは後ろに回す。小さい文字は読めないので、エージェント・
     監査ログのカードと、認証シートの説明文は出さない */
  .sgd--web { justify-content: center; padding: 1.8em 0 0; }
  .sgw__agent, .sgw__audit { display: none; }
  .sgd--web .sgw { height: 43em; }
  .sgd--web .sgw__browser { top: 5em; }
  .sgd--web .sgd__phone { font-size: 1em; }
  .sgd--web .sgd__sheet-body { display: none; }
}

/* ===== Membercore のデモ（.sgd--web.mcd）: 左に管理画面、右下に会員アプリ ===== */
.mcw__tabs { display: flex; gap: 1.4em; font-size: .8em; color: var(--muted); }
.mcw__tabs .is-on { color: var(--ink); font-weight: var(--fw-heavy); }
.mcw__page { position: absolute; top: 3.4em; left: 0; right: 0; bottom: 0; padding: 1.6em 3.4em 1.6em 2em; opacity: 0; transition: opacity .35s; }
.mcw__page.is-on { opacity: 1; }
.mcw__page h4 { margin: 0 0 .9em; font-size: 1.3em; font-weight: var(--fw-heavy); color: var(--ink); }
.mcw__form { max-width: 28em; margin-bottom: 1.2em; border: .1em solid var(--line); border-radius: .8em; overflow: hidden; }
.mcw__row { display: flex; gap: 1em; padding: .75em 1em; font-size: .85em; border-top: .08em solid var(--line-2); }
.mcw__row:first-child { border-top: 0; }
.mcw__row span { flex: none; width: 6em; color: var(--muted-2); }
.mcw__row b { color: var(--ink); font-weight: var(--fw-bold); }
.mcw__send { width: auto; padding: 0 2.4em; }
.mcw__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-bottom: 1em; }
.mcw__page .sgd__console-sub { margin-top: 0; }
/* スマホに届くプッシュ通知 */
.mcd__push { position: absolute; top: 3em; left: .8em; right: .8em; z-index: 6; display: grid; grid-template-columns: 1fr auto; gap: .2em .6em; padding: .8em 1em; border-radius: 1.1em; background: rgba(250,250,252,.97); box-shadow: 0 10px 30px -8px rgba(17,19,24,.35); opacity: 0; transform: translateY(-140%); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.mcd__push.is-on { opacity: 1; transform: none; }
.mcd__push b { font-size: .72em; letter-spacing: var(--ls-wider); color: var(--muted); }
.mcd__push em { grid-column: 2; grid-row: 1; font-style: normal; font-size: .72em; color: var(--muted-2); }
.mcd__push span { grid-column: 1 / -1; font-size: .9em; font-weight: var(--fw-heavy); color: var(--ink); }

/* ===== Webhook Admin のデモ（.sgd--web.whd）: 管理画面（ダークモード）の窓と、右下に Slack の通知 =====
   ページの地は明るいまま、窓の中だけ製品のダークモードの色（webhookadmin の app.css の dark と同じ値）にする */
.whd {
  --wh-bg: #000000; --wh-surface: #0a0a0b; --wh-surface-2: #161618; --wh-border: #232326;
  --wh-text: #ededef; --wh-muted: #8f8f96; --wh-subtle: #5f5f66;
  --wh-success: #4ade80; --wh-success-bg: #0f2a1a; --wh-warning: #fbbf24; --wh-warning-bg: #2a2008; --wh-danger: #f87171; --wh-danger-bg: #2a1111;
}
.whw { position: relative; width: 54em; height: 38em; flex: none; }
.whd__app { position: absolute; left: 0; top: 0; width: 48em; height: 35em; border-radius: 1em; background: var(--wh-bg); color: var(--wh-text); box-shadow: 0 30px 60px -24px rgba(17,19,24,.45), 0 0 0 .08em rgba(17,19,24,.2); overflow: hidden; font-family: var(--font-ui); }
.whd__bar { display: flex; align-items: center; gap: .45em; height: 2.4em; padding: 0 1em; background: var(--wh-surface-2); border-bottom: .08em solid var(--wh-border); }
.whd__bar i { width: .7em; height: .7em; border-radius: 50%; background: #3a3a40; }
.whd__url { margin-left: 1em; padding: 0 1.2em; height: 1.6em; line-height: 1.6em; border-radius: .8em; background: var(--wh-bg); color: var(--wh-muted); font-size: .75em; }
.whd__body { position: absolute; top: 2.4em; left: 0; right: 0; bottom: 0; display: flex; }
.whd__side { flex: none; width: 10.5em; padding: 1.1em .8em; border-right: .08em solid var(--wh-border); }
.whd__logo { display: block; width: 8.4em; height: auto; margin: 0 0 1.1em .3em; }
.whd__org { display: flex; flex-direction: column; gap: .1em; padding: .5em .6em; margin-bottom: .8em; border: .08em solid var(--wh-border); border-radius: .5em; font-size: .72em; }
.whd__org span { color: var(--wh-muted); }
.whd__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15em; }
.whd__nav li { display: flex; align-items: center; gap: .6em; padding: .45em .6em; border-radius: .45em; font-size: .75em; color: var(--wh-muted); }
.whd__nav li i { width: .9em; height: .9em; border: .12em solid currentColor; border-radius: .25em; opacity: .7; }
.whd__nav li.is-on { background: var(--wh-surface-2); color: var(--wh-text); }
.whd__main { position: relative; flex: 1; min-width: 0; padding: 1.1em 1.4em; }
.whd__head { display: flex; align-items: baseline; gap: .6em; margin-bottom: .7em; }
.whd__title { margin: 0; font-size: 1.5em; font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); color: var(--wh-text); }
.whd__env { font-size: .7em; color: var(--wh-success); background: var(--wh-success-bg); border-radius: .4em; padding: .1em .5em; }
.whd__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin-bottom: .7em; }
.whd__kpis > div { display: flex; flex-direction: column; gap: .25em; padding: .55em .75em; border: .08em solid var(--wh-border); border-radius: .6em; background: var(--wh-surface); }
.whd__kpis span { font-size: .62em; color: var(--wh-muted); letter-spacing: .02em; white-space: nowrap; }
.whd__kpis b { font-size: 1.05em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.whd__kpis em { font-style: normal; }
.whd__kpis small { margin-left: .4em; font-size: .6em; color: var(--wh-success); }
/* 7 日間の配信数のグラフ */
.whd__chart { padding: .6em .8em .5em; margin-bottom: .7em; border: .08em solid var(--wh-border); border-radius: .6em; background: var(--wh-surface); }
.whd__chart-head { display: flex; justify-content: space-between; align-items: center; font-size: .68em; }
.whd__chart-head b { font-weight: var(--fw-bold); }
.whd__chart-head span { display: flex; align-items: center; gap: .45em; color: var(--wh-muted); }
.whd__chart-head i { width: .55em; height: .55em; border-radius: 50%; margin-left: .6em; }
.whd__chart-head i.is-ok { background: var(--wh-success); } .whd__chart-head i.is-ng { background: var(--wh-danger); }
.whd__chart svg { display: block; width: 100%; height: 3.6em; margin-top: .5em; overflow: visible; }
.whd__grid { stroke: var(--wh-border); stroke-width: 1; stroke-dasharray: 3 4; fill: none; vector-effect: non-scaling-stroke; }
.whd__ok-line { stroke: var(--wh-success); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.whd__ng-line { stroke: var(--wh-danger); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.whd__days { display: flex; justify-content: space-between; margin-top: .35em; font-size: .55em; color: var(--wh-subtle); font-variant-numeric: tabular-nums; }
.whd__sub { margin-bottom: .4em; font-size: .7em; font-weight: var(--fw-bold); }
.whd__table { border: .08em solid var(--wh-border); border-radius: .7em; overflow: hidden; }
.whd__rows { min-height: 8.64em; }
.whd__row { display: grid; grid-template-columns: 1.25fr 1.05fr 1.45fr 1fr .7fr; gap: .6em; align-items: center; padding: 0 1.1em; height: 3em; font-size: .72em; border-top: .08em solid var(--wh-border); white-space: nowrap; transition: opacity .35s, transform .35s, background .4s; }
.whd__row > span { overflow: hidden; text-overflow: ellipsis; }
.whd__rows .whd__row { opacity: 0; transform: translateY(-.5em); }
.whd__rows .whd__row.is-on { opacity: 1; transform: none; }
.whd__row--head { height: 2.5em; border-top: 0; background: var(--wh-surface); color: var(--wh-muted); }
.whd__rows .whd__row:first-child { border-top: .08em solid var(--wh-border); }
.whd__ev { font-weight: var(--fw-bold); }
.whd__ep { color: var(--wh-muted); font-family: var(--font-mono); font-size: .92em; }
.whd__t { color: var(--wh-muted); font-variant-numeric: tabular-nums; }
.whd__t.is-wait { color: var(--wh-warning); }
.whd__badge { display: inline-flex; align-items: center; gap: .4em; font-style: normal; padding: .15em .55em; border-radius: .4em; background: var(--wh-surface-2); color: var(--wh-muted); }
.whd__badge i { font-style: normal; font-size: .9em; padding: 0 .35em; border-radius: .3em; background: rgba(255,255,255,.08); }
.whd__badge--ok { background: var(--wh-success-bg); color: var(--wh-success); }
.whd__badge--retry { background: var(--wh-warning-bg); color: var(--wh-warning); }
.whd__row.is-fail { background: rgba(251,191,36,.06); }
.whd__row.is-recovered { animation: whdOk 1.2s ease-out; }
@keyframes whdOk { 0% { background: rgba(74,222,128,.16); } 100% { background: transparent; } }
/* Slack の通知（Slack の画面は明るいので白いカード） */
.whd__slack { position: absolute; right: 0; bottom: 0; z-index: 3; width: 22em; padding: .9em 1em 1em; border-radius: .9em; background: #fff; color: #1d1c1d; border: .08em solid var(--line); box-shadow: 0 24px 50px -14px rgba(17,19,24,.4); opacity: 0; transform: translateX(1.5em); transition: opacity .4s, transform .45s cubic-bezier(.2,.8,.2,1); }
.whd__slack.is-on { opacity: 1; transform: none; }
.whd__slack-ch { font-size: .75em; font-weight: var(--fw-heavy); padding-bottom: .6em; margin-bottom: .7em; border-bottom: .08em solid var(--line-2); }
.whd__slack-msg { display: flex; gap: .7em; align-items: flex-start; }
.whd__slack-icon { flex: none; width: 2.3em; height: 2.3em; border-radius: .5em; }
.whd__slack-from { display: flex; align-items: center; gap: .45em; font-size: .75em; }
.whd__slack-from span { font-size: .75em; font-weight: var(--fw-bold); color: var(--muted-2); background: var(--line-2); border-radius: .25em; padding: 0 .3em; }
.whd__slack-from time { color: var(--muted-2); font-size: .9em; }
.whd__slack-text { margin: .3em 0 0; font-size: .8em; font-weight: var(--fw-bold); color: #b42318; }
.whd__slack-sub { margin: .2em 0 0; font-size: .72em; color: var(--muted); }
/* ヒーロー（PC）: 文字の列は 480px までにし、窓はその右の残りの幅に収まる大きさにする（文字と窓を重ねない） */
@media (min-width: 861px) {
  .hero--demo-webhookadmin .hero__copy { max-width: 480px; }
  .hero--demo-webhookadmin .whd { font-size: min(clamp(11px, 1vw, 15px), calc((100vw - max(0px, (100vw - var(--max)) / 2) - var(--pad) - 504px - clamp(24px, 5vw, 96px)) / 54)); }
}
/* ヒーローでは文字と窓が重ならないので、窓と通知は下の暗いグラデーションより手前に出す（通知の白いカードがくすまないように） */
.hero--demo-webhookadmin .hero__stage { z-index: 2; pointer-events: none; }
.hero--demo-webhookadmin .hero__inner { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .whd__row, .whd__slack { transition: none; }
  .whd__row.is-recovered { animation: none; }
}
@media (max-width: 860px) {
  /* スマホ幅: 窓を横いっぱいにし、通知は窓の下端に重ねる */
  .whd.sgd--web { padding-top: 1.8em; }
  .whw { height: 38em; }
}