/* ============================================================
   marketing.css — マーケサイト専用 ライト基調レイヤー (インク・ミニマル).
   スコープは .mkt 配下のみ. 公開 LP (lp.css / .lp-page) には一切影響しない.
   ⚠️ .mkt の付かない裸の .lp-page / .lp-section / --color-* セレクタを
      絶対に書かないこと (原則B = 公開LPユーザーカラー不侵食).
   SSOT: docs/design/2026-06-01-design-language.md
   2026-06-06: dark (near-black ink-950) → light に反転 (MKT-LIGHT-D03).
     token 名 (--ink-*) は据え置き、値だけ意味反転で marketing.css 全体は無修正で動く.
     エディタはダーク継続 (globals.css の ink-* は dark のまま不変).
   ============================================================ */
.mkt {
  /* 2026-06-12 Apple TTP リニューアル: token 名据え置き・値のみ warm washi + 朱赤に置換。
     値の意味反転で marketing.css 全体および pricing/gallery/company 等の既存マーケ page が
     無修正で新パレットに追従する (2026-06-06 light 反転と同手法)。
     SSOT: docs/superpowers/specs/2026-06-12-marketing-top-apple-ttp-redesign-design.md
     出典(色): tokin-powapo-design skill README (washi/sumi/朱赤)。 */
  --ink-950: #faf7f0; /* page bg = warm washi (純白でない) */
  --ink-900: #ffffff; /* card / section surface (white) */
  --ink-800: #f2ede2; /* hover / 交互 surface (沈み面) */
  --ink-700: #d9d2c4; /* hairline / border */
  --ink-600: #cbc3b2; /* subdued border (washi 系に寄せる) */
  --ink-500: #6e6e73; /* muted text = Apple グレー */
  --ink-400: #8a8a8f; /* very muted */
  --ink-300: #3a342f; /* body text (warm 暗灰、AA 達成) */
  --ink-200: #51493f; /* 中間 muted (欠番補完: white上 ≈8:1) */
  --ink-100: #2a2520; /* secondary heading */
  --ink-0: #1a1614; /* heading text = sumi warm-black (AAA) */
  --accent: #c02010; /* 朱赤 (主 CTA 塗り・点アクセントのみ) */
  --accent-strong: #8a1408; /* pressed / 強調 (より暗い朱赤) */
  --accent-soft: #c0201014; /* background tint (8% alpha) */
  --accent-hover: #e23a22; /* CTA hover */
  /* 2026-06-12 (TASK-22): --color-primary を .mkt スコープで朱赤に固定 (SSOT)。
     blog / tools 等が使う var(--color-primary, <fallback>) は .mkt では未定義のため
     旧 Apple ブルーの fallback に発色していた。ここで accent に束ねることで全マーケ
     page が朱赤に追従し、各所のフォールバック値を撤去できる。
     公開 LP (.lp-page) は別スコープで自前の --color-primary を持つため不侵食。 */
  --color-primary: var(--accent);
  /* 2026-06-13 BUG-TTP-TOKENS-01: tokens.css(:root) の旧 PoC パレットが marketing 面に
     漏れる地雷を .mkt スコープで封じる。tokens.css は公開LP配信に同梱(原則B)で触れないため、
     ここで朱赤/washi に束ねて上書きする。
     - --color-accent: 旧 #e67e22(オレンジ) → 朱赤
     - --color-primary-light: 旧 #eef2ff(青みグレー、glow 系の地雷) → washi 沈み面
     - --color-bg: 旧 #ffffff(純白) → warm washi */
  --color-accent: var(--accent);
  --color-primary-light: var(--ink-800);
  --color-bg: var(--ink-950);
  --positive: #16a34a;
  --danger: #dc2626;
  /* Apple は見出しも本文もサンセリフ。明朝は全廃。 */
  --mkt-font-display: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --mkt-font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  /* warm washi 面用に影を上品に淡く (sumi シャドウ) */
  --mkt-shadow-md: 0 1px 2px rgba(26, 22, 20, 0.04), 0 4px 10px -2px rgba(26, 22, 20, 0.08);
  --mkt-shadow-lg: 0 2px 4px rgba(26, 22, 20, 0.04), 0 12px 28px -8px rgba(26, 22, 20, 0.12);
  /* 2026-06-06 MKT-LIGHT-A06: 角丸 3 種 SSOT (design-language §6)。
     カード = 12px、ボタン = 8px、pill = 999px。全マーケサイトでこの 3 種に統一。 */
  --mkt-radius-card: 12px;
  --mkt-radius-btn: 8px;
  --mkt-radius-pill: 999px;
  /* 2026-06-06 D-CROSS-07: コンテナ幅 SSOT (2 種に統一).
     lg = 1140px (3 カラム以上のグリッド), md = 768px (本文中心の縦長 page).
     全マーケサイトで個別宣言を撤去しこの 2 種を参照する。 */
  --container-lg: 1140px;
  --container-md: 768px;

  background-color: var(--ink-950);
  color: var(--ink-0);
  font-family: var(--mkt-font-sans);
  color-scheme: light;
}

/* タイポ階層 (Apple TTP: 見出しも本文もサンセリフ、weight で階層を作る) */
.mkt h1,
.mkt h2,
.mkt h3 {
  font-family: var(--mkt-font-display);
  font-weight: 600;
  color: var(--ink-0);
}
/* 2026-06-06 D-GAL-03 / D-CROSS-05: マーケサイト h1 SSOT.
   gallery / pricing / company / roadmap / legal の個別 font-size 宣言を撤去し
   ここに集約。Hero (.mkt h1.hero-h1 / .mkt .hero__headline) のみ別途上書き可。 */
.mkt h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.mkt h2 {
  letter-spacing: -0.005em;
}
.mkt p {
  color: var(--ink-300);
  line-height: 1.7;
}

/* セクション (ゆとり余白 + 交互 surface) */
.mkt-section {
  padding-block: var(--space-16, 4rem);
  background-color: var(--ink-950);
}
.mkt-section--surface {
  background-color: var(--ink-900);
}
@media (min-width: 768px) {
  .mkt-section {
    padding-block: var(--space-24, 6rem);
  }
}

/* コンテナ */
.mkt-container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--space-4, 1rem);
}

/* カード (A06: radius SSOT = --mkt-radius-card 12px に統一) */
.mkt-card {
  background-color: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--mkt-radius-card);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--mkt-shadow-md);
}

/* ボタン (primary = 朱赤塗 + 白文字, Apple TTP 反転版)
   A06: radius SSOT = --mkt-radius-btn 8px に統一 */
.mkt-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--mkt-radius-btn);
  padding: 0.875rem 1.75rem;
  font-weight: 600;
  min-height: 44px;
  text-decoration: none;
  transition:
    background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-btn-primary:hover,
.mkt-btn-primary:focus-visible {
  background-color: var(--accent-strong);
  box-shadow: 0 6px 18px -4px rgba(192, 32, 16, 0.32);
}
/* UX-P29: スマホ全幅 CTA modifier */
.mkt-btn-primary--block {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
@media (max-width: 480px) {
  .mkt-btn-primary--block {
    max-width: 100%;
  }
}
.mkt-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--ink-0);
  border: 1px solid var(--accent);
  border-radius: var(--mkt-radius-btn);
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  text-decoration: none;
  transition:
    background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-btn-secondary:hover,
.mkt-btn-secondary:focus-visible {
  background-color: var(--accent-soft);
  box-shadow: 0 6px 18px -4px rgba(192, 32, 16, 0.24);
}

/* リンク / フォーカスリング (朱赤 accent, a11y 必須).
   ボタン類 (.mkt-btn-*, .hero__cta, .cta__button) は除外 — これらは塗りボタン等
   独自の前景色を持つため汎用リンク色を被せない (塗りボタン上の accent 文字は AA 未達)。
   /pricing の plan CTA / 最終 CTA も同様に除外 (Task 15, 2026-06-02)。 */
/* 汎用リンク色 (a) は朱赤 accent。ただしボタン類は除外 (前景色をボタン定義で確定するため)。
   2026-06-06 MKT-LIGHT-A03 / 2026-06-12 Apple TTP: 「accent 塗 + 白文字」CTA 全部を exclusion に追加。 */
.mkt
  a:not(.mkt-btn-primary):not(.mkt-btn-secondary):not(.hero__cta):not(.cta__button):not(
    .plan__cta
  ):not(.pricing-final-cta__cta):not(.pricing-free-banner__cta):not(.company-cta-button):not(
    .cta-primary
  ):not(.cta-secondary):not(.marketing-nav__cta):not(.apple-cta--primary):not(.apple-link):not(
    .marketing-footer a
  ) {
  color: var(--accent);
}
.mkt
  a:not(.mkt-btn-primary):not(.mkt-btn-secondary):not(.pricing-free-banner__cta):not(
    .company-cta-button
  ):not(.cta-primary):not(.marketing-nav__cta):not(.apple-cta--primary):not(.apple-link):not(
    .marketing-footer a
  ):hover {
  color: var(--accent-strong);
}

/* 2026-06-12 Apple TTP: フッターは dark 背景 (#0d0f12)。上の汎用朱赤リンクルールを
   :not(.marketing-footer a) で footer から除外 (朱赤 #c02010 on dark = 3.15:1 AA 未達回避)。
   footer リンクは下記で dark 背景上 AA を満たす muted 色に固定。
   astro scoped style は :where() で詳細度 0 になり負けるため CSS 側で固定する。 */
.mkt .marketing-footer a {
  color: #aab0ba; /* dark #0d0f12 上 ≈ 6.3:1 (AA 余裕)。旧 footer-text-muted #878d96 を底上げ */
}
.mkt .marketing-footer a:hover {
  color: #fafafa; /* hover は washi 白に (旧真鍮 #c9a86a を Apple TTP で廃止) */
}
/* 2026-06-12 Apple TTP: footer 内の地の文 (tagline/copyright 等) は color 未指定だと
   marketing.css のグローバル本文色 --ink-300 (#3a342f = light 背景用) を継承し、dark footer
   背景上で 1.56:1 になり a11y FAIL。dark footer 専用の明るい muted 色を高詳細度で固定する。
   astro scoped style は :where() で詳細度 0 になり負けるため CSS 側 (.mkt scope) で固定。 */
.mkt .marketing-footer p,
.mkt .marketing-footer__tagline,
.mkt .marketing-footer__copyright {
  color: #aab0ba; /* dark #0d0f12 上 ≈ 6.3:1 (AA 余裕) */
}
.mkt :focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ink-950),
    0 0 0 4px var(--accent);
}

/* 共通セクション補助 (新セクションで使う) */
.mkt-grid-3 {
  display: grid;
  gap: var(--space-6, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mkt-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mkt-stat {
  font-family: var(--mkt-font-display);
  font-size: var(--fs-2xl, 1.75rem);
  color: var(--ink-0);
}
.mkt-footnote {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-500);
  margin-top: var(--space-4, 1rem);
}

/* Task 13: 新セクション (N1/N3/N5/N6/N8) 用 */
/* h2 の下にゆとり + センタリング */
.mkt-section h2 {
  text-align: center;
  margin-bottom: var(--space-12, 3rem);
}
/* DESIGN-05: 見出し直下に accent ライン。h2 を「段落見出し」から
   「セクションの顔」へ。視覚的重量を上げ、プロのサービス感を出す。 */
.mkt-section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0.75rem auto 0;
  background: var(--accent);
  border-radius: 2px;
}
.mkt-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-3, 0.75rem);
}
/* 使い方ステップ (N5) */
.mkt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mkt-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  /* DESIGN-06: デスクトップでステップ間を accent グラデで繋ぎ「流れ」を可視化。
     番号丸の高さに合わせ、最後のステップ以外の右側にコネクターを出す。 */
  .mkt-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: calc(var(--space-6, 1.5rem) / -2);
    width: var(--space-6, 1.5rem);
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: translateX(-50%);
  }
}
.mkt-steps li {
  position: relative;
}
.mkt-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--ink-950);
  font-family: var(--mkt-font-display);
  font-weight: 600;
  margin-bottom: var(--space-3, 0.75rem);
}
/* 料金の価値訴求 (N6) / 安心材料 (N8) はセンタリング */
.mkt-value-prop,
.mkt-assurance {
  text-align: center;
}
.mkt-value-prop p {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-6, 1.5rem);
}
/* UX-P29: N8 安心材料直下の全幅 CTA ラッパー */
.mkt-assurance__cta {
  margin-top: var(--space-8, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.mkt-assurance__microcopy {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin: 0;
}

/* ============================================================
   Puck セクション (.lp-page 内) は lp.css default (light) に委譲.
   2026-06-06 MKT-LIGHT-D02: dark override を撤去し lp.css の light 色をそのまま使う.
   公開 LP と同一 light スタイルで描画されるため、white カード白浮きは BUG-098 修正で解消済.
   交互 surface (旧 .mkt .lp-page .lp-section:nth-of-type(even) ink-900) も廃止 = lp.css default.
   ============================================================ */

/* ============================================================
   Hero (hero.css 本体は無改修、.mkt スコープ上書きのみ。公開 LP の Hero は不変)。
   2026-06-06 MKT-LIGHT-D05: light overlay + accent 朱赤塗 CTA + 装飾 (DESIGN-01/02/17 + THEME-A) は維持.
   StaticHero (astro 先行描画) と PresetRender の両 Hero に届く。
   詳細度: .mkt .hero--fullbleed .hero__overlay = (0,3,0) で hero.css の
      .hero--fullbleed .hero__overlay (0,2,0) を上書きできる。
   ============================================================ */
/* fullbleed 背景画像上で light に見せるため白寄りのグラデで読みやすさ確保。
   下端ほど薄白く重ね、見出しを ink-0 (near-black) で読ませる。
   D-TOP-10 (2026-06-06): 上端 alpha を 0.4 → 0.6 に上げて見出しのコントラストを確保。 */
.mkt .hero--fullbleed .hero__overlay {
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0.85) 100%);
}
/* light fullbleed の base color: 全要素 ink-0 で読ませる。 */
.mkt .hero--fullbleed {
  color: var(--ink-0);
}
.mkt .hero--fullbleed .hero__sub {
  color: var(--ink-0);
}
/* DESIGN-01: Hero H1 のビジュアルインパクト強化。
   clamp で 375px (2.75rem=44px) → vw 連動 → 1200px 以上で 5.5rem=88px。
   letter-spacing -0.03em で凝縮感、line-height 1.1 で迫力。
   hero.css の .hero--fullbleed .hero__headline { font-size: var(--fs-4xl)/--fs-6xl } を
   .mkt スコープで上書き (詳細度 .mkt .hero--fullbleed .hero__headline = 0,3,0 > 0,2,0)。
   375px で fs-4xl(2.25rem) → 2.75rem になるため既存 375px 対応を強化。 */
.mkt .hero__headline {
  font-family: var(--mkt-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-0);
}
.mkt .hero--fullbleed .hero__headline {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
}
.mkt .hero__category {
  color: var(--accent);
}
.mkt .hero__sub {
  color: var(--ink-300);
}
/* DESIGN-17: 安心バッジを「埋もれた dark on dark」から脱却。
   accent-soft 背景 + accent 寄りの枠 + ink-0 文字でコントラスト確保、
   check アイコンを accent 朱赤にして Hero の accent と呼応させる。 */
.mkt .hero__badge {
  background-color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink-0);
}
.mkt .hero__badge-icon svg {
  stroke: var(--accent);
}
/* DESIGN-02: 白 CTA ボタンに shine アニメーション。
   lp.css の @keyframes cta-shine (公開LP用) とは別 keyframe 名 mkt-shine で原則B遵守。
   gradient overlay を background-image で重ね background-size:200% で position 移動。
   overflow:hidden は hero.css の .hero__cta に未設定のため .mkt スコープで追加。
   --secondary はアウトライン薄色ボタンのため除外 (:not(.hero__cta--secondary))。 */
@keyframes mkt-shine {
  0% {
    background-position: 200% center;
  }
  40% {
    background-position: -100% center;
  }
  100% {
    background-position: -100% center;
  }
}
.mkt .hero__cta:not(.hero__cta--secondary) {
  /* 2026-06-06 light 反転 / 2026-06-12 Apple TTP: accent 朱赤塗 + 白文字。
     shine の highlight は白光で上品な艶を出す。 */
  background-color: var(--accent);
  background-image: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  color: #ffffff;
  overflow: hidden;
  animation: mkt-shine 3s ease-in-out infinite;
}
.mkt .hero__cta:not(.hero__cta--secondary):hover,
.mkt .hero__cta:not(.hero__cta--secondary):focus-visible {
  background-color: var(--accent-strong);
  box-shadow: 0 6px 18px -4px rgba(192, 32, 16, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .mkt .hero__cta:not(.hero__cta--secondary) {
    animation: none;
    background-image: none;
  }
}

/* ------------------------------------------------------------------
   THEME-A (2026-06-03 UX 監査 RICE 18.0): Hero の 2 CTA レイアウト.
   primary「無料で試す」(白ボタン) + secondary「登録せずに試す」(アウトライン).
   未ログインで `/editor?preset=` を直接試せる導線 = お手軽さの最大訴求.
   375px では縦積み (折り返し)、タップ域は .hero__cta の min-height 52px を継承.
   ------------------------------------------------------------------ */
.mkt .hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.mkt .hero__cta--secondary {
  /* cta__button の gradient/白を打ち消し、朱赤アウトラインで「第2の選択肢」を表現 */
  background-color: transparent;
  background-image: none;
  color: var(--ink-0);
  border: 1px solid var(--accent);
}
.mkt .hero__cta--secondary:hover,
.mkt .hero__cta--secondary:focus-visible {
  background-color: var(--accent-soft);
  box-shadow: 0 6px 18px -4px rgba(192, 32, 16, 0.24);
}
@media (max-width: 480px) {
  .mkt .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .mkt .hero__cta-group .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ */
/* TicketExhaustedModal (BL-007 Q3 3 択モーダル)               */
/* ------------------------------------------------------------ */
.ticket-exhausted-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: calc(100% - 32px);
  border-radius: 12px;
}
.ticket-exhausted-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.ticket-exhausted-modal__body {
  background: var(--ink-900, #fff);
  color: var(--ink-0, #1a1a1a);
  padding: 24px;
  border-radius: 12px;
  box-shadow: var(--mkt-shadow-lg);
}
.ticket-exhausted-modal__heading {
  font-size: 1.25rem;
  margin: 0 0 12px;
  font-weight: 700;
}
.ticket-exhausted-modal__desc {
  margin: 0 0 20px;
  color: var(--ink-300, #555);
  line-height: 1.6;
  font-size: 0.9375rem;
}
.ticket-exhausted-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-exhausted-modal__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ticket-exhausted-modal__btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ticket-exhausted-modal__btn--primary {
  background: var(--accent);
  color: var(--ink-950, #1a1a1a);
  border-color: var(--accent);
}
.ticket-exhausted-modal__btn--primary:not(:disabled):hover {
  background: var(--accent-strong, #8a6a32);
  border-color: var(--accent-strong, #8a6a32);
}
.ticket-exhausted-modal__btn--secondary {
  background: transparent;
  color: var(--ink-0);
  border-color: var(--ink-300, #ccc);
}
.ticket-exhausted-modal__btn--secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ticket-exhausted-modal__btn--tertiary {
  background: transparent;
  color: var(--ink-300, #555);
  border-color: transparent;
  text-decoration: underline;
}
.ticket-exhausted-modal__btn--tertiary:hover {
  color: var(--ink-0);
}

/* ------------------------------------------------------------ */
/* ExitIntentPopup (BL-GROWTH-015)                              */
/*  - desktop 専用 (mobile では React 側で出さない)            */
/*  - backdrop fixed full screen + dialog 中央配置             */
/*  - mkt-shadow-lg / accent / ink-* token のみ利用            */
/* ------------------------------------------------------------ */
.exit-intent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
/* ライトテーマ用 fallback を washi 実値に修正 (旧 dark モード fallback を撤去)。
   .mkt スコープ外のため --ink-* token が未定義になる地雷を実値で封じる。 */
.exit-intent-dialog {
  position: relative;
  background: #ffffff;
  color: #1a1614;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.75rem);
  border-radius: 16px;
  border: 1px solid #d9d2c4;
  box-shadow: 0 8px 40px rgba(26, 22, 20, 0.12), 0 2px 8px rgba(26, 22, 20, 0.06);
  max-width: 420px;
  width: 100%;
  outline: none;
}
.exit-intent-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: #6e6e73;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.exit-intent-close:hover,
.exit-intent-close:focus-visible {
  color: #1a1614;
  background: #f2ede2;
  outline: none;
}
.exit-intent-headline {
  font-size: clamp(1.125rem, 3vw, 1.25rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.4;
  color: #1a1614;
}
.exit-intent-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #3a342f;
  margin: 0 0 1.25rem;
}
.exit-intent-cta {
  display: block;
  text-align: center;
  background: #c02010;
  color: #ffffff;
  padding: 0.75rem 1.125rem;
  border-radius: 980px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.15s;
}
.exit-intent-cta:hover,
.exit-intent-cta:focus-visible {
  background: #8a1408;
  color: #ffffff;
  outline: none;
}
.exit-intent-secondary {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  background: transparent;
  color: #6e6e73;
  border: none;
  padding: 0.625rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
}
.exit-intent-secondary:hover,
.exit-intent-secondary:focus-visible {
  color: #1a1614;
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .exit-intent-cta {
    transition: none;
  }
}