/**
 * LP Hero lock — overlap bug fixes only (loads last).
 *
 * 1) Brand icon must not sit under the fixed Terms/Privacy chrome.
 * 2) Demo section must not sit on the hero card bottom.
 * 3) Do not redesign the hero card itself.
 */

/* Keep glass-card corners unclipped */
.hero.hero--final.hero--premium.hero--locked,
.hero.hero--locked[data-lp-hero-locked="true"] {
  overflow: visible !important;
  /*
   * Clear fixed .lp-chrome (header + legal bar).
   * Without this, cascade leaves ~2rem top padding and the brand icon
   * overlaps the Terms · Privacy bar on mobile Safari.
   */
  padding-top: calc(5.75rem + env(safe-area-inset-top, 0px)) !important;
  /* Keep original compact hero bottom — do not stretch the card */
  padding-bottom: 0.25rem !important;
}

/* Next section only — start just below the finished hero card */
.lp-hero-demo.lp-hero-demo-below {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
  padding-top: 1.75rem !important;
}

/*
 * Hero headline — keep each line truly centered with equal side air.
 * Large nowrap type was filling the card edge-to-edge and reading left-heavy.
 */
.hero.hero--locked[data-lp-hero-locked="true"] .hero__title--value {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  width: 100%;
}

.hero.hero--locked[data-lp-hero-locked="true"] .hero__title--value .hero__line {
  display: block;
  width: fit-content !important;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  /*
   * 見出しがブランド名より小さかった（実測 20.16px 対 28.8px）。まだ誰も知らない名前が一番大きく、
   * 読み手の得になる一文がその下に小さく置かれている状態だった。上限を上げて順番を入れ替える。
   *
   * nowrap のままなので、1行の文字数がそのまま上限を決める。7文字なら 354px 幅で約42pxまで載る
   * （7 × 42 = 294px < カード内寸 ~300px）。だから見出しは短い2行に分けてある — 上限だけ上げて
   * 長い行を残すと、収まらずに縮んで元の大きさに戻る。
   */
  font-size: clamp(1.75rem, 8.4vw, 2.6rem) !important;
  letter-spacing: -0.03em;
  line-height: 1.18;
}

/*
 * 文字の大小＝情報の優先順位。ロゴ画像がすぐ上にあるので、名乗りは大きさで主張しなくてよい。
 * ヒーロー内だけに絞る（最終CTAのブランド表記は別の役目なので触らない）。
 */
.hero.hero--locked[data-lp-hero-locked="true"] .lp-brand__name {
  font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important;
  letter-spacing: 0.02em;
}

/*
 * 具体的な問いかけ（何回バトルした？何時間配信した？誰が一番応援してくれた？）が 12.96px で、
 * 本文として小さすぎた。ここは読ませる一文なので 15px 以上にする。
 */
.hero.hero--locked[data-lp-hero-locked="true"] .hero__sub--value {
  /* px で下限を切る — rem だとページの基準サイズ次第で 14.1px まで落ちた（実測）。 */
  font-size: clamp(15px, 4vw, 17px) !important;
  line-height: 1.65;
}

/*
 * 日本語は単語の区切りが無いので、放っておくと「誰が一 / 番応援してくれた？」のように語の途中で折り返す。
 * 意味のかたまりを inline-block にしておくと、かたまりの内側では折れず、かたまりの間だけで折り返す。
 * （実際にこの折れ方が出ていたので直した。CSS の実験的な指定には頼らず、どのブラウザでも同じ結果になる形にする）
 */
.hero.hero--locked[data-lp-hero-locked="true"] .hero__phrase {
  display: inline-block;
}

/*
 * ロゴが黒い箱に見えていた。素材は 1024×1024 の不透明PNGで、画素の94%が暗色・透明部分ゼロ（実測）。
 * つまり黒い正方形の中に小さな明るいマークがある形で、これを黒い背景の上に置くと輪郭が消え、
 * 27px では中のマークも潰れる。素材はブランドのものなので差し替えない — 見え方だけ直す。
 * 薄いリングと内側の余白で「バッジ」として成立させ、暗い背景から切り離す。
 */
/*
 * ロゴは正方形のマークではなく、横長のワードマークだった。
 *
 * 実測（icons/liverstats-logo.png, 1024×1024）:
 *   文字の範囲 x 70〜962 / y 420〜576  →  縦横比 5.72 : 1
 *   素材に対する占有 横 87.1% / 縦 15.2%、余白は 上41.0% 下43.8% 左6.8% 右6.1%
 *
 * これを正方形の枠に入れていたので、縦の85%が余白になり、27px 表示では文字が完全に潰れていた。
 * 前に付けたリング付きバッジも、ワードマークに対しては間違った額縁だった（どちらも取り消す）。
 *
 * 素材は差し替えない。枠を横長にして、余白を切り落として文字だけを見せる。
 * 数値の出どころ: 拡大率 = 100 / 87.1 = 114.8%、左オフセット = -(6.84 × 1.148)% = -7.85%、
 * 上オフセット = -(41.02 × 1.148) / (1 / 5.72) = -269.3%（枠の高さに対する割合）。
 */
.lp-brand__icon,
.lp-logo__icon {
  /* バッジの装飾を取り消す — ワードマークに額縁は付けない */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  /* 文字の縦横比で枠を作り、はみ出す余白を隠す */
  aspect-ratio: 5.72 / 1;
  height: auto !important;
  overflow: hidden;
  position: relative;
  display: block;
  box-sizing: border-box;
}

.lp-brand__icon img,
.lp-logo__icon img {
  position: absolute;
  width: 114.8%;
  height: auto;
  max-width: none;
  left: -7.85%;
  top: -269.3%;
  border-radius: 0;
  display: block;
}

/* ヘッダーのロゴ: 文字が読める幅を確保する */
.lp-logo--header .lp-logo__icon {
  width: 116px !important;
}

/* ワードマークが読めるようになったので、隣の文字は同じ名前の二度書きになる。
 * 読み上げと検索のために要素は残し、目に見える重複だけ消す。 */
.lp-logo--header .lp-logo__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ヒーローのブランド枠: ワードマークを大きく見せ、下の4行が説明を受け持つ */
.hero.hero--locked[data-lp-hero-locked="true"] .lp-brand__icon {
  width: 168px !important;
}

/* ワードマーク自体が「LiverStats」と読めるので、真下の同じ文字は消す（要素は残す） */
.hero.hero--locked[data-lp-hero-locked="true"] .lp-brand__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ヒーロー内のCTA。最初の画面に押せるものを置く。 */
.hero.hero--locked[data-lp-hero-locked="true"] .hero__cta--in-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
  width: 100%;
}

.hero.hero--locked[data-lp-hero-locked="true"] .hero__cta--in-card .btn {
  /* 指で押せる大きさを明示（他のCSSが min-height を auto に戻すため id/属性スコープで勝たせる） */
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  font-size: clamp(1rem, 4.2vw, 1.1rem);
}

.hero.hero--locked[data-lp-hero-locked="true"] .hero__cta--in-card .hero__cta-hint {
  font-size: clamp(0.72rem, 3vw, 0.8rem);
  opacity: 0.72;
  margin: 0;
}