/*
  PONTIMUS / - the landing.

  Full-bleed hero over the one use of the video, then a measured column. Every
  rule is scoped under .landing because the page renders into the same #view as
  the terminal.

  The hero copy is IN FLOW, not absolutely positioned. The hero is a column flex
  box that pushes the copy to its bottom edge; the video and the two scrims are
  the only absolute layers and they sit behind it. So the copy can never rise
  into the sticky topbar at 320px, whatever the viewport height does - an
  absolutely positioned block anchored to the top of the hero could.
*/

.landing {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.landing .land-wrap {
  width: min(1180px, 100% - 2rem);
  margin: 0 auto;
}

/* ------------------------------------------------------------------- hero */

.landing .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 74vh, 760px);
  overflow: hidden;
  background: var(--bg);
}
.landing .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.landing .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The plume in the source sits right of centre; keep it there so the
     scrim's darkest band covers the copy on the left. */
  object-position: 62% 50%;
  display: block;
}
.landing .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 7, 0.35), rgba(5, 11, 7, 0.92) 78%, #050b07);
}
.landing .hero-tint {
  position: absolute;
  inset: 0;
  background: rgba(15, 93, 30, 0.35);
  mix-blend-mode: multiply;
}
.landing .hero-copy {
  position: relative;
  z-index: 1;
  padding: 120px 0 44px;
  max-width: 720px;
  margin-left: max(1rem, calc((100% - 1180px) / 2));
}
.landing .eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.landing .hero-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 6.4vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-bright);
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}
.landing .hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
  margin-bottom: 26px;
}
.landing .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.landing .hero-ctas .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
}
.landing .hero-ctas .btn:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------ live strip */

.landing .live-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: -1px;
  background-color: var(--panel);
  background-image: var(--card-wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.landing .strip-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.landing .strip-cell:last-child {
  border-right: 0;
}
.landing .strip-v {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Why a value is an em dash, in the cell, in words. */
.landing .strip-note {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- sections */

.landing .land-section {
  padding: 56px 0 0;
}
.landing .land-h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-bright);
  margin-bottom: 22px;
}
.landing .steps {
  max-width: 76ch;
}
.landing .steps-note {
  max-width: 76ch;
}

.landing .halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.landing .half {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: var(--signature-bg);
  box-shadow: var(--signature-shadow);
  border-color: transparent;
}
.landing .half .mlabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: var(--fs-micro);
}
.landing .half p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  flex: 1 1 auto;
}
.landing .half-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.landing .reads {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  max-width: 900px;
}
.landing .reads li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.landing .reads li svg {
  color: var(--green);
  flex: 0 0 auto;
  margin-top: 4px;
}

/* The shared footer sits at the end of the column with room above it. */
.landing .site-footer {
  margin-top: 64px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .landing .live-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .landing .strip-cell:nth-child(3) {
    border-right: 0;
  }
  .landing .strip-cell:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .landing .hero {
    min-height: clamp(400px, 70vh, 640px);
  }
  .landing .hero-copy {
    padding: 72px 0 32px;
  }
  .landing .halves {
    grid-template-columns: 1fr;
  }
  .landing .land-section {
    padding-top: 44px;
  }
}

@media (max-width: 460px) {
  .landing .live-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing .strip-cell:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
  .landing .strip-cell:nth-child(even) {
    border-right: 0;
  }
  .landing .strip-cell:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .landing .strip-cell:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .landing .strip-v {
    font-size: 16px;
  }
  .landing .hero-ctas .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}