/* DoorInspec+ marketing site. Plain CSS, no script. Every value is a token from tokens.css
   except where a comment says otherwise. Load Inter (400;500;600;700;800) from Google Fonts. */

/* ---------- Button ---------- */
.di-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  min-height: 48px;                       /* proposed: DESIGN.md gives no height */
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.di-btn--primary { background: var(--chalk); color: var(--night); }
.di-btn--secondary { background: transparent; color: var(--chalk); border-color: var(--edge); }
.di-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.di-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Section band ---------- */
.di-band {
  background: var(--night);
  padding-block: clamp(var(--section-min), 11vw, var(--section-max));
  padding-inline: var(--space-3);
  font-family: var(--font-sans);
}
.di-band--raised { background: var(--night-2); }
.di-band--navy { background: var(--navy); }
.di-band__inner { max-width: var(--content-max); margin-inline: auto; }
.di-band__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--chalk-2);
}
.di-band__heading {
  margin: 0; max-width: 20ch;
  font-size: clamp(34px, 3.4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em;
  color: var(--chalk); text-wrap: balance;
}
.di-band__lede {
  margin: var(--space-2) 0 0; max-width: 60ch;
  font-size: clamp(19px, 1.7vw, 21px); font-weight: 400; line-height: 1.5; color: var(--chalk-2);
}
.di-band__body {
  margin: var(--space-2) 0 0; max-width: 62ch;
  font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--chalk-2);
}

/* ---------- Proof strip ---------- */
.di-proof {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  max-width: var(--content-max); margin-inline: auto;
  border-top: 1px solid var(--edge);
  font-family: var(--font-sans);
}
.di-proof__item { padding: var(--space-3); border-left: 1px solid var(--edge); }
.di-proof__item:first-child { padding-left: 0; border-left: 0; }
.di-proof__statement {
  margin: 0;
  font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--chalk);
  text-wrap: balance;
}
.di-proof__detail {
  margin: var(--space-1) 0 0;
  font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--chalk-2);
}
@media (max-width: 640px) {
  .di-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .di-proof__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .di-proof__item:nth-child(n+3) { border-top: 1px solid var(--edge); }
}

/* ---------- Screenshot stage ---------- */
.di-stage {
  position: relative;
  max-width: var(--content-max); margin-inline: auto;
  perspective: 2000px;                    /* proposed: DESIGN.md names perspective, gives no figure */
  perspective-origin: 50% 100%;
  font-family: var(--font-sans);
}
.di-stage__screens {
  position: relative;
  aspect-ratio: 2 / 1;                    /* fits two 1440 x 710 screens with the overlap below */
  z-index: 1;
  transform: rotateX(26deg) rotateZ(-6deg);   /* proposed angles: the top recedes and the right side lifts */
  transform-origin: 30% 100%;
}
.di-stage__screen {
  position: absolute; display: block;
  width: 80%; height: auto;
  border-radius: var(--radius-screen);
  box-shadow: var(--shadow-screen);
}
.di-stage__screen--lead { left: 0; top: 20%; z-index: 2; }
.di-stage__screen--behind { right: 0; top: 0; z-index: 1; }
/* The one glow on the site: a single soft radial of blue behind the hero stage. One per page. */
.di-stage__glow {
  position: absolute; z-index: 0; pointer-events: none; inset: -8% 8% 10% 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(29, 121, 255, .38), rgba(29, 121, 255, 0) 72%);
}
/* The fade into the ground. Set --di-ground to the band's ground colour token. */
.di-stage::after {
  content: ""; position: absolute; inset: auto calc(var(--space-5) * -1) -16%; height: 54%; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--di-ground, var(--night)) 92%);
}
.di-stage__caption {
  margin: var(--space-2) 0 0;
  font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--chalk-2);
}
@media (max-width: 1000px) {
  /* The stage flattens: perspective off, screens scroll sideways. */
  .di-stage { perspective: none; }
  .di-stage__screens {
    transform: none; aspect-ratio: auto;
    display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
  }
  .di-stage__screen { position: static; flex: 0 0 88%; width: 88%; scroll-snap-align: start; }
  .di-stage::after { display: none; }
}