/* WWC Apps · Equine Chiropractic (/equine-chiropractic-app). Sits on horse-business-pages.css and adds only
   the sections this page needs. WWC baseline: #f7f7f7 page, white cards, brand brown only as a solid or an
   outline, no gradients, no blue, no tan fills. */

.app-built,
.app-phone,
.app-owner,
.app-more {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.app-phone h2,
.app-owner h2,
.app-more h2 {
  margin: 0;
  font-family: "Signika", sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.app-phone h2 span,
.app-owner h2 span,
.app-more h2 span {
  color: var(--brown);
}

/* The hero video is the app recording, a little shorter than the business pages' videos. */
.app-hero-video video {
  aspect-ratio: 1280 / 886;
}

/* The white "Why we built it" band starts right under the cost tape here, so the tape gets the
   same room below it as above it instead of its torn edge touching the band's top line. */
.biz-tape-band {
  padding-bottom: 2.6rem;
}

/* Made for the barn: the three problems and what we built */
.app-built {
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.app-built-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.app-built-card {
  padding: 1.6rem;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.app-built-was {
  margin: 0 0 0.4rem;
  justify-self: start;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: var(--brown);
  text-decoration-thickness: 2px;
}

.app-built-card h3 {
  margin: 0;
  font-family: "Signika", sans-serif;
  font-size: 1.45rem;
  line-height: 1.1;
}

.app-built-card p:not(.app-built-was) {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* On your phone */
.app-phone-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.app-phone-video {
  margin: 0;
  display: grid;
  justify-items: center;
}

.app-phone-video video {
  width: min(100%, 440px);
  height: auto;
  aspect-ratio: 1080 / 1350;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--page);
}

.app-phone-copy > p:not(.eyebrow) {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.app-checks {
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

/* 24px checks, the page's one small-icon size, centered on each item's first line. */
.app-checks li {
  padding-left: 2.1rem;
  background: url("/branding/icon-circle-check-brown.svg") 0 0 / 24px 24px no-repeat;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.app-checks strong {
  color: var(--ink);
}

/* Every report */
.app-steps {
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.app-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.app-steps .biz-card {
  background: var(--page);
}

/* What the owner gets */
.app-owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.app-owner-shot {
  margin: 0;
}

.app-owner-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.45);
}

/* Works with everything else: three cards in a row */
.app-behind-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The first of many apps */
.app-more {
  border-top: 1px solid var(--line);
}

.app-more-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.app-more-grid > div > p:not(.eyebrow) {
  margin: 1.1rem 0 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.app-more-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  list-style: none;
}

.app-more-list li {
  padding: 1.1rem 1.2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.app-more-list li.is-soon {
  border-style: dashed;
  background: transparent;
}

.app-more-list li div {
  display: grid;
  gap: 0.15rem;
}

.app-more-list strong {
  font-family: "Signika", sans-serif;
  font-size: 1.15rem;
}

.app-more-list li div span {
  color: var(--muted);
  font-size: 0.85rem;
}

.app-more-list b {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.app-more-list .is-live b {
  background: var(--brown);
  color: #ffffff;
}

.app-more-list .is-soon b {
  border: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 900px) {
  .app-built-grid,
  .app-steps-grid,
  .app-behind-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-phone-grid,
  .app-owner-grid,
  .app-more-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-phone-copy {
    order: -1;
  }
}

/* The app pages list three guides: on desktop they fill the row in three columns instead of
   leaving an empty fourth slot at the end. */
@media (min-width: 1001px) {
  .biz-guides-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones: the "Available now" badge moves under the app's name so the name and description get
   the row's width, and the icon sits beside the name instead of floating mid-row. */
@media (max-width: 560px) {
  .app-more-list li {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 0.6rem;
  }

  .app-more-list b {
    grid-column: 2;
    justify-self: start;
  }
}