/**
 * kuruma_agemasu7.css
 * 新車あげます7 ランディングページ スタイルシート
 * 株式会社永惣 / Kabushiki Kaisha Nagasou
 *
 * 設計方針:
 *   - 名前空間 ka7- （KurumaAgemasu7）で Cocoon CSS と完全分離
 *   - BEM 記法
 *   - モバイルファースト
 *   - CSS カスタムプロパティで一元管理
 *   - nagasou-front.css の設計思想を継承・拡張
 *
 * ─── TABLE OF CONTENTS ───
 *  1. DESIGN TOKENS
 *  2. RESET / BASE
 *  3. SKIP LINK
 *  4. SCROLL REVEAL
 *  5. UTILITIES — BADGES / BUTTONS / HEADINGS
 *  6. LAYOUT
 *  7. PAGE TOP BUTTON
 *  8. STICKY CTA
 *  9. HERO
 * 10. STORY
 * 11. PAIN POINTS
 * 12. SOLUTION
 * 13. PRICE COMPARISON
 * 14. CAR LINEUP
 * 15. MAINTENANCE
 * 16. PERSONA
 * 17. CORPORATE
 * 18. TRUST
 * 19. FAQ
 * 20. FINAL CTA
 * 21. RESPONSIVE — TABLET (≤900px)
 * 22. RESPONSIVE — MOBILE (≤600px)
 * 23. ACCESSIBILITY / MOTION
 */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Brand palette */
  --ka7-sky:         #4A9EC4;
  --ka7-sky-l:       #7ABFE0;
  --ka7-sky-d:       #2D7FA8;
  --ka7-sky-pale:    #EAF5FC;
  --ka7-gold:        #C9A227;
  --ka7-gold-l:      #E8C95A;
  --ka7-gold-pale:   #FDF6E3;
  --ka7-gold-d:      #9E7B1A;
  --ka7-olive:       #8FA87A;
  --ka7-olive-pale:  #F0F5ED;
  --ka7-olive-d:     #6A8558;
  --ka7-dark:        #1A1E2A;
  --ka7-dark-m:      #2C3347;
  --ka7-mid:         #556070;
  --ka7-muted:       #8C96A2;
  --ka7-light:       #F5F7FA;
  --ka7-white:       #FFFFFF;
  /* Shadows */
  --ka7-shadow-sky:  0 8px 40px rgba(74,158,196,.18);
  --ka7-shadow-gold: 0 8px 40px rgba(201,162,39,.25);
  --ka7-shadow-soft: 0 4px 24px rgba(26,30,42,.08);
  /* Radii */
  --ka7-r:           14px;
  --ka7-r-lg:        24px;
  /* Easing */
  --ka7-ease:        cubic-bezier(0.16,1,0.3,1);
  /* Typography */
  --ka7-serif:       'Noto Serif JP', serif;
  --ka7-sans:        'Noto Sans JP', sans-serif;
  --ka7-display:     'Playfair Display', serif;
  /* Section rhythm */
  --ka7-py:          96px;
  /* Transition */
  --ka7-t:           0.4s var(--ka7-ease);
  /* Reveal delay (overridden inline) */
  --ka7-delay:       0s;
}

/* ─────────────────────────────────────────────
   2. RESET / BASE
───────────────────────────────────────────── */
.ka7-body {
  font-family: var(--ka7-sans);
  color: var(--ka7-dark);
  background: var(--ka7-white);
  overflow-x: hidden;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.ka7-main {
  display: block;
}

.ka7-main *,
.ka7-main *::before,
.ka7-main *::after {
  box-sizing: border-box;
}

.ka7-main img  { max-width: 100%; display: block; }
.ka7-main a    { text-decoration: none; color: inherit; }
.ka7-main ul   { list-style: none; margin: 0; padding: 0; }
.ka7-main p    { margin: 0 0 .75em; }
.ka7-main p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────
   3. SKIP LINK
───────────────────────────────────────────── */
.ka7-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: .5rem 1rem;
  background: var(--ka7-gold);
  color: var(--ka7-dark);
  font-family: var(--ka7-serif);
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top .2s;
}
.ka7-skip-link:focus { top: 0; }

/* ─────────────────────────────────────────────
   4. SCROLL REVEAL
───────────────────────────────────────────── */
.ka7-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .85s var(--ka7-ease) var(--ka7-delay),
    transform .85s var(--ka7-ease) var(--ka7-delay);
}
.ka7-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   5. UTILITIES
───────────────────────────────────────────── */

/* — Container — */
.ka7-container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* — Section wrapper — */
.ka7-section {
  padding-block: var(--ka7-py);
}
.ka7-section--white { background: var(--ka7-white); }
.ka7-section--light { background: var(--ka7-light); }

/* — Section header — */
.ka7-section-header {
  text-align: center;
  margin-bottom: 60px;
}
.ka7-section-lead {
  font-size: 1.02rem;
  color: var(--ka7-mid);
  line-height: 1.9;
  max-width: 640px;
  margin-top: 12px;
}
.ka7-section-lead--center { margin-inline: auto; }
.ka7-section-lead--light  { color: rgba(255,255,255,.7); }

/* — Badges — */
.ka7-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--ka7-sky-pale), var(--ka7-gold-pale));
  border: 1px solid rgba(74,158,196,.18);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ka7-sky-d);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ka7-badge::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--ka7-gold);
  border-radius: 50%;
  display: block;
}
.ka7-badge--sky {
  background: rgba(74,158,196,.12);
  border-color: rgba(74,158,196,.28);
  color: var(--ka7-sky-l);
}
.ka7-badge--gold {
  background: rgba(201,162,39,.14);
  border-color: rgba(201,162,39,.28);
  color: var(--ka7-gold-l);
}

/* — Headings — */
.ka7-heading {
  font-family: var(--ka7-serif);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ka7-dark);
  margin-bottom: 18px;
}
.ka7-heading em {
  font-style: normal;
  color: var(--ka7-sky-d);
}
.ka7-heading--center { text-align: center; }
.ka7-heading--light  { color: #fff; }
.ka7-heading--light em { color: var(--ka7-sky-l); }

/* — Accents — */
.ka7-em--gold {
  font-style: normal;
  background: linear-gradient(135deg, var(--ka7-gold-l), var(--ka7-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* — Buttons — */
.ka7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  font-family: var(--ka7-sans);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  padding: 13px 28px;
  text-decoration: none;
  transition: var(--ka7-t);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.ka7-btn--lg  { padding: 16px 36px; font-size: .95rem; }
.ka7-btn--xl  { padding: 18px 44px; font-size: 1.02rem; }

.ka7-btn--gold {
  background: linear-gradient(135deg, var(--ka7-gold-l), var(--ka7-gold));
  color: var(--ka7-dark);
  box-shadow: 0 6px 28px rgba(201,162,39,.35);
}
.ka7-btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(201,162,39,.48);
}

.ka7-btn--sky {
  background: linear-gradient(135deg, var(--ka7-sky), var(--ka7-sky-d));
  color: #fff;
  box-shadow: 0 6px 28px rgba(74,158,196,.32);
}
.ka7-btn--sky:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(74,158,196,.44);
}

.ka7-btn--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}
.ka7-btn--ghost:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.ka7-btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.22);
}
.ka7-btn--ghost-light:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  transform: translateY(-2px);
}

.ka7-btn--outline-sky {
  background: transparent;
  color: var(--ka7-sky-d);
  border: 2px solid var(--ka7-sky);
}
.ka7-btn--outline-sky:hover {
  background: var(--ka7-sky-pale);
  transform: translateY(-2px);
}

.ka7-btn--white-outline {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
}
.ka7-btn--white-outline:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────
   8. STICKY MOBILE CTA
───────────────────────────────────────────── */
.ka7-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  gap: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.ka7-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ka7-sticky-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 12px;
  font-family: var(--ka7-sans);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: filter .2s;
}
.ka7-sticky-btn:hover { filter: brightness(1.08); }
.ka7-sticky-btn--tel  {
  background: linear-gradient(135deg, var(--ka7-gold-l), var(--ka7-gold));
  color: var(--ka7-dark);
}
.ka7-sticky-btn--form {
  background: linear-gradient(135deg, var(--ka7-sky), var(--ka7-sky-d));
  color: #fff;
}

/* On desktop: hide sticky CTA */
@media (min-width: 768px) {
  .ka7-sticky-cta { display: none; }
}

/* ─────────────────────────────────────────────
   9. HERO
───────────────────────────────────────────── */
.ka7-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ka7-dark);
}

.ka7-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.ka7-hero__bg.is-loaded { transform: scale(1); }

.ka7-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(13,34,51,.88) 0%,
    rgba(26,58,80,.72) 50%,
    rgba(15,40,64,.85) 100%
  );
}

.ka7-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74,158,196,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,158,196,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.ka7-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 140px 100px;
}

.ka7-hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(74,158,196,.14);
  border: 1px solid rgba(74,158,196,.28);
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: 32px;
  animation: ka7FadeIn .9s ease .2s both;
}
.ka7-hero__tagline span {
  font-size: .76rem;
  letter-spacing: .14em;
  color: var(--ka7-sky-l);
  font-weight: 600;
}
.ka7-hero__tagline-dot {
  width: 6px; height: 6px;
  background: var(--ka7-gold-l);
  border-radius: 50%;
  flex-shrink: 0;
  animation: ka7Pulse 1.8s ease infinite;
}

.ka7-hero__title {
  font-family: var(--ka7-serif);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 28px;
  animation: ka7FadeUp .9s ease .3s both;
}
.ka7-hero__title-sky {
  display: block;
  color: var(--ka7-sky-l);
  font-size: .54em;
  font-weight: 300;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.ka7-hero__title-gold {
  background: linear-gradient(135deg, var(--ka7-gold-l), #fff7d6, var(--ka7-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: ka7Shimmer 5s linear infinite 1s;
}

.ka7-hero__sub {
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,.72);
  max-width: 520px;
  line-height: 1.9;
  margin-bottom: 44px;
  animation: ka7FadeUp .9s ease .5s both;
}
.ka7-hero__sub strong { color: rgba(255,255,255,.92); }

.ka7-hero__stats {
  display: flex;
  gap: 36px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  animation: ka7FadeUp .9s ease .62s both;
}
.ka7-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ka7-hero__stat-num {
  font-family: var(--ka7-display);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--ka7-gold-l);
  line-height: 1;
}
.ka7-hero__stat-num sup {
  font-size: .48em;
  vertical-align: super;
  font-family: var(--ka7-sans);
  font-weight: 600;
}
.ka7-hero__stat-label {
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
}
.ka7-hero__stat-div {
  width: 1px;
  background: rgba(255,255,255,.12);
  align-self: stretch;
}

.ka7-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: ka7FadeUp .9s ease .74s both;
}

.ka7-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.3);
  font-size: .66rem;
  letter-spacing: .16em;
  animation: ka7FadeIn 1s ease 1.6s both;
}
.ka7-hero__scroll-text { font-family: var(--ka7-display); }
.ka7-hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(74,158,196,.55), transparent);
  animation: ka7FloatY 2.2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   10. STORY
───────────────────────────────────────────── */
.ka7-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.ka7-story__card {
  background: linear-gradient(145deg, var(--ka7-sky-pale), #fff);
  border: 1px solid rgba(74,158,196,.14);
  border-radius: var(--ka7-r-lg);
  padding: 40px;
  box-shadow: var(--ka7-shadow-sky);
  position: relative;
}
.ka7-story__card::before {
  content: '安来の道';
  position: absolute;
  top: -13px; left: 28px;
  background: var(--ka7-sky-d);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 3px 13px;
  border-radius: 100px;
}
.ka7-story__quote {
  font-family: var(--ka7-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ka7-dark);
  line-height: 1.7;
  margin-bottom: 16px !important;
}
.ka7-story__card-sub {
  font-size: .85rem;
  color: var(--ka7-mid);
  line-height: 1.9;
}

.ka7-story__scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.ka7-story__scene {
  background: #fff;
  border: 1px solid rgba(74,158,196,.12);
  border-radius: var(--ka7-r);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ka7-story__scene--sky   { border-color: rgba(74,158,196,.2); }
.ka7-story__scene--olive { border-color: rgba(143,168,122,.2); }
.ka7-story__scene--gold  { border-color: rgba(201,162,39,.2); }
.ka7-story__scene-icon { font-size: 1.3rem; flex-shrink: 0; }
.ka7-story__scene-text { font-size: .78rem; font-weight: 600; color: var(--ka7-dark-m); }

.ka7-story__text .ka7-badge { margin-bottom: 14px; }
.ka7-story__paragraphs { display: flex; flex-direction: column; gap: 16px; }
.ka7-story__paragraphs p { font-size: .96rem; color: var(--ka7-mid); line-height: 2; }
.ka7-story__paragraphs strong { color: var(--ka7-dark); }

/* ─────────────────────────────────────────────
   11. PAIN POINTS
───────────────────────────────────────────── */
.ka7-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

.ka7-pain-card {
  background: #fff;
  border-radius: var(--ka7-r-lg);
  padding: 32px 26px;
  border: 1px solid rgba(26,30,42,.07);
  box-shadow: var(--ka7-shadow-soft);
  position: relative;
  overflow: hidden;
  transition: var(--ka7-t);
}
.ka7-pain-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E85A5A, #E88A5A);
  opacity: 0;
  transition: opacity .3s;
}
.ka7-pain-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,30,42,.12); }
.ka7-pain-card:hover::before { opacity: 1; }
.ka7-pain-icon { font-size: 2rem; display: block; margin-bottom: 14px; }
.ka7-pain-card h3 {
  font-family: var(--ka7-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 10px;
}
.ka7-pain-card p { font-size: .83rem; color: var(--ka7-muted); line-height: 1.8; }

.ka7-voice-grid {
  background: linear-gradient(135deg, rgba(232,90,90,.05), rgba(232,138,90,.04));
  border: 1px solid rgba(232,90,90,.12);
  border-radius: var(--ka7-r-lg);
  padding: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ka7-voice-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ka7-voice-item::before {
  content: '"';
  font-family: var(--ka7-display);
  font-size: 1.8rem;
  color: #E85A5A;
  opacity: .5;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -4px;
}
.ka7-voice-item span { font-size: .88rem; color: var(--ka7-dark-m); font-weight: 500; line-height: 1.6; }

/* ─────────────────────────────────────────────
   12. SOLUTION
───────────────────────────────────────────── */
.ka7-solution {
  position: relative;
  padding-block: var(--ka7-py);
  overflow: hidden;
}
.ka7-solution__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ka7-solution__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg,
    rgba(13,34,51,.92) 0%,
    rgba(26,58,80,.80) 50%,
    rgba(15,40,64,.90) 100%);
}
.ka7-solution__inner { position: relative; z-index: 1; }

.ka7-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
  margin-bottom: 40px;
}
.ka7-benefit {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ka7-r-lg);
  padding: 34px 26px;
  backdrop-filter: blur(12px);
  transition: var(--ka7-t);
  position: relative;
  overflow: hidden;
}
.ka7-benefit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(74,158,196,.08), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.ka7-benefit:hover { transform: translateY(-4px); border-color: rgba(74,158,196,.35); }
.ka7-benefit:hover::before { opacity: 1; }
.ka7-benefit__num {
  font-family: var(--ka7-display);
  font-size: .73rem;
  color: var(--ka7-gold-l);
  letter-spacing: .18em;
  display: block;
  margin-bottom: 14px;
}
.ka7-benefit__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(74,158,196,.14);
  border: 1px solid rgba(74,158,196,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.ka7-benefit h3 {
  font-family: var(--ka7-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.45;
}
.ka7-benefit p { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.85; }

/* 7-year banner */
.ka7-seven-banner {
  background: linear-gradient(135deg, rgba(201,162,39,.14), rgba(201,162,39,.07));
  border: 1px solid rgba(201,162,39,.28);
  border-radius: var(--ka7-r-lg);
  padding: 48px 52px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.ka7-seven__num-wrap { flex-shrink: 0; text-align: center; }
.ka7-seven__num {
  font-family: var(--ka7-display);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--ka7-gold-l), var(--ka7-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ka7-seven__label {
  display: block;
  font-size: .72rem;
  color: var(--ka7-gold-l);
  letter-spacing: .2em;
  margin-top: 4px;
}
.ka7-seven__div {
  width: 1px;
  height: 80px;
  background: rgba(201,162,39,.2);
  flex-shrink: 0;
}
.ka7-seven__text h3 {
  font-family: var(--ka7-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.4;
}
.ka7-seven__text p { font-size: .86rem; color: rgba(255,255,255,.6); line-height: 1.9; max-width: 480px; }
.ka7-seven__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ka7-seven__bullet {
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.2);
  border-radius: 100px;
  padding: 4px 13px;
  font-size: .72rem;
  color: var(--ka7-gold-l);
}

/* ─────────────────────────────────────────────
   13. PRICE COMPARISON
───────────────────────────────────────────── */
.ka7-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 40px;
}

.ka7-comp-card {
  border-radius: var(--ka7-r-lg);
  padding: 34px;
  position: relative;
}
.ka7-comp-card--old {
  background: var(--ka7-light);
  border: 1px solid rgba(26,30,42,.08);
}
.ka7-comp-card--new {
  background: linear-gradient(145deg, var(--ka7-sky-pale), #fff);
  border: 2px solid var(--ka7-sky-l);
  box-shadow: var(--ka7-shadow-sky);
}
.ka7-comp-recommend {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ka7-gold-l), var(--ka7-gold));
  color: var(--ka7-dark);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 4px 15px;
  border-radius: 100px;
  white-space: nowrap;
}
.ka7-comp-tag {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ka7-muted);
  margin-bottom: 14px;
}
.ka7-comp-tag--sky { color: var(--ka7-sky-d); }

.ka7-comp-card h3 {
  font-family: var(--ka7-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,30,42,.08);
}
.ka7-comp-price {
  font-family: var(--ka7-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ka7-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.ka7-comp-price--sky { color: var(--ka7-sky-d); }
.ka7-comp-price-label { font-size: .72rem; color: var(--ka7-muted); margin-bottom: 18px; }
.ka7-comp-items { display: flex; flex-direction: column; gap: 8px; }
.ka7-comp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--ka7-dark-m);
}
.ka7-comp-item::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 800;
}
.ka7-comp-item--yes::before {
  content: '✓';
  background: #E6F7F0;
  color: #2E8B57;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ka7-comp-item--no::before {
  content: '✕';
  background: #FEEFEF;
  color: #E05A5A;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ka7-comp-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ka7-comp-vs__circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ka7-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ka7-display);
  font-size: .82rem;
  font-weight: 700;
}
.ka7-comp-vs__arrow { color: var(--ka7-sky-d); font-size: 1.4rem; }

.ka7-savings {
  background: linear-gradient(135deg, var(--ka7-gold-pale), #fff);
  border: 1px solid rgba(201,162,39,.22);
  border-radius: var(--ka7-r-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.ka7-savings__num { flex-shrink: 0; }
.ka7-savings__amount {
  display: block;
  font-family: var(--ka7-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--ka7-gold-d);
  line-height: 1;
}
.ka7-savings__unit { font-size: .82rem; color: var(--ka7-gold-d); font-weight: 700; }
.ka7-savings__text h3 {
  font-family: var(--ka7-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 8px;
}
.ka7-savings__text p { font-size: .86rem; color: var(--ka7-mid); line-height: 1.85; }
.ka7-savings__text small { font-size: .75rem; color: var(--ka7-muted); display: block; margin-top: 8px; }

/* ─────────────────────────────────────────────
   14. CAR LINEUP
───────────────────────────────────────────── */
.ka7-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.ka7-lineup-card {
  background: #fff;
  border-radius: var(--ka7-r);
  overflow: hidden;
  border: 1px solid rgba(26,30,42,.07);
  box-shadow: var(--ka7-shadow-soft);
  transition: var(--ka7-t);
  position: relative;
}
.ka7-lineup-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ka7-sky), var(--ka7-sky-l));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ka7-ease);
}
.ka7-lineup-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(26,30,42,.12);
}
.ka7-lineup-card:hover::after { transform: scaleX(1); }

.ka7-lineup-card__img-wrap {
  overflow: hidden;
  background: var(--ka7-light);
  aspect-ratio: 16/9;
}
.ka7-lineup-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ka7-ease);
}
.ka7-lineup-card:hover .ka7-lineup-card__img-wrap img { transform: scale(1.04); }

.ka7-lineup-card__body { padding: 22px 20px; }
.ka7-lineup-card__maker {
  font-size: .7rem;
  color: var(--ka7-muted);
  margin-bottom: 4px;
  letter-spacing: .06em;
}
.ka7-lineup-card__model {
  font-family: var(--ka7-serif);
  font-size: .98rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 14px;
  line-height: 1.3;
}

.ka7-lineup-card__price-area {
  background: var(--ka7-sky-pale);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  margin-bottom: 12px;
}
.ka7-lineup-card__price-from {
  display: block;
  font-size: .62rem;
  color: var(--ka7-sky-d);
  letter-spacing: .1em;
  font-weight: 600;
  margin-bottom: 2px;
}
.ka7-lineup-card__price {
  display: block;
  font-family: var(--ka7-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ka7-sky-d);
  line-height: 1.2;
}
.ka7-lineup-card__price small {
  font-family: var(--ka7-sans);
  font-size: .7rem;
  color: var(--ka7-sky);
  font-weight: 400;
}
.ka7-lineup-card__price-tax {
  display: block;
  font-size: .68rem;
  color: var(--ka7-muted);
  margin-top: 2px;
}

.ka7-lineup-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ka7-lineup-card__tag {
  background: var(--ka7-olive-pale);
  border: 1px solid rgba(143,168,122,.2);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: .62rem;
  color: var(--ka7-olive-d);
  font-weight: 600;
}

.ka7-lineup-note {
  background: linear-gradient(135deg, var(--ka7-sky-pale), var(--ka7-gold-pale));
  border: 1px solid rgba(74,158,196,.15);
  border-radius: var(--ka7-r);
  padding: 18px 24px;
  margin-top: 20px;
  font-size: .84rem;
  color: var(--ka7-dark-m);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ka7-lineup-note svg { flex-shrink: 0; color: var(--ka7-sky-d); }

.ka7-section-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 44px;
}

/* ─────────────────────────────────────────────
   15. MAINTENANCE
───────────────────────────────────────────── */
.ka7-maint {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.ka7-maint__lead { font-size: .94rem; color: var(--ka7-mid); line-height: 1.9; margin-bottom: 24px; }

.ka7-maint__savings {
  background: linear-gradient(135deg, var(--ka7-olive-pale), #fff);
  border: 1px solid rgba(143,168,122,.22);
  border-radius: var(--ka7-r);
  padding: 26px;
}
.ka7-maint__savings h4 {
  font-family: var(--ka7-serif);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ka7-olive-d);
  margin-bottom: 16px;
}
.ka7-maint__compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(143,168,122,.12);
  color: var(--ka7-mid);
}
.ka7-maint__compare-row--new { border-bottom: none; }
.ka7-maint__compare-old {
  font-weight: 700;
  text-decoration: line-through;
  color: var(--ka7-muted);
}
.ka7-maint__compare-new {
  font-family: var(--ka7-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ka7-olive-d);
}
.ka7-maint__compare-diff {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--ka7-olive-d);
  font-weight: 700;
}

.ka7-maint__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ka7-maint__item {
  background: var(--ka7-light);
  border: 1px solid rgba(26,30,42,.07);
  border-radius: var(--ka7-r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--ka7-t);
}
.ka7-maint__item:hover { transform: translateY(-2px); box-shadow: var(--ka7-shadow-soft); }
.ka7-maint__item--hl {
  background: var(--ka7-sky-pale);
  border-color: rgba(74,158,196,.2);
}
.ka7-maint__item-icon { font-size: 1.3rem; flex-shrink: 0; }
.ka7-maint__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ka7-maint__item-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ka7-dark-m);
  line-height: 1.2;
}
.ka7-maint__item--hl .ka7-maint__item-name { color: var(--ka7-sky-d); }
.ka7-maint__item-count { font-size: .7rem; color: var(--ka7-muted); }

/* ─────────────────────────────────────────────
   16. PERSONA
───────────────────────────────────────────── */
.ka7-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ka7-persona-card {
  background: #fff;
  border-radius: var(--ka7-r-lg);
  padding: 32px 26px;
  border: 1px solid rgba(74,158,196,.12);
  box-shadow: var(--ka7-shadow-soft);
  transition: var(--ka7-t);
  display: flex;
  flex-direction: column;
}
.ka7-persona-card:hover { transform: translateY(-4px); box-shadow: var(--ka7-shadow-sky); }
.ka7-persona-emoji { font-size: 2.4rem; display: block; margin-bottom: 14px; }
.ka7-persona-card h3 {
  font-family: var(--ka7-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 10px;
}
.ka7-persona-card p { font-size: .84rem; color: var(--ka7-mid); line-height: 1.85; flex: 1; }
.ka7-persona-voice {
  margin-top: 16px;
  background: var(--ka7-sky-pale);
  border-left: 3px solid var(--ka7-sky);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: .78rem;
  color: var(--ka7-sky-d);
  font-weight: 600;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   17. CORPORATE
───────────────────────────────────────────── */
.ka7-corporate {
  position: relative;
  padding-block: var(--ka7-py);
  overflow: hidden;
}
.ka7-corporate__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ka7-corporate__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
    rgba(13,34,51,.90) 0%,
    rgba(26,50,70,.82) 60%,
    rgba(20,44,64,.88) 100%);
}
.ka7-corporate__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.ka7-corporate__lead { font-size: .94rem; color: rgba(255,255,255,.68); line-height: 1.9; margin-bottom: 28px; }

.ka7-corp-merits { display: flex; flex-direction: column; gap: 20px; }
.ka7-corp-merit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ka7-corp-merit__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(74,158,196,.12);
  border: 1px solid rgba(74,158,196,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.ka7-corp-merit h4 {
  font-family: var(--ka7-serif);
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.ka7-corp-merit p { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.75; }

.ka7-corp-types {
  background: rgba(74,158,196,.07);
  border: 1px solid rgba(74,158,196,.18);
  border-radius: var(--ka7-r-lg);
  padding: 34px;
  margin-top: 40px;
}
.ka7-corp-types__title {
  font-family: var(--ka7-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.ka7-corp-types__list { display: flex; flex-direction: column; gap: 14px; }
.ka7-corp-type {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ka7-corp-type span:first-child { font-size: 1.4rem; flex-shrink: 0; }
.ka7-corp-type strong { display: block; font-size: .88rem; font-weight: 700; color: #fff; }
.ka7-corp-type small  { display: block; font-size: .73rem; color: rgba(255,255,255,.45); }
.ka7-corp-types__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
}

/* ─────────────────────────────────────────────
   18. TRUST
───────────────────────────────────────────── */
.ka7-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.ka7-trust__lead { font-size: .94rem; color: var(--ka7-mid); line-height: 1.9; margin-bottom: 28px; }
.ka7-trust-points { display: flex; flex-direction: column; gap: 20px; }
.ka7-trust-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ka7-trust-point__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ka7-sky-pale);
  border: 1px solid rgba(74,158,196,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.ka7-trust-point h4 {
  font-family: var(--ka7-serif);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ka7-dark);
  margin-bottom: 5px;
}
.ka7-trust-point p { font-size: .82rem; color: var(--ka7-mid); line-height: 1.75; }

/* ── trust card: 高級ゴールド背景
 * Cocoonの background:#fff 上書きを詳細度強化で完全排除
 * 深みのある琥珀ゴールドで "車のある暮らし" をくっきり表示
 * ──────────────────────────────────────────────────────── */

/* 詳細度強化セレクタ（Cocoon競合対策） */
#trust .ka7-trust__card,
.ka7-section .ka7-trust__card,
.ka7-trust__card {
  /* 深みのある高級ゴールドグラデーション
   * --ka7-gold-d (#9E7B1A) を基点に琥珀色へ */
  background: linear-gradient(
    145deg,
    #3d2900 0%,
    #5a3d00 40%,
    #6b4a05 100%
  ) !important;
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: var(--ka7-r-lg);
  padding: 40px;
  margin-top: 44px;
  /* 金の輝き感を演出するボックスシャドウ */
  box-shadow:
    0 12px 48px rgba(90, 60, 0, .35),
    inset 0 1px 0 rgba(232, 201, 90, .18);
  position: relative;
  overflow: hidden;
}

/* ゴールドトップライン（上部アクセント） */
#trust .ka7-trust__card::before,
.ka7-trust__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ka7-gold) 30%,
    var(--ka7-gold-l) 60%,
    transparent
  );
}

.ka7-trust__card-tag {
  display: block;
  font-size: .7rem;
  letter-spacing: .22em;
  /* 深いゴールド背景上では明るいゴールドで視認性確保 */
  color: var(--ka7-gold-l);
  font-weight: 700;
  margin-bottom: 20px;
}

.ka7-trust__quote {
  background: transparent !important;

  font-family: var(--ka7-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.9;

  /* もっと濃く */
  color: #fff7e3;

  border: none;
  padding: 0;

  text-align: center;
  margin: 0 auto 32px;
  max-width: 30ch;

  /* 文字を背景から浮かせる */
  text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 0 12px rgba(0,0,0,.18);
}

.ka7-trust__quote em {
  font-style: normal;
  font-weight: 800;

  color: #ffd95e;

  text-shadow:
    0 0 8px rgba(255, 217, 94, .45),
    0 0 18px rgba(255, 217, 94, .22);
}

.ka7-trust__roads { display: flex; flex-direction: column; gap: 10px; }

.ka7-trust__road {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .84rem;
  /* ゴールド背景上での読みやすいオフホワイト */
  color: rgba(255, 245, 210, .75);
}

.ka7-trust__road-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  /* スカイブルーからゴールドへ変更（テーマ統一） */
  background: var(--ka7-gold-l);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(232, 201, 90, .5);
}

/* ─────────────────────────────────────────────
   19. FAQ
───────────────────────────────────────────── */
.ka7-faq {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.ka7-faq__intro .ka7-heading { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.ka7-faq__intro p { font-size: .9rem; color: var(--ka7-mid); line-height: 1.85; margin-bottom: 24px; }
.ka7-faq__cta-links { display: flex; flex-direction: column; gap: 10px; }

.ka7-faq-item {
  border: 1px solid rgba(26,30,42,.08);
  border-radius: var(--ka7-r);
  overflow: hidden;
  background: #fff;
  margin-bottom: 10px;
  transition: var(--ka7-t);
}
.ka7-faq-item:hover { border-color: rgba(74,158,196,.25); }

.ka7-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  transition: background .2s;
}
.ka7-faq-q:hover { background: var(--ka7-light); }
.ka7-faq-q[aria-expanded="true"] { background: var(--ka7-sky-pale); }

.ka7-faq-q__mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ka7-sky-d);
  color: #fff;
  font-family: var(--ka7-display);
  font-size: .9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ka7-faq-q__text {
  flex: 1;
  font-family: var(--ka7-serif);
  font-size: .94rem;
  font-weight: 700;
  color: var(--ka7-dark);
  line-height: 1.5;
}
.ka7-faq-q__toggle {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,158,196,.35);
  color: var(--ka7-sky-d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform .35s var(--ka7-ease), background .2s;
}
.ka7-faq-q__toggle::before { content: '+'; display: block; line-height: 1; }
.ka7-faq-q[aria-expanded="true"] .ka7-faq-q__toggle {
  transform: rotate(45deg);
  background: var(--ka7-sky-d);
  border-color: var(--ka7-sky-d);
  color: #fff;
}

.ka7-faq-a {
  overflow: hidden;
}
.ka7-faq-a__inner {
  padding: 20px 22px 24px 68px;
  border-top: 1px solid rgba(74,158,196,.12);
}
.ka7-faq-a__inner p { font-size: .9rem; color: var(--ka7-mid); line-height: 1.9; }
.ka7-faq-a__inner strong { color: var(--ka7-dark); }
.ka7-faq-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E6F7F0;
  color: #2E8B57;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────
   20. FINAL CTA
───────────────────────────────────────────── */
.ka7-cta {
  position: relative;
  padding-block: var(--ka7-py);
  overflow: hidden;
  text-align: center;
}
.ka7-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ka7-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(13,34,51,.94) 0%,
    rgba(22,50,70,.88) 55%,
    rgba(15,40,64,.92) 100%);
}
.ka7-cta__inner {
  position: relative;
  z-index: 1;
}
.ka7-cta__title {
  font-family: var(--ka7-serif);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 20px;
}
.ka7-cta__lead {
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  max-width: 500px;
  margin: 0 auto 44px;
  line-height: 1.9;
}
.ka7-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ka7-cta__assurance {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ka7-cta__assure-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: rgba(255,255,255,.52);
}
.ka7-cta__assure-item::before {
  content: '✓';
  color: var(--ka7-sky-l);
  font-weight: 800;
}

/* ─────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────── */
@keyframes ka7FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ka7FadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ka7Shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes ka7FloatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes ka7Pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ─────────────────────────────────────────────
   21. RESPONSIVE — TABLET (≤900px)
───────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --ka7-py: 72px; }

  /* Story */
  .ka7-story {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Pain */
  .ka7-pain-grid { grid-template-columns: repeat(2, 1fr); }
  .ka7-voice-grid { grid-template-columns: 1fr; }

  /* Solution */
  .ka7-benefits { grid-template-columns: repeat(2, 1fr); }
  .ka7-seven-banner {
    flex-direction: column;
    gap: 24px;
    padding: 36px;
    text-align: center;
  }
  .ka7-seven__div { width: 80px; height: 1px; }
  .ka7-seven__bullets { justify-content: center; }

  /* Price */
  .ka7-comparison {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ka7-comp-vs { flex-direction: row; justify-content: center; padding: 4px 0; }
  .ka7-comp-vs__arrow { transform: rotate(90deg); }
  .ka7-savings { flex-direction: column; gap: 20px; text-align: center; padding: 32px; }

  /* Lineup */
  .ka7-lineup-grid { grid-template-columns: repeat(2, 1fr); }

  /* Maintenance */
  .ka7-maint { grid-template-columns: 1fr; gap: 44px; }

  /* Persona */
  .ka7-persona-grid { grid-template-columns: repeat(2, 1fr); }

  /* Corporate */
  .ka7-corporate__inner { grid-template-columns: 1fr; gap: 36px; }
  .ka7-corp-types { margin-top: 0; }

  /* Trust */
  .ka7-trust { grid-template-columns: 1fr; gap: 44px; }

  /* FAQ */
  .ka7-faq { grid-template-columns: 1fr; gap: 44px; }
  .ka7-faq__cta-links { flex-direction: row; }

  /* Hero */
  .ka7-hero__stat-div { display: none; }
  .ka7-hero__stats { gap: 24px; }
}

/* ─────────────────────────────────────────────
   22. RESPONSIVE — MOBILE (≤600px)
───────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --ka7-py: 56px; }

  .ka7-container { padding-inline: 16px; }

  .ka7-hero__title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .ka7-hero__sub   { font-size: .92rem; }
  .ka7-hero__actions { flex-direction: column; }
  .ka7-hero__actions .ka7-btn { width: 100%; }

  .ka7-pain-grid       { grid-template-columns: 1fr; }
  .ka7-benefits        { grid-template-columns: 1fr; }
  .ka7-lineup-grid     { grid-template-columns: 1fr; }
  .ka7-persona-grid    { grid-template-columns: 1fr; }
  .ka7-maint__grid     { grid-template-columns: 1fr; }
  .ka7-story__scenes   { grid-template-columns: 1fr; }

  .ka7-seven-banner    { padding: 28px 22px; }
  .ka7-seven__num      { font-size: 4rem; }

  .ka7-cta__buttons    { flex-direction: column; align-items: center; }
  .ka7-cta__buttons .ka7-btn { width: 100%; max-width: 360px; }
  .ka7-cta__assurance  { flex-direction: column; align-items: center; gap: 12px; }

  .ka7-savings { padding: 24px 20px; }

  .ka7-faq__cta-links { flex-direction: column; }
  .ka7-faq-a__inner   { padding-left: 22px; }

  .ka7-section-cta { flex-direction: column; align-items: center; }
  .ka7-section-cta .ka7-btn { width: 100%; max-width: 360px; }

  .ka7-trust__card { padding: 28px 22px; }

}

/* ─────────────────────────────────────────────
   23. ACCESSIBILITY / MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ka7-reveal { transition: none !important; }
  .ka7-reveal.is-visible { opacity: 1; transform: none; }
  .ka7-hero__bg { transition: none; }
  .ka7-hero__scroll-line,
  .ka7-hero__tagline-dot { animation: none; }
  .ka7-hero__title,
  .ka7-hero__title-gold { animation: none; }
  .ka7-hero__tagline,
  .ka7-hero__sub,
  .ka7-hero__stats,
  .ka7-hero__actions,
  .ka7-hero__scroll { animation: none; opacity: 1; }
}


/* Focus visible */
.ka7-btn:focus-visible,
.ka7-faq-q:focus-visible {
  outline: 3px solid var(--ka7-sky);
  outline-offset: 3px;
}