:root {
  --home-google-play: "https://play.google.com/store/apps/details?id=com.LuB.CatDefenders";
}

.kp-home {
  overflow: hidden;
}

.kp-home .kp-section {
  padding-block: var(--space-8);
}

.kp-home .kp-section__intro {
  min-width: 0;
}

.kp-home .kp-section__intro > :last-child,
.kp-home .kp-fact-card > :last-child,
.kp-home .kp-step > :last-child,
.kp-home .kp-strategy-card > :last-child,
.kp-home .kp-review-copy > :last-child,
.kp-home .kp-summary-list > :last-child,
.kp-home .kp-faq-panel > :last-child {
  margin-bottom: 0;
}

.kp-home .kp-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 48px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-cream-050);
  font-weight: 800;
  line-height: 1.2;
  padding: 0.75rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.kp-home .kp-play-button:hover {
  background: #d95b4c;
  box-shadow: var(--shadow-comic);
  color: var(--color-cream-050);
  text-decoration: none;
  transform: translateY(-2px);
}

.kp-home .kp-play-button:active {
  box-shadow: none;
  transform: translateY(0);
}

.kp-home .kp-play-button__icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.kp-home .kp-external-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: var(--line-height-small);
}

.kp-home .kp-hero {
  background: var(--color-sky-500);
  padding-block: var(--space-6) var(--space-8);
}

.kp-home .kp-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.kp-home .kp-hero__copy,
.kp-home .kp-hero__media {
  min-width: 0;
  width: 100%;
}

.kp-home .kp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
  background: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
  padding: var(--space-5);
}

.kp-home .kp-hero__copy > * {
  margin: 0;
}

.kp-home .kp-hero__copy h1 {
  max-width: 32rem;
}

.kp-home .kp-hero__lead {
  max-width: 32rem;
  font-size: var(--font-size-lead);
  font-weight: 600;
  line-height: 1.4;
}

.kp-home .kp-hero__media {
  max-width: 32.5rem;
  justify-self: center;
}

.kp-home .kp-hero__figure {
  margin: 0;
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-xl);
  background: var(--color-cream-100);
  box-shadow: var(--shadow-comic);
}

.kp-home .kp-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kp-home .kp-facts {
  background: var(--color-cream-050);
}

.kp-home .kp-facts__intro {
  max-width: 42.5rem;
}

.kp-home .kp-facts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.kp-home .kp-fact-card {
  min-width: 0;
  width: 100%;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-green-050);
  padding: var(--space-4);
}

.kp-home .kp-fact-card__label {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kp-home .kp-fact-card__value {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: 800;
  line-height: 1.15;
}

.kp-home .kp-verification-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  max-width: var(--facts-max);
  margin-top: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-green-050);
  padding: var(--space-4);
}

.kp-home .kp-verification-note p {
  margin: 0;
}

.kp-home .kp-shield-icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-green-600);
}

.kp-home .kp-definition {
  background: var(--color-cream-100);
}

.kp-home .kp-definition__layout {
  position: relative;
  min-width: 0;
}

.kp-home .kp-definition__copy {
  max-width: 45rem;
}

.kp-home .kp-definition__copy > *:last-child {
  margin-bottom: 0;
}

.kp-home .kp-method-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 45rem;
  margin-top: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-cream-050);
  padding: var(--space-4);
}

.kp-home .kp-method-note > * {
  margin: 0;
}

.kp-home .kp-method-note__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kp-home .kp-map-shield {
  display: none;
}

.kp-home .kp-gameplay {
  background: var(--color-sky-500);
}

.kp-home .kp-gameplay__intro {
  max-width: 42.5rem;
}

.kp-home .kp-gameplay__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-5);
}

.kp-home .kp-source-card,
.kp-home .kp-cats__source,
.kp-home .kp-progression-card {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
  background: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
}

.kp-home .kp-source-card figure,
.kp-home .kp-cats__source figure,
.kp-home .kp-progression-card figure {
  margin: 0;
}

.kp-home .kp-source-card img,
.kp-home .kp-cats__source img,
.kp-home .kp-progression-card img {
  width: 100%;
  object-fit: cover;
}

.kp-home .kp-source-card img,
.kp-home .kp-progression-card img {
  aspect-ratio: 16 / 9;
}

.kp-home .kp-cats__source img {
  aspect-ratio: 4 / 3;
}

.kp-home .kp-source-card figcaption,
.kp-home .kp-cats__source figcaption,
.kp-home .kp-progression-card figcaption {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.kp-home .kp-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  width: 100%;
}

.kp-home .kp-step {
  min-width: 0;
  width: 100%;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
  padding: var(--space-4);
  transition: transform var(--transition-fast);
}

.kp-home .kp-step:hover {
  transform: rotate(-1deg);
}

.kp-home .kp-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-2);
  border: var(--border);
  border-radius: 50%;
  background: var(--color-yellow-400);
  font-weight: 800;
}

.kp-home .kp-step h3,
.kp-home .kp-strategy-card h3 {
  margin-bottom: var(--space-2);
}

.kp-home .kp-step p {
  max-width: 34rem;
}

.kp-home .kp-gameplay__link {
  display: inline-block;
  margin-top: var(--space-5);
  font-weight: 800;
}

.kp-home .kp-cats {
  background: var(--color-cream-050);
}

.kp-home .kp-cats__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.kp-home .kp-cats__copy,
.kp-home .kp-cats__source {
  min-width: 0;
  width: 100%;
}

.kp-home .kp-cats__copy {
  max-width: 38.75rem;
}

.kp-home .kp-criteria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.kp-home .kp-criteria__item {
  min-width: 0;
  width: 100%;
  border-left: var(--border-width-strong) solid var(--color-yellow-400);
  background: var(--color-cream-100);
  padding: var(--space-3) var(--space-4);
}

.kp-home .kp-criteria__number {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.kp-home .kp-criteria__item p {
  margin: var(--space-2) 0 0;
}

.kp-home .kp-cats__link,
.kp-home .kp-strategy__links {
  font-weight: 800;
}

.kp-home .kp-strategy {
  background: var(--color-green-600);
  color: var(--color-cream-050);
}

.kp-home .kp-strategy :is(h2, h3, strong) {
  color: inherit;
}

.kp-home .kp-strategy__intro {
  max-width: 45rem;
}

.kp-home .kp-strategy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.kp-home .kp-strategy-card {
  min-width: 0;
  width: 100%;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: #2f8050;
  color: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
  padding: var(--space-5);
  transition: transform var(--transition-fast);
}

.kp-home .kp-strategy-card:hover {
  transform: rotate(-1deg);
}

.kp-home .kp-strategy-card p {
  max-width: 30rem;
}

.kp-home .kp-strategy__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.kp-home .kp-strategy__links a {
  color: var(--color-cream-050);
}

.kp-home .kp-review-start {
  background: var(--color-cream-100);
}

.kp-home .kp-review-panel {
  border: var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
  background: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
  padding: var(--space-5);
}

.kp-home .kp-review-copy {
  max-width: 45rem;
}

.kp-home .kp-review-copy > *:last-child {
  margin-bottom: 0;
}

.kp-home .kp-review-copy h3:not(:first-child) {
  margin-top: var(--space-6);
}

.kp-home .kp-review-tag {
  margin-bottom: var(--space-4);
  background: var(--color-coral-500);
  color: var(--color-cream-050);
}

.kp-home .kp-review-detail {
  background: var(--color-cream-050);
}

.kp-home .kp-review-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.kp-home .kp-review-detail__copy,
.kp-home .kp-progression-card {
  min-width: 0;
  width: 100%;
}

.kp-home .kp-review-detail__copy {
  max-width: 42.5rem;
}

.kp-home .kp-review-detail__copy h3:not(:first-child) {
  margin-top: var(--space-6);
}

.kp-home .kp-review-atmosphere {
  background: var(--color-sky-500);
}

.kp-home .kp-review-atmosphere__panel {
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--color-cream-050);
  box-shadow: var(--shadow-comic);
  padding: var(--space-5);
}

.kp-home .kp-review-atmosphere__copy {
  max-width: 45rem;
  margin-inline: auto;
}

.kp-home .kp-review-atmosphere__copy h3:not(:first-child) {
  margin-top: var(--space-6);
}

.kp-home .kp-audio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.kp-home .kp-audio-grid > article {
  min-width: 0;
  width: 100%;
}

.kp-home .kp-audio-grid h3 {
  margin-bottom: var(--space-3);
}

.kp-home .kp-summary {
  background: var(--color-cream-100);
}

.kp-home .kp-summary__intro {
  max-width: 42.5rem;
}

.kp-home .kp-summary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.kp-home .kp-summary-list {
  min-width: 0;
  width: 100%;
  padding: var(--space-4);
}

.kp-home .kp-summary-list--check {
  border-left: var(--border-width-strong) solid var(--color-yellow-400);
}

.kp-home .kp-summary-list--verify {
  border-left: var(--border-width-strong) solid var(--color-green-600);
}

.kp-home .kp-summary-list h3 {
  margin-bottom: var(--space-3);
}

.kp-home .kp-summary-list ul {
  margin: 0;
  padding-left: 1.3em;
}

.kp-home .kp-summary-list li + li {
  margin-top: var(--space-3);
}

.kp-home .kp-summary__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.kp-home .kp-summary__cta > * {
  margin: 0;
}

.kp-home .kp-faq {
  background: var(--color-sky-500);
}

.kp-home .kp-faq__intro {
  max-width: 42.5rem;
}

.kp-home .kp-faq-panel {
  max-width: var(--facts-max);
  margin-top: var(--space-5);
}

.kp-home .kp-faq-group + .kp-faq-group {
  margin-top: var(--space-5);
}

.kp-home .kp-faq-group h3 {
  margin-bottom: var(--space-3);
}

.kp-home .kp-faq-item {
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-cream-050);
}

.kp-home .kp-faq-item + .kp-faq-item {
  margin-top: var(--space-3);
}

.kp-home .kp-faq-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

.kp-home .kp-faq-question__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-yellow-400);
  color: var(--color-graphite-900);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.kp-home .kp-faq-question[aria-expanded="true"] .kp-faq-question__icon {
  background: var(--color-green-050);
}

.kp-home .kp-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

.kp-home .kp-faq-answer[data-open="true"] {
  grid-template-rows: 1fr;
}

.kp-home .kp-faq-answer__inner {
  min-height: 0;
  overflow: hidden;
}

.kp-home .kp-faq-answer__copy {
  border-top: 1px solid rgb(38 50 56 / 24%);
  padding: var(--space-4);
}

.kp-home .kp-faq-answer__copy > :last-child {
  margin-bottom: 0;
}

.kp-home .kp-final-cta {
  background: var(--color-green-600);
  color: var(--color-cream-050);
  padding-block: var(--space-8);
}

.kp-home .kp-final-cta :is(h2, p) {
  color: inherit;
}

.kp-home .kp-final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 42.5rem;
  margin-inline: auto;
  text-align: center;
}

.kp-home .kp-final-cta__content > * {
  margin: 0;
}

.kp-home .kp-final-cta__content p {
  max-width: 35rem;
  font-size: var(--font-size-lead);
  font-weight: 600;
  line-height: 1.4;
}

.kp-home .kp-final-cta .kp-play-button {
  min-width: 16.25rem;
}

.kp-home .kp-image-fallback {
  display: none;
  padding: var(--space-4);
  border-top: var(--border);
  background: var(--color-cream-100);
  color: var(--color-text-muted);
  font-weight: 800;
}

.kp-home .kp-media-failed .kp-image-fallback {
  display: block;
}

@media (min-width: 43.75rem) {
  .kp-home .kp-hero__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kp-home .kp-hero__copy,
  .kp-home .kp-hero__media {
    min-width: 0;
  }

  .kp-home .kp-hero__media {
    max-width: none;
  }

  .kp-home .kp-gameplay__layout,
  .kp-home .kp-cats__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kp-home .kp-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .kp-home .kp-section {
    padding-block: var(--space-9);
  }

  .kp-home .kp-hero {
    padding-block: var(--space-8);
  }

  .kp-home .kp-hero__copy,
  .kp-home .kp-review-panel,
  .kp-home .kp-review-atmosphere__panel {
    padding: var(--space-6);
  }

  .kp-home .kp-facts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kp-home .kp-strategy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kp-home .kp-strategy-card:last-child {
    grid-column: 1 / -1;
  }

  .kp-home .kp-audio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56.25rem) {
  .kp-home .kp-strategy__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kp-home .kp-strategy-card:last-child {
    grid-column: auto;
  }
}

@media (min-width: 61.25rem) {
  .kp-home .kp-review-detail__layout {
    grid-template-columns: minmax(0, 3fr) minmax(21.875rem, 2fr);
  }

  .kp-home .kp-progression-card {
    align-self: start;
  }
}

@media (min-width: 68.75rem) {
  .kp-home .kp-hero__layout {
    grid-template-columns: minmax(24.375rem, 5fr) minmax(26.875rem, 7fr);
  }

  .kp-home .kp-hero__copy {
    max-width: 31.25rem;
  }

  .kp-home .kp-gameplay__layout {
    grid-template-columns: minmax(32.5rem, 7fr) minmax(0, 5fr);
  }

  .kp-home .kp-cats__layout {
    grid-template-columns: minmax(24.375rem, 5fr) minmax(28.75rem, 7fr);
  }

  .kp-home .kp-cats__copy {
    max-width: 31.25rem;
  }

  .kp-home .kp-map-shield {
    display: block;
    position: absolute;
    top: 0;
    right: 3rem;
    width: 8rem;
    height: 8rem;
    color: var(--color-green-600);
    transform: rotate(8deg);
  }
}

@media (max-width: 43.6875rem) {
  .kp-home .kp-hero__copy h1 {
    font-size: clamp(2.625rem, 10vw, 3.25rem);
  }

  .kp-home .kp-play-button {
    width: 100%;
  }

  .kp-home .kp-hero__media {
    max-width: 32.5rem;
  }

  .kp-home .kp-final-cta .kp-play-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-home .kp-play-button,
  .kp-home .kp-step,
  .kp-home .kp-strategy-card,
  .kp-home .kp-faq-answer {
    transition: none;
  }
}