.crewcalc-hero {
  min-height: 47rem;
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.crewcalc-hero h1 {
  max-width: 11ch;
}

.crewcalc-hero .lede {
  max-width: 62rem;
  font-size: clamp(1.1rem, 2vw, 1.38rem);
}

.crewcalc-feature-band {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(212, 162, 74, 0.08), transparent 27rem),
    linear-gradient(180deg, var(--deep), var(--navy));
  border-bottom: 1px solid var(--line);
}

.crewcalc-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.2rem;
}

.crewcalc-feature {
  min-height: 25rem;
  padding: clamp(2rem, 4vw, 3.3rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(11, 26, 41, 0.68);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.crewcalc-feature::before {
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: -4rem;
  right: -4rem;
  border: 1px solid rgba(212, 162, 74, 0.24);
  border-radius: 50%;
  content: "";
}

.crewcalc-feature:nth-child(1),
.crewcalc-feature:nth-child(4) {
  grid-column: span 7;
}

.crewcalc-feature:nth-child(2),
.crewcalc-feature:nth-child(3) {
  grid-column: span 5;
}

.crewcalc-feature:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 21rem;
  background:
    radial-gradient(circle at 88% 24%, rgba(212, 162, 74, 0.12), transparent 24rem),
    var(--panel);
  border-color: var(--line-2);
}

.crewcalc-feature h2 {
  max-width: 15ch;
  font-size: clamp(2rem, 3.8vw, 3rem);
}

.crewcalc-feature p {
  max-width: 46rem;
  margin-top: 1.3rem;
  color: var(--slate);
  font-size: 1.03rem;
}

.crewcalc-availability {
  padding: clamp(5.5rem, 10vw, 9rem) 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.crewcalc-availability-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(2rem, 8vw, 8rem);
}

.crewcalc-availability h2 {
  max-width: 9ch;
}

.crewcalc-bridge h2 {
  max-width: 18ch;
}

.crewcalc-bridge .lede {
  max-width: 60rem;
}

.crewcalc-content-footer {
  padding: 2.2rem 0;
  background: var(--navy);
  border-top: 1px solid var(--line);
}

.crewcalc-content-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.crewcalc-content-footer p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.crewcalc-content-footer ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem 1.4rem;
  list-style: none;
}

.crewcalc-content-footer a {
  color: var(--slate);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration-color: rgba(212, 162, 74, 0.55);
}

.crewcalc-content-footer a:hover {
  color: var(--ink);
}

@media (max-width: 800px) {
  .crewcalc-feature {
    grid-column: 1 / -1 !important;
    min-height: auto;
  }

  .crewcalc-availability-grid {
    grid-template-columns: 1fr;
  }

  .crewcalc-availability h2 {
    max-width: none;
  }

  .crewcalc-content-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .crewcalc-content-footer ul {
    justify-content: flex-start;
  }
}

@media print {
  .crewcalc-feature-band,
  .crewcalc-availability,
  .crewcalc-content-footer {
    color: #10202f;
    background: #fff;
  }

  .crewcalc-feature {
    min-height: auto;
    color: #10202f;
    background: #fff;
    break-inside: avoid;
  }

  .crewcalc-feature p,
  .crewcalc-availability .lede,
  .crewcalc-content-footer p,
  .crewcalc-content-footer a {
    color: #3d5165;
  }
}

/* Product proof — the synthetic-data app screens (provenance in the page
   markup). Framed like instruments: quiet border, no chrome. */
.crewcalc-proof {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--line);
}

.crewcalc-proof-note {
  max-width: 46rem;
  margin: 0.8rem 0 2.4rem;
  color: var(--slate);
}

.crewcalc-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 2rem;
}

.crewcalc-proof figure {
  margin: 0;
}

.crewcalc-proof img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.crewcalc-proof figcaption {
  margin-top: 0.9rem;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.5;
}