/* Base styles ----------------------------------------------------------------------*/
* {
    box-sizing: border-box;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background-color: transparent;
  color: #333;
  font-family: "Hiragino Mincho ProN", "游明朝", YuMincho, "MS PMincho", serif;
  overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}

ul{
  margin-top: 0;
}

/* Layout wrappers ----------------------------------------------------------------------*/
.pc-container {
 position: fixed;  /* ←高さ0のブロックを消す */
  inset: 0;
  pointer-events: none;
  z-index: 0;
  height: 100%; /* 必要なら */
}

.sp-container {
  width: 100%;
  margin: 0 auto;
  margin-top: 0; 
  padding-top: 0; 
}

@media (min-width: 620px) {
    .pc-container {
        display: block;
    }

    .pc-right, .pc-left{
        position: fixed;
        top: 0;
        bottom: 0;
        width: calc((100vw - 620px)/2);
        pointer-events: none;
        z-index: 5;
    }

    .pc-left {
        left: 0;
        background: url(images/0_head_header/side1.png)center / cover no-repeat;
    }

    .pc-right {
        right: 0;
        background: url(images/0_head_header/side2.png)center / cover no-repeat;
        }

    .sp-container {
        position: relative;
        z-index: 1;
        max-width: 620px;
        margin-inline: auto;
        background: transparent;
    }
}


/* Header ------------------------------------------------------------------------------*/
.site-header{
  position: sticky; 
  top: 0; 
  z-index: 1000;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
  background: #0b1e37; color: #fff;
  padding-top: 0;
  display: flow-root;   /* ← margin合体を確実に止める */
}

.site-header h1{ margin:0; }
#titleh1 {
   margin-top: 0;
}

.site-header__inner{
  height: 80px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
}

/* 左ロゴ：帯高にフィット。幅は上限を設けてはみ出し防止 */
.site-header__brand{
  flex: 0 1 auto; height: 100%; display: flex; min-width: 0;
}
.site-header__brand img{
  height: 100%; 
  width: auto;
  max-width: clamp(56px, 22vw, 180px);  /* 端末が狭い時に広がりすぎない */
  display: block;
}

/* 中央タイトル：必要以上に広がらないよう両脇に少しだけ余白 */
.site-header__title{
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
  margin: 0;
}
.site-header__title img{
  height: 38px;               /* ここを上げ下げで大きさ調整 */
  max-width: 100%; width: auto; display: block;
}

/* 右CTA：帯高にフィット。幅の上限を付けて切れ防止 */
.site-header__cta{
  flex: 0 0 auto; height: 100%; display: flex; min-width: 0;
}
.site-header__cta img{
  height: 100%; width: auto; display: block;
  max-width: clamp(120px, 36vw, 280px); /* 画面右での切れを防ぐ上限 */
}

/* —— タブレット以上 —— */
@media (min-width: 768px){
  .site-header__inner{ height: 92px; padding: 0; }
  .site-header__title img{ height: 46px; }
  .site-header__brand img{ max-width: 200px; }
  .site-header__cta img{  max-width: 320px; }
}

/* —— PC：内側だけセンター寄せ（背景は全面） —— */
@media (min-width: 1024px){
  .site-header__inner{ max-width: 1160px; padding: 0; }
}
/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px){
  .site-header__inner{
    max-width: 1160px;          /* 内側のみセンター寄せ */
    margin-inline: auto;
    padding: 0;
  }
}

/* hero section ------------------------------------------------------------------------------*/

.hero { background: transparent; }

.hero_media{
  position: relative;
  width: 100%;
  /*aspect-ratio: 907 / 1043;        ← hero.png の実寸比に合わせて必ず設定 */
  overflow: hidden;               /* はみ出し防止 */
  margin: 0 auto;                      /* 余白で高さが潰れないように */
}

.hero_header{
  width: 100%;
  height: auto;
}

.hero_bg{
  grid-area: stack;
  width: 100%;
  height: auto;
  object-fit: cover;              /* 画像をつぶさない */
  display: block;
}

.hero_title-wrapper {
  position: absolute;
  left: 48%;
  top: 65%;
  transform: translate(-76%, -63%);
  width: 60%;
}

.hero_title{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 0;
}  


.hero_cta {
  display: block;
  width: 100%;
  max-width: 560px;      /* 必要に応じて微調整 */
  margin: 0 auto;    /* 中央寄せ */
}

.hero_cta_box{
  background-color: #333;
}

.hero_cta-img {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px;
}

@media (min-width: 620px) {
  .hero_cta { max-width: 100%; }
  .hero_cta-img { width: 450px; margin: 0 auto;}
}

/* CTA直下の安心テキストボックス */
.hero_assure {
  padding: 12px 16px;
  background: url("images/1_hero/assure.png")center / cover no-repeat;
  text-align: center;
  line-height: 1.55;
  margin: 0 auto;
}

.hero_assure-text{
  margin: 0px auto 0;
  padding: 30px 16px;
}

.assure-title{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 30px;
}

.assure-text{
  width: 100%;
  margin: 0 auto;
}

/* deadline section ------------------------------------------------------------------------------*/
.deadline {
  background: url(images/2_deadline/deadline-background.png);
  padding: 28px 0;
}

.deadline__inner {
  background: #fff;
  max-width: 960px;
  margin: 0 10px;
  padding: 0;
  border-radius: 12px;
  border: 4px solid #b8b5b5;
}

.deadline__title-96{
  margin: 0 auto;
}

.deadline__title-96 img {
  display: block;
  margin: 0 auto 10px;
  width: 90%;
  height: auto;
}

.deadline__subtitle{
  margin: 20px 10px;
}

/* 時計盤の上にカードを重ねるステージ */
.deadline__stage {
  position: relative;
  margin: 18px auto 0;
  width: 100%;
  max-width: 820px;
  overflow: hidden;
  background: url(images/2_deadline/bg-clock.png)center / cover no-repeat;
}

/* 前面の3カード（画像） */
.deadline__cards {
  position: relative;
  z-index: 1;                  /* 時計盤の前面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
}
.deadline__card {
  margin: 0;
}
.deadline__card img {
  display: block;
  width: min(620px, 86vw);     /* モバイルで画面に収める */
  height: auto;
}

.deadline__arrow {
  margin: 0 auto 12px;
  text-align: center;
}
.deadline__arrow img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* CTA（画像ボタン） */
.deadline__cta {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 4px auto 5px;
}
.deadline__cta img {
  display: block;
  width: 100%;
  height: auto;
}

.deadline__footer {
  text-align: center;
  display: block; 
}

/* --------- レスポンシブ微調整 --------- */
@media (min-width: 768px) {
  .deadline { padding: 36px 0; }
  .deadline__cards { gap: 16px; }
  .deadline__card img { width: min(640px, 78vw); }
  .deadline__cta { max-width: 480px; }
}

@media (min-width: 1040px) {
  /* デスクトップでカードをわずかにスタッガー（必要なければ削除可） */
  .deadline__card--48h { transform: translateY(-2px); }
  .deadline__card--72h { transform: translateY(0); }
  .deadline__card--96h { transform: translateY(2px); }
}

/* reliability ------------------------------------------------------------------------------*/
.reliability {
  position: relative;
  isolation: isolate;
  padding: 0 auto;
  overflow: hidden;
  background-color: #000000;
}

.reliability__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.reliability__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
}

.reliability__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 auto;
}

.reliability__head {
  text-align: center;
  margin: 0;
  filter: brightness(0.55);
}

.reliability__title {
  position: absolute;
  z-index: 1;                /* 重ね順 前面 */
  pointer-events: none;      /* 画像上での操作不要なら */
  top: 7%;
  left: -10%;
  width: 100%;
}

.reliability__title img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 白い大きなパネル（中にブロック群を積む） */
.reliability__panel {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 18px 14px;
  border: 4px solid #b8b5b5;
}

/* パネル内の共通画像ブロック */
.reliability__panel figure {
  margin: 0;
  padding-bottom: 20px;
}
.reliability__panel img {
  display: block;
  width: 100%;
  height: auto;
}

.reliability__subtext img{
  width: 80%;
  margin: 0 auto;
}

/* 説明ブロック（見出し画像など） */
.reliability__block { margin: 8px 0; }

/* 写真（例：ライト・猫・飼い主） */
.reliability__photo { margin: 10px 0; }
.reliability__photo img { border-radius: 10px; }

/* 吹き出し画像（角を少し丸く） */
.reliability__bubble { margin: 8px 0; }
.reliability__bubble img { border-radius: 8px; }

/* ツール3枚（スマホ1列→タブ2列→PC3列） */
.reliability__toolset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 6px;
}
.reliability__tool { margin: 0; }
.reliability__tool img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* CTA（画像ボタン） */
.reliability__cta {
  display: block;
  width: 95%;
  max-width: 460px;
  margin: 20px auto;
}
.reliability__cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- レスポンシブ調整 ---------- */
@media (min-width: 600px) {
  .reliability { padding: 34px 0 40px; }
  .reliability__panel { padding: 22px 18px; border-radius: 14px; }
  .reliability__toolset { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (min-width: 960px) {
  .reliability { padding: 40px 0 46px; }
  .reliability__panel { padding: 26px 22px; }
  .reliability__toolset { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* review ------------------------------------------------------------------------------*/
.review {
  position: relative;
  padding: 0;
  background:#0f0f0f;
}

.review__inner {
  max-width: 980px;
  margin: 0 auto;
}

.review__head{
  position: relative;
}

.review__title-bg{
  margin: 0 auto;
}

.review__title-bg img {
  display: block;
  width: 100%;
  height: auto;
}

.review__title{
  position: absolute;
  inset: 0;                  /* 親(header)と同じサイズ */
  display: flex;
  align-items: center;       /* 縦中央 */
  justify-content: center;   /* 横中央 */
  z-index: 1;                /* 重ね順 前面 */
  pointer-events: none;      /* 画像上での操作不要なら */
  top: 30px
}

.review__title img{
  display: block;
  width: 100%;
  height: auto;
}


/* レビュー一覧：各アイテムの間隔 */
.review__list {
  padding-bottom: 20px;
}

.review__photo{
  width: 95%;
  margin: 0 auto 20px;
}

.review__item {
  margin-bottom: 30px;
 }

.review__item--3{
margin: 0;
}

.review__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.review__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ---------- レスポンシブ調整 ---------- */
@media (min-width: 900px) {
  .review { padding: 36px 0; }
  .review__list { gap: 36px; }

  /* PCは左右2カラム、2件目を反転でリズムを付ける */
  .review__item {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .review__item--2 .review__photo { order: 2; }
  .review__item--2 .review__card  { order: 1; }

  .review__photo img { border-radius: 12px; }
  .review__card  img { border-radius: 10px; }
}

/* decision ------------------------------------------------------------------------------*/
.decision {
  padding: 0 0 28px;
  background: #0f0f0f;
}

/* タイトル画像 */
.decision__head { 
  position: relative;
  margin: 0 0 14px; 
}

.decision__title img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.decision__title{
  margin: 0 auto;
}
.decision__titletext{
  position: absolute;
  z-index: 1;                /* 重ね順 前面 */
  pointer-events: none;      /* 画像上での操作不要なら */
  top: 80px;
  margin: 0 auto;
}

.decision__inner {
  box-sizing: border-box;        /* 枠線/パディングも幅に含める */
  max-width: 980px;              /* 中央寄せの幅制限 */
  margin: 0 10px;                /* 左右中央 */
  padding: 0;               /* そのまま可 */
  border: 4px solid #b8b5b5;
  border-radius: 12px;
  background: #fff;
}

/* アクセシビリティ用：視覚的に隠す */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 本文パネル（白い箱） */
.decision__panel {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 18px 16px;
  text-align: center;
}

.decision__subttl {
  font-weight: 800;
  font-size: clamp(18px, 3.8vw, 22px);
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: #c0392b;            /* 強調赤 */
}

.decision__para {
  width: min(760px, 92vw);
  margin: 8px auto 0;
  line-height: 1.8;
  color: #333;
  font-size: clamp(14px, 3.4vw, 16px);
}

.u-em { color: #d35400; font-weight: 700; }   /* 強調（オレンジ） */

.decision__urgency {
  margin: 14px auto 8px;
  font-weight: 800;
  font-size: clamp(16px, 4vw, 20px);
  letter-spacing: .02em;
  line-height: 1.6;
  width: min(760px, 92vw);
}

.u-underline {
  text-decoration: underline;
  text-decoration-thickness: .14em;     /* しっかり太い下線 */
  text-underline-offset: .18em;
  text-decoration-color: #e53935;       /* 赤下線 */
}

.decision__callout {
  width: min(520px, 92vw);
  margin: 10px auto;
  padding: 10px 12px;
  border: 1px solid #f0c35b;            /* ゴールド系 */
  background: #fff8e1;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.6;
  color: #6b4e16;
}

/* 金の下矢印＋猫＋メッセージ（画像1枚） */
.decision__message1 {
  margin: 10px auto 45px;
  text-align: center;
}

.decision__message2 {
  margin: 10px 10px 45px;
  text-align: center;
}

.decision__message3 {
  margin: 10px 10px 0;
  text-align: center;
}

.decision__message4 {
  margin: 0px 5px;
  text-align: center;
}

.decision__message5 {
  margin: 45px 10px 0;
  text-align: center;
}

.decision__message6 {
  margin: 45px auto 10px;
  text-align: center;
  width: 85%;
}

.decision__message img {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* キー文言 */
.decision__key {
  margin: 12px auto 4px;
  font-size: clamp(18px, 4.2vw, 22px);
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: .02em;
  color: #222;
}
.u-strong { color: #c62828; }

/* CTA（画像ボタン） */
.decision__cta {
  display: block;
  width: 95%;
  max-width: 460px;
  margin: 24px auto 8px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
.decision__cta img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- レスポンシブ ---------- */
@media (min-width: 600px) {
  .decision { padding: 34px 0 40px; }
  .decision__panel { padding: 22px 20px; border-radius: 14px; }
}

@media (min-width: 960px) {
  .decision { padding: 40px 0 48px; }
  .decision__panel { padding: 26px 24px; }
  .decision__title img { border-radius: 14px; }
  .decision__cta { max-width: 520px; }
}

/* flow ------------------------------------------------------------------------------*/
.flow {
  position: relative;
  padding: 0;
  isolation: isolate;
  background: url(images/6_flow/flow-background.png);
}

.flow__head-bg{
  width: 100%;
  margin: 0 auto;
}

.flow__title{
  position: absolute;
  z-index: 1;                /* 重ね順 前面 */
  pointer-events: none;      /* 画像上での操作不要なら */
  top: 37%;
  left: 17%;
  margin: 0 auto;
  width: 70%;
}

.flow__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* セクション上下の背景（装飾用 全幅） */
.flow__bg-head,
.flow__bg-foot {
  width: 100%;
}
.flow__bg-head img,
.flow__bg-foot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 見出し（背景つき画像） */
.flow__head { 
  margin: 0 0 14px; 
  position: relative;
}

.flow__title img {
  display: block;
  width: min(860px, 94vw);
  height: auto;
  margin: 0 auto;
}

/* フロー一覧 */
.flow__list {
  list-style: none;
  margin: 0;
  padding: 0 0 30px;
  display: grid;
  gap: 16px;
}
.flow__item { margin: 0; }

/* 各ステップのカード（画像1枚） */
.flow__card {
  margin: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.12))
          drop-shadow(0 2px 6px rgba(0,0,0,.06));
}
.flow__card img {
  display: block;
  width: min(860px, 94vw);
  height: auto;
  margin: 0 auto 20px;
}

/* ---------- レスポンシブ ---------- */
@media (min-width: 600px) {
  .flow { padding: 34px 0; }
  .flow__list { gap: 20px; }
  .flow__title img,
  .flow__card img { border-radius: 14px; }
}

@media (min-width: 960px) {
  .flow { padding: 40px 0 46px; }
  .flow__list { gap: 22px; }
  .flow__title img,
  .flow__card img { width: min(900px, 86vw); }
}



/* FAQ ------------------------------------------------------------------------------*/

.faq-section {
  position: relative;
  padding: 0;
  isolation: isolate;
  background: url("images/7_faq/faq-pic.png") no-repeat center/cover;
}

.faq__head{
  margin: 0;
  position: relative;
}

.faq__head-bg{
  width: 100%;
  margin: 0 auto;
}

.faq__title{
  position: absolute;
  z-index: 1;                /* 重ね順 前面 */
  pointer-events: none;      /* 画像上での操作不要なら */
  top: 45%;
  left: 9%;
  margin: 0 auto;
  width: 80%;
}

.faq__title img {
  display: block;
  width: min(860px, 94vw);
  height: auto;
  margin: 0 auto;
}

/* -------------------------
   QAリスト（白カード）
   ------------------------- */
.faq-list {
  margin: 0 16px 45px;
  padding: 18px;
  list-style: none;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid #b8b5b5;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);}

.faq-item {
  background: transparent;
}

/* アイテム間の仕切り線 */
.faq-item + .faq-item .faq-q {
  border-top: 1px solid #e2e2e2;
}

/* -------------------------
   質問ボタン
   ------------------------- */
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 18px 32px 18px 0;
  font-size: 18px;
  color: #000000;
  line-height: 1.2;
  position: relative;
  cursor: pointer;
}

.faq-q::after {
  content: "▼";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #444;
}

.faq-q[aria-expanded="true"]::after {
  content: "▲";
}

.faq-q::first-letter {
  font-size: 1.2em;
  color: inherit;   /* 元の色を引き継ぐ */
}

/* -------------------------
   回答部分
   ------------------------- */
.faq-a {
  padding: 0 0 16px;
  color: #000000;
}

.faq-a p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-family: "Hiragino Mincho ProN", serif;  /* 回答テキストを明朝に */
}

.faq-a p::first-letter {
  font-size: 1.2em;    /* やや大きく */
  font-weight: bold;
  color: #d32f2f;      /* 赤 (#c00 や #e53935 でもOK) */
  margin-right: 4px;   /* 「A.」と本文の間に少し余白 */
}

/* -------------------------
   CTA部分（変更なし）
   ------------------------- */
.faq-cta {
  margin-top: 24px;
  padding: 16px 16px;
  background: #000000;
}

.faq-cta__btn {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.faq-cta__btn-img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------
   レスポンシブ（620px〜）
   ------------------------- */
@media (min-width: 620px) {
  .faq-section {
    padding: 36px 0 0;
  }


  .faq-list {
    margin: 0 32px 45px;
    padding: 22px;
    border-radius: 18px;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.25),
      0 0 0 6px #2f2f2f;
  }

  .faq-q {
    padding: 20px 36px 20px 0;
    font-size: 17px;
  }

  .faq-cta {
    padding: 20px 20px;
  }

  .faq-cta__btn {
    max-width: 450px;
  }
}

/* Footer ------------------------------------------------------------------------------*/
.site-footer {
    position: relative;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.footer-bg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;}

.footer-links {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  margin: 0 0 40px;
  top: 67%;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus {
    text-decoration: underline;
}

/* A11y utility: visually hidden (screen reader only) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------------------
   Reveal on Scroll (fade-in up)
   - Targets: hero_title, deadline__title-96, reliability__title, review__title,
              decision__titletext, flow__title, faq__title
   - Uses transform translateY only for reveal layer to avoid layout shifts
------------------------------------------------------------------------------ */
.hero_title,
.deadline__title-96,
.reliability__title,
.review__title,
.decision__titletext,
.flow__title,
.faq__title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .48s ease-out, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: .12s;
  will-change: transform, opacity;
}

.hero_title.is-visible,
.deadline__title-96.is-visible,
.reliability__title.is-visible,
.review__title.is-visible,
.decision__titletext.is-visible,
.flow__title.is-visible,
.faq__title.is-visible {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  .hero_title,
  .deadline__title-96,
  .reliability__title,
  .review__title,
  .decision__titletext,
  .flow__title,
  .faq__title {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------------------
   Reveal on Scroll (fade-in down from top)
   - Targets: deadline cards, reliability blocks/photos/bubble, decision messages,
              flow items 1-5
   - Uses individual transform property `translate` to avoid overriding existing transforms
------------------------------------------------------------------------------ */
.deadline__card.deadline__card--48h,
.deadline__card.deadline__card--72h,
.deadline__card.deadline__card--96h,
.reliability__block.reliability__block--analysis,
.reliability__photo.reliability__photo--light,
.reliability__bubble.reliability__bubble--msg1,
.reliability__block.reliability__block--tools,
.reliability__block.reliability__block--result,
.decision__message1,
.decision__message2,
.decision__message5,
.flow__item.flow__item--1,
.flow__item.flow__item--2,
.flow__item.flow__item--3,
.flow__item.flow__item--4,
.flow__item.flow__item--5 {
  opacity: 0;
  translate: 0 -12px;
  transition: opacity .48s ease-out, translate .6s cubic-bezier(.22,1,.36,1);
  transition-delay: .08s;
  will-change: opacity, translate;
}

.deadline__card.deadline__card--48h.is-visible,
.deadline__card.deadline__card--72h.is-visible,
.deadline__card.deadline__card--96h.is-visible,
.reliability__block.reliability__block--analysis.is-visible,
.reliability__photo.reliability__photo--light.is-visible,
.reliability__bubble.reliability__bubble--msg1.is-visible,
.reliability__block.reliability__block--tools.is-visible,
.reliability__block.reliability__block--result.is-visible,
.decision__message1.is-visible,
.decision__message2.is-visible,
.decision__message5.is-visible,
.flow__item.flow__item--1.is-visible,
.flow__item.flow__item--2.is-visible,
.flow__item.flow__item--3.is-visible,
.flow__item.flow__item--4.is-visible,
.flow__item.flow__item--5.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .deadline__card.deadline__card--48h,
  .deadline__card.deadline__card--72h,
  .deadline__card.deadline__card--96h,
  .reliability__block.reliability__block--analysis,
  .reliability__photo.reliability__photo--light,
  .reliability__bubble.reliability__bubble--msg1,
  .reliability__block.reliability__block--tools,
  .reliability__block.reliability__block--result,
  .decision__message1,
  .decision__message2,
  .decision__message5,
  .flow__item.flow__item--1,
  .flow__item.flow__item--2,
  .flow__item.flow__item--3,
  .flow__item.flow__item--4,
  .flow__item.flow__item--5 {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------------------
   CTA Heartbeat Animation (common)
   - Applies to: .hero_cta, .deadline__cta, .reliability__cta, .decision__cta, .faq-cta__btn
   - No glow, always playing
   - Respects reduced motion
------------------------------------------------------------------------------ */
@keyframes cta-heartbeat {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.06); }
  20%  { transform: scale(1.02); }
  30%  { transform: scale(1.06); }
  40%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.hero_cta,
.deadline__cta,
.reliability__cta,
.decision__cta,
.faq-cta__btn {
  animation: cta-heartbeat 1.3s cubic-bezier(.32,.05,.4,1.4) infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero_cta,
  .deadline__cta,
  .reliability__cta,
  .decision__cta,
  .faq-cta__btn {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------------------
   Header CTA Glint (always-on, every 4s)
   - Target: .site-header__cta
   - Thin diagonal highlight sweeping left -> right
   - No JS required, stops on prefers-reduced-motion
------------------------------------------------------------------------------ */
.site-header__cta { position: relative; overflow: hidden; }

.site-header__cta::after {
  content: "";
  position: absolute;
  inset: -200% auto -200% -40%;
  width: 18%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,0.55) 42%,
    rgba(255,255,255,1) 47%,
    rgba(255,255,255,1) 53%,
    rgba(255,255,255,0.55) 58%,
    rgba(255,255,255,0) 64%,
    transparent 100%);
  transform: skewX(-20deg) translateX(-260%);
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  animation: header-cta-glint 4s ease-in-out 1.6s infinite;
}

@keyframes header-cta-glint {
  0%   { transform: skewX(-20deg) translateX(-260%); opacity: 0; }
  8%   { opacity: 1; }
  22%  { transform: skewX(-20deg) translateX(900%); opacity: 0; }
  100% { transform: skewX(-20deg) translateX(900%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__cta::after { animation: none; }
}