/* =========================================================
   layout.css: セクション / コンポーネント / レスポンシブ
   フォントサイズは rem + メディアクエリで制御（vw 等のビューポート連動は不使用）。
   下地は温白色。セクションごとに意味のある色は最大ひとつにとどめ、
   内側の要素は温白色または枠なしを基本にする（カードの過剰な装飾を避ける）。
   ========================================================= */

/* ============ ボタン ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.btn--primary {
  background-color: var(--rose);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--rose-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.9375rem; }

/* ============ ヘッダー ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg);                 /* フォールバック */
  background-color: rgba(255, 251, 245, 0.82);
  border-bottom: 1px solid var(--warm-border);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__logo { width: 2.25rem; height: 2.25rem; }
.brand__name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; }
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-nav__menu a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
}
.site-nav__menu a.btn--primary {
  color: var(--surface);
}
.site-nav__menu a.btn--primary:hover {
  color: var(--surface);
}
.site-nav__menu a:not(.btn):hover {
  color: var(--rose-strong);
  text-decoration: underline;
}

/* ハンバーガー（モバイル用・デフォルト非表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar {
  width: 1.25rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 47.99rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav__menu {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem var(--gutter) 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--warm-border);
    box-shadow: var(--shadow);
    /* 折りたたみ状態 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .site-nav.is-open .site-nav__menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav__menu li { width: 100%; }
  .site-nav__menu a:not(.btn) {
    display: block;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--rose-soft);
  }
  .site-nav__menu .btn { width: 100%; margin-top: 0.5rem; }
  .site-nav.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .site-nav.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============ ヒーロー（C2: 赤いポスター＋ライチ果肉の抜け） ============ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--surface);
  background: var(--rose);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 52% 0 0 0;
  z-index: 0;
  background:
    radial-gradient(circle, color-mix(in oklch, var(--rose) 42%, transparent) 1px, transparent 1.8px),
    var(--lemon-soft);
  background-size: 20px 20px, auto;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
}
.hero__intro {
  max-width: 34rem;
  order: 1;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--surface);
}
.hero__eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--lemon);
}
.hero__title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--surface);
  line-height: 1.04;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero__title-line {
  display: block;
  white-space: nowrap;
}
.hero__title-line--tail {
  display: flex;
  flex-wrap: wrap;
}
.hero__lead {
  margin-top: 0.9rem;
  max-width: 32rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--surface);
}
.hero__art {
  position: relative;
  order: 3;
  align-self: center;
  min-height: 22rem;
}
.hero__plate {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--rose) 30%, var(--lemon-soft));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(58, 72, 81, 0.22);
}
.hero__plate--main {
  z-index: 3;
  width: min(100%, 34rem);
  margin-inline: auto;
  transform: rotate(-1.5deg);
}
.hero__plate--sub {
  position: absolute;
  z-index: 2;
  width: min(42%, 13rem);
}
.hero__plate--friends {
  left: 0;
  bottom: 0;
  transform: rotate(-5deg);
}
.hero__plate--help {
  right: 0;
  bottom: 0.4rem;
  transform: rotate(4deg);
}
.hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero__aside {
  max-width: 32rem;
  order: 2;
}
.hero__aside .signup-mail { margin-top: 0; }
.hero .signup-mail__label,
.hero .signup-mail__note {
  color: var(--surface);
}
.hero .signup-mail__note {
  opacity: 0.9;
}
.hero .btn--primary {
  color: var(--ink);
  background: var(--lemon);
  border-color: var(--lemon-soft);
}
.hero .btn--primary:hover {
  color: var(--ink);
  background: color-mix(in oklch, var(--lemon) 82%, var(--surface));
  border-color: var(--lemon-soft);
}
.hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--surface);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.hero__secondary:hover { color: var(--lemon-soft); text-decoration: underline; }
.hero__secondary-arrow {
  display: inline-block;
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.hero__promises {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in oklch, var(--surface) 42%, var(--rose));
}
.hero__promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-right: 1.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--surface);
}
.hero__promises li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lemon);
}

@media (max-width: 47.99rem) {
  .hero__inner {
    gap: 1.25rem;
    padding-top: 1.75rem;
    padding-bottom: 2.25rem;
  }
  .hero__title { font-size: 2.45rem; }
  .hero__lead { font-size: 1.0625rem; line-height: 1.6; }
  .hero__art { min-height: 24rem; }
  .hero__media { aspect-ratio: 3 / 2; object-position: 50% 38%; }
  .hero__plate--main { width: min(92%, 25rem); }
  .hero__plate--sub { width: min(42%, 10rem); }
  .hero__plate--friends { left: 0.25rem; bottom: 0.1rem; }
  .hero__plate--help { right: 0.25rem; bottom: 0; }
  .hero__promises { margin-top: 1.25rem; }
  .hero__promises li { padding-right: 1rem; font-size: 0.875rem; }
}

@media (min-width: 48rem) {
  .hero__inner { padding-top: 3rem; padding-bottom: 3.25rem; gap: 2rem; }
  .hero__title { font-size: 3.25rem; }
  .hero__lead { font-size: 1.25rem; margin-top: 1.1rem; }
  .hero__art {
    justify-self: center;
    width: 100%;
    max-width: 38rem;
    min-height: 30rem;
  }
  .hero__promises li { padding-right: 2rem; }
}

@media (min-width: 60rem) {
  .hero::before {
    inset: 0 0 0 52%;
    border-left: 1px solid color-mix(in oklch, var(--lemon-soft) 70%, var(--rose));
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 11% 54%);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 31.5rem) minmax(0, 1fr);
    grid-template-areas:
      "intro art"
      "aside art"
      "strip strip";
    column-gap: 3.5rem;
    row-gap: 1.5rem;
    align-content: center;
    align-items: start;
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: min(78vh, 780px);
    min-height: min(78svh, 780px);
  }
  .hero__intro { grid-area: intro; align-self: end; max-width: none; }
  .hero__aside { grid-area: aside; align-self: start; max-width: none; }
  .hero__art {
    grid-area: art;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 42rem;
    min-height: 36rem;
  }
  .hero__plate--main {
    width: 77%;
    margin-inline: 17% 0;
  }
  .hero__plate--friends {
    left: 7%;
    bottom: 5%;
  }
  .hero__plate--help {
    right: 0;
    bottom: 8%;
  }
  .hero__title { font-size: 3.35rem; }
  .hero__promises { grid-area: strip; margin-top: 2rem; }
}

@media (min-width: 72rem) {
  .hero__inner { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: 3.75rem; }
  .hero__title { font-size: 3.6rem; }
  .hero__art { max-width: 46rem; }
}

/* ============ お知らせ希望メールリンク ============ */
.signup-mail { margin-top: 1.25rem; max-width: 32rem; }
.signup-mail__label {
  margin-bottom: 0.55rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
}
.signup-mail__note {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink);
}
.signup-mail--center {
  margin-inline: auto;
  text-align: left;
}
@media (max-width: 32rem) {
  .signup-mail .btn { width: 100%; }
}

/* ============ 感情のブリッジ ============ */
.bridge {
  background: var(--surface);
  border-block: 1px solid var(--warm-border);
}
.bridge__inner {
  max-width: var(--container-narrow);
  padding-block: 2rem;
  text-align: center;
}
.bridge__text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}
.bridge__text strong {
  font-weight: 800;
  color: var(--rose-strong);
}
.bridge__sub {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
@media (min-width: 48rem) {
  .bridge__inner { padding-block: 4.5rem; }
  .bridge__text { font-size: 1.875rem; }
}

/* ============ セクションの縦リズム ============ */
/* 広いセクションはゆったり、テキスト主体の狭いセクションはやや締める */
.promises,
.mechanism,
.privacy { padding-block: 3.5rem; }
.absent,
.fit,
.faq { padding-block: 3rem; }
@media (min-width: 48rem) {
  .promises, .mechanism, .privacy { padding-block: 5rem; }
  .absent, .fit, .faq { padding-block: 4rem; }
}

/* ============ マーク付きリスト（複数セクションで共用） ============ */
/* 装飾マークは空コンテンツの図形で描画（読み上げ対象にせず、ダッシュ記号も使わない）。
   塗りつぶしの点＝「ある／前向き」、輪郭だけのリング＝「ない／中立」。 */
.mark-list { display: grid; gap: 0.6rem; }
.mark-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink);
}
.mark-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.mark-list--mint li::before { background: var(--mint); }
.mark-list--rose li::before { background: var(--rose); }
.mark-list--soft li::before { background: var(--warm-border-strong); }
.mark-list--ring li::before {
  background: transparent;
  border: 1.5px solid var(--ink-soft);
}
.mark-list--quiet li { color: var(--ink-soft); }

/* ============ ゆずらないこと（約束カード） ============ */
.card-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* カードは温白色のまま。色はアイコンの受け皿にだけ小さく差し、全体は染めない。 */
.card {
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius);
}
.card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius);
}
.card__icon-wrap--rose { background: var(--rose-soft); }
.card__icon-wrap--mint { background: var(--mint-soft); }
.card__icon-wrap--sky { background: var(--sky-soft); }
.card__icon { width: 3rem; height: 3rem; }
.card__title { font-size: 1.25rem; color: var(--ink); }
.card__body {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ============ しくみ（タイムライン・枠なし＋つなぎ線） ============ */
.mechanism { background: var(--rose-soft); }
.mechanism__head { margin-bottom: 2.5rem; }
.mechanism__art-frame {
  width: 100%;
  max-width: 22rem;
  margin-top: 1.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9%;
  box-shadow: var(--shadow-lg);
}
.mechanism__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}
.timeline { display: grid; gap: 0; }
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-bottom: 1.75rem;
}
.timeline__step:last-child { padding-bottom: 0; }
/* 番号バッジの中心を縦に結ぶ控えめなつなぎ線（最後のステップには引かない） */
.timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  transform: translateX(-50%);
  top: 2.9rem;
  bottom: 0.35rem;
  width: 2px;
  background: var(--rose-border);
}
.timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  background: var(--rose);
  color: var(--surface);
  font-weight: 800;
  font-size: 1.125rem;
  border-radius: 50%;
}
.timeline__title { font-size: 1.1875rem; color: var(--ink); }
.timeline__body {
  margin-top: 0.4rem;
  color: var(--ink-soft);
}
/* 補足は塗りつぶしの色箱にせず、細い罫線つきの静かな注記にする */
.timeline__note {
  margin-top: 0.6rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--warm-border-strong);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

@media (min-width: 56rem) {
  .mechanism__inner {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 3rem;
    align-items: start;
  }
  .mechanism__head { margin-bottom: 0; position: sticky; top: 6rem; }
  .mechanism__art-frame { margin-top: 2rem; }
}

/* ============ ないものから（非対称ブロック） ============ */
/* 「入れていないもの」を主役（枠あり・広め）に、「していること」は控えめ（枠なし）に。 */
.absent__inner { max-width: var(--container-narrow); }
.absent__primary {
  margin-top: 2rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius);
}
.absent__heading {
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.absent__secondary {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--warm-border);
}
.absent__subheading {
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
@media (min-width: 40rem) {
  /* 主役ブロックは2列にして幅・存在感を持たせる */
  .absent__primary .mark-list { grid-template-columns: 1fr 1fr; gap: 0.7rem 1.75rem; }
}

/* ============ プライバシー ============ */
.privacy { background: var(--mint-soft); }
.privacy__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.privacy__cols {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.privacy__subtitle {
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.privacy__art-frame {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9%;
  box-shadow: var(--shadow-lg);
}
.privacy__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}
@media (min-width: 56rem) {
  .privacy__inner { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
  .privacy__cols { grid-template-columns: 1fr 1fr; }
  .privacy__art-frame { order: 2; }
}

/* ============ 向き、不向き（非対称・赤緑の対パネルにしない） ============ */
.fit__inner { max-width: var(--container-narrow); }
.fit__cols {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
/* 向いている家庭＝控えめな枠で少し前面に、向かない使い方＝枠なしで静かに */
.fit__block--yes {
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius);
}
.fit__block--no { padding: 1.5rem 0.25rem; }
.fit__heading {
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.fit__block--no .fit__heading { color: var(--ink-soft); }
@media (min-width: 44rem) {
  .fit__cols { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}

/* ============ よくある質問 ============ */
.faq__inner { max-width: var(--container-narrow); }
.faq__list { margin-top: 2rem; display: grid; gap: 0.75rem; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "＋";
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--rose);
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--rose-strong); }
.faq__a {
  padding: 0 1.25rem 1.2rem;
  color: var(--ink-soft);
}
.faq__a p { margin: 0; }

/* ============ 最終CTA ============ */
.cta { padding-block: 4rem; background: var(--surface-warm); border-top: 1px solid var(--warm-border); }
.cta__inner {
  max-width: var(--container-narrow);
  text-align: center;
}
.cta__logo { width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; }
.cta__title { color: var(--ink); }
.cta__lead {
  margin-top: 0.85rem;
  margin-inline: auto;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.cta .signup-mail {
  margin-inline: auto;
  margin-top: 2rem;
}
@media (min-width: 48rem) {
  .cta { padding-block: 5.5rem; }
}

/* ============ フッター ============ */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--warm-border);
  padding-block: 2.5rem;
}
.site-footer__inner { display: grid; gap: 1rem; }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-footer__brand .brand__logo { width: 2rem; height: 2rem; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.site-footer__nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
}
.site-footer__nav a:hover { color: var(--rose-strong); text-decoration: underline; }
.site-footer__note { color: var(--ink); font-size: 0.9375rem; }
.site-footer__disclaimer {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.85;
  max-width: 48rem;
}
.site-footer__copy {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

/* ============ スクロール表示アニメーション（JS有効時のみ・控えめ） ============ */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__secondary-arrow { animation: none; }
}