/*
 * First Principles Works' editorial rhythm, translated for the standalone
 * Critical Developments home. The construction hero remains deliberately its own.
 */
.home-page-body {
  --fp-ink: #111111;
  --fp-paper: #dedcd6;
  --fp-paper-low: #d4d2cc;
  --fp-paper-high: #f0eee9;
  --fp-magenta: #fe79cb;
  overflow-x: hidden;
}

.home-page-body #products.home-apps {
  padding-block: clamp(5.5rem, 10vw, 9rem);
  border-bottom-color: #aaa79f;
  background: var(--fp-paper);
  color: var(--fp-ink);
}

.home-page-body .home-apps .page-shell {
  width: min(1280px, calc(100vw - clamp(2rem, 8vw, 7rem)));
}

.home-page-body .home-apps .eyebrow,
.home-page-body .home-judgement .eyebrow {
  color: #a52e77;
}

.home-page-body .home-apps h2,
.home-page-body .home-judgement h2 {
  max-width: 15ch;
  margin-bottom: clamp(1.3rem, 2.4vw, 2.2rem);
  color: var(--fp-ink);
  font-size: clamp(3rem, 7.2vw, 6.6rem);
  line-height: .94;
}

.home-page-body .home-apps .section-intro,
.home-page-body .home-judgement .section-intro {
  max-width: 58rem;
  color: #4e4d49;
  font-size: clamp(1.1rem, 1.7vw, 1.34rem);
}

.home-page-body .home-apps .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 7vw, 6rem);
  border: 0;
  background: transparent;
}

.home-page-body .home-apps .product-card {
  --panel-interaction-accent: var(--product-accent);

  grid-column: auto;
  min-height: 22rem;
  padding: clamp(1.7rem, 3.6vw, 3.4rem);
  border: 1px solid color-mix(in srgb, var(--product-accent) 36%, #aaa79f);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--product-accent) 13%, transparent),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--product-accent) 6%, var(--fp-paper-high)),
      var(--fp-paper-high) 68%
    );
  box-shadow:
    0 1px 0 rgb(17 17 17 / 5%),
    0 1rem 2.4rem rgb(17 17 17 / 7%);
}

.home-page-body .home-apps .product-card.das {
  grid-column: 1 / -1;
  min-height: 19rem;
}

.home-page-body .home-apps .product-card::after {
  top: clamp(1.8rem, 3vw, 2.8rem);
  right: auto;
  bottom: clamp(1.8rem, 3vw, 2.8rem);
  left: 0;
  width: 5px;
  height: auto;
  background: var(--product-accent);
  transform: scaleY(.38);
  transform-origin: center;
}

.home-page-body .home-apps .product-card[href]:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--product-accent) 78%, #77736b);
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--product-accent) 19%, transparent),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--product-accent) 10%, #fffdf8),
      #fffdf8 70%
    );
  box-shadow:
    0 1.2rem 2.8rem color-mix(in srgb, var(--product-accent) 13%, transparent),
    0 .2rem .7rem rgb(17 17 17 / 10%);
  transform: translateY(-3px);
}

.home-page-body .home-apps .product-card[href]:is(:hover, :focus-visible)::after {
  transform: scaleY(1);
}

.home-page-body .home-apps .product-card::before {
  right: clamp(1rem, 3vw, 2.8rem);
  bottom: clamp(1rem, 3vw, 2.8rem);
  width: min(46%, 17rem);
  opacity: .2;
  filter: none;
  mix-blend-mode: multiply;
}

.home-page-body .home-apps .product-card[href]:is(:hover, :focus-visible)::before {
  opacity: .28;
  transform: rotate(0deg) scale(1.015);
}

.home-page-body .home-apps .product-card__identity {
  gap: 1.35rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.home-page-body .home-apps .product-card__identity::after {
  background: var(--product-accent);
}

.home-page-body .home-apps .product-card__identity img {
  width: 5.5rem;
  height: 5.5rem;
}

.home-page-body .home-apps .product-card__identity h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
}

.home-page-body .home-apps .product-card p {
  max-width: 34rem;
  color: #55534e;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.home-page-body .home-apps .product-card small {
  color: color-mix(in srgb, var(--product-accent) 76%, #111111);
}

.home-page-body .home-account {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: #111111;
}

.home-page-body .home-account .callout {
  position: relative;
  padding: clamp(2.8rem, 7vw, 6rem) 0;
  border: 0;
  border-top: 1px solid #4e4b4d;
  border-bottom: 1px solid #4e4b4d;
  border-radius: 0;
  background: transparent;
}

.home-page-body .home-account .callout::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(12rem, 28%);
  height: 5px;
  background: var(--fp-magenta);
}

.home-page-body .home-account h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: .94;
}

.home-page-body .home-account .button,
.home-page-body .home-account .button.primary {
  border-radius: var(--control-radius);
}

.home-page-body .home-judgement {
  padding-block: clamp(5.5rem, 10vw, 9rem);
  border-bottom-color: #aaa79f;
  background: var(--fp-paper-low);
  color: var(--fp-ink);
}

@media (max-width: 760px) {
  .home-page-body .home-apps .page-shell {
    width: min(calc(100% - 2rem), 1280px);
  }

  .home-page-body .home-apps .product-grid {
    grid-template-columns: 1fr;
  }

  .home-page-body .home-apps .product-card,
  .home-page-body .home-apps .product-card.das {
    grid-column: auto;
    min-height: 19rem;
  }

  .home-page-body .home-account .callout {
    gap: 2.5rem;
  }
}

@media (max-width: 420px) {
  .home-page-body .home-apps h2,
  .home-page-body .home-judgement h2,
  .home-page-body .home-account h2 {
    font-size: clamp(2.7rem, 14vw, 4.1rem);
  }

  .home-page-body .home-apps .product-card {
    padding: 1.4rem;
  }

  .home-page-body .home-apps .product-card__identity img {
    width: 4.25rem;
    height: 4.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page-body .home-apps .product-card,
  .home-page-body .home-apps .product-card::before,
  .home-page-body .home-apps .product-card::after {
    transition: none;
  }

  .home-page-body .home-apps .product-card[href]:is(:hover, :focus-visible) {
    transform: none;
  }
}