/* ============================================================================
   ファイル名: app/assets/stylesheets/landing.css
   最終更新日: 2026-05-03

   【リファクタリング基準】※コメント行は行数カウントから除外
     1. 500 行未満:  ✅ 完璧
     2. 800 行未満:  🟢 問題なし
     3. 1200 行未満: ⚠️ 注意喚起・要検討
     4. 1200 行以上: 🚨 リファクタ必須
   現在の行数: 約 880 行（コメント除く） / 総行数 1019 行（2026-05-03 実測）
   判定: ⚠️ 注意喚起（800-1200 行域）

   【ジュニアエンジニア向け概要】
   ランディングページ（未ログインユーザー向けトップページ）の共通レイアウト・
   基本スタイルを定義する中核ファイル。各セクション固有のスタイルは Phase 1+2 で
   別ファイルに分離済みで、本ファイルが担当するのは LP 全体に共通するもの:
     - セクション1: CSS 変数定義（:root）
     - セクション2: 背景効果・ベースレイアウト
     - セクション3: ヘッダー（固定ナビゲーション）
     - セクション3-b: 言語セレクター（カスタムドロップダウン）
     - セクション3-c: ボタンスタイル（primary / secondary / ghost / large）
     - セクション4: セクション共通ベーススタイル
     - セクション14: 共通レスポンシブ（ヘッダー・ハンバーガー・CTAボタン用 @media）
     - セクション15: 言語セレクター（レガシー）
     - Demo Videos Section（操作デモ動画グリッド・focus-expand アニメーション）
   デザインリファレンス: lecrans.com（エレガンス・余白・モーション）

   【Phase 1+2 分離状況】（2026-05-03 実装）
   読込順序は app/views/layouts/landing.html.erb の stylesheet_link_tag 参照。
     1. landing_animations.css  : ✅（先頭ロード / .animate-on-scroll を後続が上書き可能）
     2. landing.css             : ✅（本ファイル）
     3. landing_hero.css        : ✅
     4. landing_sections.css    : ✅（problem / solution + レスポンシブ）
     5. landing_features.css    : ✅（4 カテゴリフロー）
     6. landing_pricing.css     : ✅（カルーセル + 機能マトリクス + ツールチップ + レスポンシブ）
     7. landing_philosophy.css  : ✅
     8. landing_cta.css         : ✅
     9. landing_mobile_nav.css  : ✅
     10. landing_footer.css     : ✅（X リンク含む）
   各セクション固有のレスポンシブ（@media）は各分離ファイル末尾に閉じ込め済み。

   【⚠️ リファクタリング改善方針案】（2026-05-03 コメント追記）
   本ファイルは 800 行を超えており「注意喚起域」です。さらなる削減が必要な場合、
   以下の単位で分離を検討してください:
     - landing_header.css       : セクション3 + 3-b（固定ヘッダー + 言語セレクタ、約 200 行）
     - landing_buttons.css      : セクション3-c（ボタン共通、約 70 行）
     - landing_demo_videos.css  : Demo Videos Section（約 250 行）
     - landing_lang_legacy.css  : セクション15（言語セレクタレガシー、約 100 行）
   ただし、CSS 変数定義（:root）と背景効果（.landing-body::before 等）は LP 全体の
   ベースとなるため本ファイルに残すのが望ましい。分離時は以下に注意:
     - CSS 詳細度の順序依存あり。分離後の読込順序で表示崩れが発生しないよう
       landing.html.erb の stylesheet_link_tag 順序に注意する。
     - data-turbo-track="reload" は layout 共通アセットでのみ使用可（CLAUDE.md ルール）。
     - 分離後は spec/config/landing_assets_spec.rb の REQUIRED_CSS_FILES に追加する。

   【変更履歴】（最新2世代まで保持。古い履歴は git log を参照）
     2026-04-23: LP デモ動画を 3→6 本に拡張 + .landing-demo__row 行分離構造化
                 （focus 時の繰り上がり問題を解消）
     2026-05-03: Phase 1+2 リファクタリング実施
                 - 既存分離ファイル 5 本（animations / hero / sections / pricing / footer）を配線
                 - 新規分離ファイル 4 本（features / philosophy / cta / mobile_nav）を作成
                 - landing_pricing.css の drift（pillインジケーター仕様 + cta margin-top）を併合
                 - 各セクション固有の @media を共通レスポンシブブロックから各分離ファイル末尾へ移動
                 - 行数: 2947 → 1019 行（-1928 行 / -65%）
                 - 配線テスト: spec/config/landing_assets_spec.rb で 10 ファイル全件検証

   【関連ファイル】
     - app/views/layouts/landing.html.erb: ランディングページレイアウト
     - app/views/landing/sections/_hero.html.erb: ヒーローセクションパーシャル
     - public/javascripts/landing_page.js: ランディングページJS（カルーセル・スクロール）
     - spec/config/landing_assets_spec.rb: アセット存在確認テスト
============================================================================ */

/* ----------------------------------------
   セクション1: CSS変数定義
   ランディングページ専用のカスタムプロパティ。
   カラー・タイポグラフィ・スペーシング・アニメーション速度を定義。
   ---------------------------------------- */
:root {
  /* Colors */
  --landing-bg: #0a0a0f;
  --landing-bg-secondary: #12121a;
  --landing-text: var(--text-primary);
  --landing-text-muted: #9ca3af;
  --landing-accent: #6366f1;
  --landing-accent-hover: #818cf8;
  --landing-gradient-start: #6366f1;
  --landing-gradient-end: #a855f7;
  --landing-card-bg: rgba(255, 255, 255, 0.03);
  --landing-card-border: var(--border-secondary);
  --landing-positive: #22c55e;
  --landing-negative: #ef4444;

  /* Gold accent colors */
  --landing-gold: #d4af37;
  --landing-gold-light: #f4d03f;
  --landing-gold-dark: #b8960c;
  --landing-gold-glow: rgba(212, 175, 55, 0.3);

  /* Typography */
  --landing-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --landing-font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Spacing */
  --landing-section-padding: 120px;
  --landing-container-max: 1280px;
  --landing-container-padding: 24px;

  /* Animation */
  --landing-transition-fast: 0.2s ease;
  --landing-transition-base: 0.3s ease;
  --landing-transition-slow: 0.5s ease;
}

/* ----------------------------------------
   セクション2: 背景効果・ベースレイアウト
   ランディングページの基本レイアウトとグラデーションオーブ効果。
   紫(#6366f1)とゴールド(#d4af37)の放射状グラデーションが
   浮遊アニメーションで背景を彩る。Tailwindリセットも含む。
   ---------------------------------------- */
.landing-body {
  min-height: 100dvh;
  background: var(--landing-bg);
  color: var(--landing-text);
  font-family: var(--landing-font-body);
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Subtle background effects */
.landing-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 100% 100% at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 90% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse 80% 80% at 80% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(244, 208, 63, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* 紫オーブ（大型装飾球体）: 右上から浮遊するアニメーション
   z-index:0 で背景レイヤーに配置、float-orb で20秒周期の浮遊 */
.landing-body::after {
  content: '';
  position: fixed;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  border-radius: 50%;
  animation: float-orb 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* 金オーブ（大型装飾球体）: 左下から浮遊するアニメーション
   z-index:0 で背景レイヤーに配置、float-orb-gold で25秒周期の浮遊 */
.landing-main::before {
  content: '';
  position: fixed;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(244, 208, 63, 0.03) 40%, transparent 70%);
  bottom: 10%;
  left: -100px;
  border-radius: 50%;
  animation: float-orb-gold 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes float-orb-gold {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25% { transform: translate(80px, -50px) scale(1.2); opacity: 0.8; }
  50% { transform: translate(50px, -100px) scale(0.9); opacity: 0.5; }
  75% { transform: translate(100px, -30px) scale(1.1); opacity: 0.7; }
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, 100px) scale(1.1); }
  50% { transform: translate(-100px, 50px) scale(0.9); }
  75% { transform: translate(-30px, 150px) scale(1.05); }
}

/* Hero particle float animations (moved from inline style in landing.html.erb) */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  25% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
  50% { transform: translateY(-10px) translateX(-10px); opacity: 0.5; }
  75% { transform: translateY(-30px) translateX(5px); opacity: 0.7; }
}

@keyframes float-gold {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; }
  20% { transform: translateY(-15px) translateX(15px) scale(1.2); opacity: 0.9; }
  40% { transform: translateY(-25px) translateX(-5px) scale(0.9); opacity: 0.6; }
  60% { transform: translateY(-10px) translateX(-15px) scale(1.1); opacity: 0.8; }
  80% { transform: translateY(-20px) translateX(10px) scale(1); opacity: 0.5; }
}

.landing-main {
  position: relative;
  z-index: 1;
}

/* Reset Tailwind conflicts - Use !important to override */
.landing-body,
.landing-body *,
.landing-body *::before,
.landing-body *::after {
  box-sizing: border-box !important;
}

.landing-body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.landing-body a {
  color: inherit;
  text-decoration: none;
}

.landing-body h1:not([class]),
.landing-body h2:not([class]),
.landing-body h3:not([class]),
.landing-body h4:not([class]),
.landing-body h5:not([class]),
.landing-body h6:not([class]) {
  margin: 0;
}

.landing-body p:not([class]) {
  margin: 0;
}

.landing-body ul,
.landing-body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-body button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.landing-main {
  padding-top: 80px; /* Header height offset */
}

/* ----------------------------------------
   セクション3: ヘッダー（固定ナビゲーション）
   スクロール時にglassmorphic背景（blur(20px)）が表示される。
   ロゴ・ナビリンク・言語切替・CTAボタンを含む。
   z-index: 1000 で全要素より前面に配置。
   ---------------------------------------- */
.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: background var(--landing-transition-base),
              backdrop-filter var(--landing-transition-base);
}

.landing-header--scrolled {
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--landing-card-border);
}

.landing-header__container {
  max-width: var(--landing-container-max);
  margin: 0 auto;
  padding: 0 var(--landing-container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-header__logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--landing-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-header__logo-icon {
  width: 32px;
  height: 32px;
}

.landing-header__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.landing-header__logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--landing-text);
}

.landing-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.landing-header__link,
.landing-header__nav-link {
  color: var(--landing-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--landing-transition-fast);
}

.landing-header__link:hover,
.landing-header__nav-link:hover {
  color: var(--landing-text);
}

.landing-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ----------------------------------------
   セクション3-b: 言語セレクター（カスタムドロップダウン）
   国旗アイコン付きの言語切替UI。glassmorphic背景のメニュー。
   .is-open クラスで表示/非表示を切替（opacity + transform）。
   ---------------------------------------- */
.landing-lang {
  position: relative;
}

.landing-lang__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--landing-text-primary);
  cursor: pointer;
  transition: all var(--landing-transition-fast);
}

.landing-lang__trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.landing-lang__flag {
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.landing-lang__code {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.landing-lang__name {
  font-weight: 500;
}

.landing-lang__arrow {
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.landing-lang.is-open .landing-lang__arrow {
  transform: rotate(180deg);
}

.landing-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.landing-lang.is-open .landing-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.landing-lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary);
}

.landing-lang__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.landing-lang__item--active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--text-primary);
}

.landing-lang__item--active::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: var(--landing-accent-primary);
  border-radius: 50%;
}

.landing-lang__item-code {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  min-width: 24px;
}

.landing-lang__item-name {
  font-weight: 500;
  font-size: 0.9rem;
}

/* ----------------------------------------
   セクション3-c: ボタンスタイル
   primary: 紫グラデーション背景 + ホバー浮遊。
   secondary: 透明背景 + ボーダー。ghost: テキストリンク風。
   large: CTA用の大きめパディング。
   ---------------------------------------- */
.landing-btn,
.landing-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--landing-transition-fast);
  cursor: pointer;
  border: none;
}

.landing-btn--primary,
.landing-header__btn--primary {
  background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  color: white;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.landing-btn--primary:hover,
.landing-header__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(99, 102, 241, 0.4);
}

.landing-btn--secondary,
.landing-header__btn--secondary {
  background: transparent;
  color: var(--landing-text);
  border: 1px solid var(--landing-card-border);
}

.landing-btn--secondary:hover,
.landing-header__btn--secondary:hover {
  background: var(--landing-card-bg);
  border-color: var(--landing-text-muted);
}

.landing-btn--large {
  padding: 16px 32px;
  font-size: 1rem;
}

.landing-btn--ghost {
  background: transparent;
  color: var(--landing-text-muted);
  padding: 8px 16px;
}

.landing-btn--ghost:hover {
  color: var(--landing-text);
}

.landing-btn__icon {
  width: 20px;
  height: 20px;
}

/* ----------------------------------------
   セクション4: セクション共通ベーススタイル
   全セクション共通のパディング・コンテナ幅・タイトル・サブタイトル。
   タイトルはグラデーションテキスト（background-clip: text）。
   コンテナ最大幅: var(--landing-container-max) = 1280px。
   ---------------------------------------- */
.landing-section {
  padding: var(--landing-section-padding) 0;
  position: relative;
}

.landing-section__container {
  max-width: var(--landing-container-max);
  margin: 0 auto;
  padding: 0 var(--landing-container-padding);
}

.landing-section__eyebrow {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--landing-accent);
  margin-bottom: 12px;
}

.landing-section__eyebrow--dot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.landing-section__eyebrow--dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--landing-accent);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.landing-section__title {
  font-family: var(--landing-font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--landing-text), var(--landing-text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-section__title-sub {
  display: block;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--landing-text-muted);
  -webkit-text-fill-color: var(--landing-text-muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.landing-section__subtitle {
  text-align: center;
  color: var(--landing-text-muted);
  font-size: 1.15rem;
  margin: 0 0 72px;
}

/* セクション5: ヒーロー → app/assets/stylesheets/landing_hero.css に分離 */

/* セクション6+7: 問題提起 + ソリューション → app/assets/stylesheets/landing_sections.css に分離 */

/* セクション8: 機能紹介 → app/assets/stylesheets/landing_features.css に分離 */

/* セクション9: 料金プラン（カルーセル本体・カード・CTA）→ app/assets/stylesheets/landing_pricing.css に分離 */

/* セクション10: 開発哲学 → app/assets/stylesheets/landing_philosophy.css に分離 */

/* セクション11: CTA → app/assets/stylesheets/landing_cta.css に分離 */

/* セクション12: フッター → app/assets/stylesheets/landing_footer.css に分離 */

/* セクション13: アニメーション定義 → app/assets/stylesheets/landing_animations.css に分離 */

/* ----------------------------------------
   セクション14: レスポンシブ対応（共通: ヘッダー・ハンバーガー・言語セレクタ・CTAボタン共通）
   各セクション固有のレスポンシブは各分離ファイル末尾に移動済（2026-05-03）。
     - hero / cta            → landing_hero.css
     - problem / solution    → landing_sections.css
     - features              → landing_features.css
     - pricing カルーセル    → landing_pricing.css
     - footer flexbox        → landing_footer.css
     - philosophy            → landing_philosophy.css
   ---------------------------------------- */
@media (max-width: 768px) {
  :root {
    --landing-section-padding: 80px;
  }

  .landing-header__nav {
    display: none;
  }

  .landing-header__actions {
    gap: 8px;
  }

  .landing-header__btn--secondary,
  .landing-header__btn--primary {
    display: none;
  }

  .landing-hamburger {
    display: flex;
  }

  .landing-lang__trigger {
    padding: 6px 10px;
  }

  .landing-lang__name {
    display: none;
  }

  .landing-lang__menu {
    min-width: 180px;
  }

  .landing-header__btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  :root {
    --landing-section-padding: 60px;
    --landing-container-padding: 16px;
  }

  .landing-btn--large {
    width: 100%;
  }
}

/* ----------------------------------------
   セクション15: 言語セレクター（レガシー）
   セクション3-bの.landing-lang とは別の旧実装。
   互換性のため残存。
   ---------------------------------------- */
.landing-language-selector {
  position: relative;
}

.landing-language-selector__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--landing-card-bg);
  border: 1px solid var(--landing-card-border);
  border-radius: 8px;
  color: var(--landing-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--landing-transition-fast);
}

.landing-language-selector__btn:hover {
  border-color: var(--landing-text-muted);
  color: var(--landing-text);
}

.landing-language-selector__icon {
  width: 16px;
  height: 16px;
}

/* モバイルナビゲーション → app/assets/stylesheets/landing_mobile_nav.css に分離 */

/* セクション9-c+9-d: 機能マトリクス表 + 情報アイコン/ツールチップ → app/assets/stylesheets/landing_pricing.css に分離 */

/* ============================================================================
   Demo Videos Section（操作デモ動画セクション）
   2026-04-21 追加: 3本のショート動画を3カラムで並列再生して操作感を伝える
   関連: app/views/landing/sections/_demo_videos.html.erb
   ============================================================================ */
.landing-demo {
  background: linear-gradient(180deg, var(--landing-bg) 0%, var(--landing-bg-secondary) 100%);
}

/* 6-card layout: outer container stacks 2 rows vertically, each row is an
   independent flex container holding 3 cards. Rows are deliberately
   separate flex contexts so the focus-expansion animation stays row-local
   without flex-basis tricks — a focused card in row 1 cannot cause row-2
   cards to reflow upward into row 1 (which happened with a single
   flex-wrap grid, because basis-0 non-focused cards allowed the wrap
   algorithm to fit all 6 into one row). */
.landing-demo__grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-demo__row {
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.landing-demo__card {
  flex: 1 1 0;
  min-width: 0; /* allow flex item to shrink below content size */
  background: var(--landing-card-bg);
  border: 1px solid var(--landing-card-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.45s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Keyboard focus ring — matches hover border colour so focused state is visible. */
.landing-demo__card:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.8);
  outline-offset: 3px;
}

/* Hover lift — only on devices that actually have hover + a fine pointer.
   On touch devices this selector is inert so we don't mislead users with
   animations that never trigger on tap. */
@media (hover: hover) and (pointer: fine) {
  .landing-demo__grid:not(:has(.is-focused)) .landing-demo__card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 20px 40px -20px rgba(99, 102, 241, 0.35);
  }
}

/* Touch feedback: brief press-down state so taps feel responsive. */
@media (hover: none) and (pointer: coarse) {
  .landing-demo__card:active {
    transform: scale(0.985);
    opacity: 0.92;
  }
}

/* Click-to-focus: focused card grows, its row-mates shrink. Shrink is
   scoped to the same .landing-demo__row, so the other row stays
   untouched. flex-basis 0 on all 3 cards in the focused row means the
   3 cards share row width purely by flex-grow ratio: 2.4 / (2.4+0.5+0.5)
   ≈ 70% for the focused card, 15% each for its siblings. */
.landing-demo__card.is-focused {
  flex: 2.4 1 0;
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 24px 48px -16px rgba(99, 102, 241, 0.45);
}

.landing-demo__row:has(.is-focused) .landing-demo__card:not(.is-focused) {
  flex: 0.5 1 0;
  opacity: 0.85;
}

.landing-demo__video-wrap {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}

.landing-demo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-demo__step {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.95);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  z-index: 1;
}

.landing-demo__body {
  padding: 20px 22px 24px;
}

.landing-demo__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--landing-text);
  /* Long-language safety (German / French description titles can run over
     two lines). Clamp at 2 so card heights stay uniform. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing-demo__desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--landing-text-muted);
  line-height: 1.55;
  /* Same long-language safety as the title, with a little more room. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Responsive breakpoints — aligned with the LP-wide 768px / 480px standard
   (landing.css uses these breakpoints for every other section; see
   .landing-features / .landing-pricing media queries).
   ---------------------------------------------------------------------------- */

/* Tablet landscape / narrow desktop (769-1024px) — 2026-04-23 追加:
   cards stay 3-per-row but card width shrinks to ~265-306px. Long-language
   descriptions (de-DE, fr-FR, es-ES) push past the desktop 3-line clamp and
   get truncated mid-sentence. Allow one extra line (4 instead of 3) only in
   this band so the tail of translated copy stays visible on tablet-class
   devices (iPad portrait ≈ 768, iPad landscape ≈ 1024, Surface = 912). */
@media (min-width: 769px) and (max-width: 1024px) {
  .landing-demo__desc {
    -webkit-line-clamp: 4;
  }
}

/* Tablet and below: stack the cards vertically. Each row turns into its
   own column stack, and the two rows flow into a single 6-card vertical
   list because the outer grid is already flex-direction: column. */
@media (max-width: 768px) {
  .landing-demo__grid {
    max-width: 560px;
    margin: 0 auto;
    gap: 20px;
  }
  .landing-demo__row {
    flex-direction: column;
    gap: 20px;
  }
  .landing-demo__card {
    flex: 1 1 auto;
  }
  /* In column layout the focus-grow effect would fight the column, so we
     disable it and keep all cards at a natural height. */
  .landing-demo__card.is-focused,
  .landing-demo__row:has(.is-focused) .landing-demo__card:not(.is-focused) {
    flex: 1 1 auto;
  }
  .landing-demo__row:has(.is-focused) .landing-demo__card:not(.is-focused) {
    opacity: 1;
  }
}

/* Phone: tighter gaps, slightly smaller radii to better fit narrow viewports. */
@media (max-width: 480px) {
  .landing-demo__grid {
    max-width: 420px;
    gap: 16px;
  }
  .landing-demo__card {
    border-radius: 12px;
  }
  .landing-demo__body {
    padding: 16px 18px 18px;
  }
}

/* Accessibility: honour prefers-reduced-motion by killing the flex/transform
   transitions. The click-to-focus layout still works — it just snaps rather
   than animates. */
@media (prefers-reduced-motion: reduce) {
  .landing-demo__card,
  .landing-demo__grid:not(:has(.is-focused)) .landing-demo__card:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================================
   レスポンシブ補強（2026-04-24 追加）
   480px 以下で動画カード description の line-clamp を 3 → 4 行に拡張。
   多言語短縮版でも de-DE / fr-FR / hi-IN は表音文字で 200〜250 文字あるため、
   小画面で末尾切断を避けるためのマージン確保。
   ============================================================================ */
@media (max-width: 480px) {
  .landing-demo__desc {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}