/* ==========================================================================
   DiveCohorts landing page.

   The palette, type and component shapes are lifted from the web app's
   css/styles.css so the two read as one product — someone following the
   "Open the app" button should not feel they have gone somewhere else.
   Kept as its own file rather than importing the app's: the app's sheet
   is bundled and content-hashed at build time, and the landing page has
   no build step.
   ========================================================================== */

:root {
  --dc-teal-900: #0e2a32;
  --dc-teal-700: #0b6e7f;
  --dc-teal-500: #14879a;
  --dc-teal-100: #e3f0f1;
  --dc-coral: #ff6f59;
  --dc-coral-600: #e5573f;
  --dc-slate: #5c7079;
  --dc-mist: #f2f6f6;
  --dc-border: #dce6e6;

  --bs-primary: var(--dc-teal-700);
  --bs-primary-rgb: 11, 110, 127;
  --bs-body-bg: var(--dc-mist);
  --bs-body-color: var(--dc-teal-900);
  --bs-border-color: var(--dc-border);
  --bs-link-color: var(--dc-teal-700);
  --bs-link-hover-color: var(--dc-teal-900);

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background-color: var(--dc-mist);
}

/* Exactly the app's rule. h3 is deliberately not in here: the app's
   card titles are <h3 class="h6">, set in Inter, and adding h3 would
   make this page's cards serif where the app's are not. */
h1, h2, .display-heading {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--dc-teal-900);
}

/* The app's signature element: a thin "depth gauge" tick rule under the
   navbar. Carried over verbatim — it is the one piece of decoration the
   app has, so it is the piece that makes the two look related. */
.depth-rule {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--dc-teal-700) 0px,
    var(--dc-teal-700) 2px,
    transparent 2px,
    transparent 10px
  );
  opacity: 0.35;
}

/* ---- Navbar: same navy as the app's ---- */
.navbar-dc {
  background-color: var(--dc-teal-900);
}
.navbar-dc .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500;
}
.navbar-dc .nav-link:hover {
  color: #fff !important;
}

/* ---- Hero ----
   A deep-water gradient rather than a photo backdrop: the photo sits
   beside the words instead, so the type never has to fight it for
   contrast. */
.hero {
  background: linear-gradient(160deg, var(--dc-teal-900) 0%, var(--dc-teal-700) 100%);
  color: #fff;
}
.hero h1,
.hero h2 {
  color: #fff;
}
.hero .lead {
  color: rgba(255, 255, 255, 0.85);
}
/* Capped and cropped. The source is a tall portrait frame; left to its
   natural ratio it makes the hero taller than the viewport on its own,
   so the first thing a visitor sees is a photo with the pitch scrolled
   off the bottom. */
.hero-photo {
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(14, 42, 50, 0.45);
  width: 100%;
  max-width: 460px;
  height: 380px;
  object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 991.98px) {
  .hero-photo {
    height: 260px;
  }
}

/* ---- Buttons: the app's coral accent for the primary action ---- */
.btn-accent {
  background-color: var(--dc-coral);
  border-color: var(--dc-coral);
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--dc-coral-600);
  border-color: var(--dc-coral-600);
  color: #fff;
}
.btn-outline-light-dc {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-outline-light-dc:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ---- Feature cards: the app's card shape ---- */
.card {
  border: 1px solid var(--dc-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(14, 42, 50, 0.04);
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.65rem;
  background-color: var(--dc-teal-100);
  color: var(--dc-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.text-slate { color: var(--dc-slate) !important; }

/* ---- Footer ---- */
.landing-footer {
  background-color: var(--dc-teal-900);
  color: rgba(255, 255, 255, 0.72);
}
.landing-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.landing-footer a:hover {
  color: #fff;
}