/* ===================================================
   earthity — home.css: rules only the home page (index.html) uses.
   Load after base.css. Split from the former site.css (2026-09-11).
   =================================================== */
/* ===== SOLUTIONS CAROUSEL — notes in base.css ===== */

.solutions-carousel-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.solutions-carousel-btn {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1.5px solid #161616;
  cursor: pointer;
  color: #161616;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.solutions-carousel-btn:hover:not(:disabled) {
  background-color: #f4f4f4;
}

.solutions-carousel-btn:disabled {
  border-color: #c6c6c6;
  color: #c6c6c6;
  cursor: not-allowed;
}

.solutions-card-image {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid #161616;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solutions-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== TRUST BAND — auto-scrolling carousel with fade edges — notes in base.css ===== */

.trust-band-wrap { background: #ffffff; }

.trust-band {
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.trust-logo {
  height: auto;
  width: auto;
  /* Bounding box: each logo scales to fit within these bounds
     while preserving aspect. Box width = logo content width
     (no min-width padding) so flex gap = edge-to-edge spacing. */
  max-height: 32px;
  max-width: 140px;
  display: block;
  object-fit: contain;
  /* Unify the trust band: grey out colored logos, dim slightly. */
  filter: grayscale(100%);
  opacity: 0.65;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.trust-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Larger variant for logos that read small at the default
   bounding box (typically icon-mark logos). */
.trust-logo--lg {
  max-height: 48px;
  max-width: 180px;
}


/* ===================================================
   CUSTOMER STORIES — accordion
   ---------------------------------------------------
   Vertical list of expandable customer entries on a
   dark background. Exactly one entry is expanded at
   a time; the first is open by default. Expand/
   collapse animates via CSS max-height.
   =================================================== */

.customer-stories {
  padding: 64px max(32px, calc((100% - 1376px) / 2));
  background: #f5f1ea;
  box-sizing: border-box;
}

.customer-stories-heading {
  margin-bottom: 48px;
}

.customer-stories-list {
  width: 100%;
}

.customer-story-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.customer-story-headline {
  flex: 1;
  margin: 0;
}

.customer-story-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #161616;
}

.customer-story-toggle-minus { display: none; }
.customer-story.is-open .customer-story-toggle-plus { display: none; }
.customer-story.is-open .customer-story-toggle-minus { display: block; }

.customer-story-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.customer-story.is-open .customer-story-content {
  max-height: calc(min(480px, 55vh) + 110px);
}

.customer-story-content-inner {
  padding: 24px 0 32px;
}

.customer-story-image {
  width: 100%;
  height: min(480px, 55vh);
  object-fit: cover;
  display: block;
}

.customer-story-image--top {
  object-position: top;
}

.customer-story-stats {
  display: flex;
  align-items: stretch;
  margin-top: 24px;
}

.customer-story-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  padding: 0 24px;
}

.customer-story-stat:first-child {
  padding-left: 0;
}

.customer-story-stat:last-child {
  padding-right: 0;
}

.customer-story-stat + .customer-story-stat {
  border-left: 1px solid #c6c6c6;
}

.customer-story-stat-number {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #161616;
  flex-shrink: 0;
}

.customer-story-stat-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #6f6f6f;
}
/* ===== RESPONSIVE — notes in base.css ===== */

/* ──── Tablet (≤ 1024px) ──── */
@media (max-width: 1024px) {

  /* Customer stories tighten */
  .customer-stories {
    padding: 48px 24px;
    min-height: 0;
  }
  .customer-story-image {
    height: 360px;
  }
  /* Match max-height to tablet image + padding/stats so transition
     peak doesn't exceed natural content (= no page expansion). */
  .customer-story.is-open .customer-story-content {
    max-height: 470px;
  }

  /* Hero display heading scales */
  .wf-display {
    font-size: 40px;
  }

  /* Outpost section grid (2 cols × 3 rows) — convert to flex column
     and reorder so each column's items stay together. */
  .outpost__grid {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Stacked: drop the badge into the flow between the host group
     (orders 1–3) and operator group (orders 5–7). */
  .outpost__grid > .outpost__or {
    position: static;
    transform: none;
    order: 4;
    align-self: center;
    margin: 12px auto;
  }
  .outpost__grid > *:nth-child(1) { order: 1; }
  .outpost__grid > *:nth-child(3) { order: 2; }
  .outpost__grid > *:nth-child(5) { order: 3; }
  .outpost__grid > *:nth-child(2) { order: 5; }
  .outpost__grid > *:nth-child(4) { order: 6; }
  .outpost__grid > *:nth-child(6) { order: 7; }
  /* Center the CTA buttons in the row-3 cells */
  .outpost__grid > *:nth-child(5),
  .outpost__grid > *:nth-child(6) {
    text-align: center;
  }
}

/* ──── Mobile (≤ 640px) ──── */
@media (max-width: 640px) {

  /* Hero display heading down further */
  .wf-display {
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  /* Solutions section heading flex stacks; arrows pinned to right */
  .solutions__header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #solutions .solutions-carousel-controls {
    align-self: flex-end;
  }

  /* Customer stories: tighter */
  .customer-stories {
    padding: 32px 16px;
  }
  .customer-story-image {
    height: 220px;
  }
  /* Stats stack vertically */
  .customer-story-stats {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .customer-story-stat {
    padding: 0 !important;
  }
  .customer-story-stat + .customer-story-stat {
    border-left: none;
    border-top: 1px solid #c6c6c6;
    padding-top: 12px;
  }
  /* Tight max-height matched to a fixed content-inner min-height
     so the section sizes naturally without any min-height waste:
     - All cards reserve the same content height (440px).
     - max-height matches, so transitions don't peak.
     - Section height is just bars + 440 + heading + padding,
       no padding-bottom waste. */
  .customer-story.is-open .customer-story-content {
    max-height: 440px;
  }
  .customer-story.is-open .customer-story-content-inner {
    min-height: 440px;
  }
  .customer-stories {
    min-height: 0 !important;
  }
}
/* ===== Moved from inline CSS block in index.html (CSP migration, 2026-05-03). — notes in base.css ===== */

  /* Text stubs */
  .wf-display { font-family: 'Manrope'; font-size: 52px; font-weight: 300; line-height: 1.12; color: #161616; }
  .wf-h2-inv { font-size: 30px; font-weight: 600; color: #ffffff; }
  .wf-h3 { font-size: 22px; font-weight: 600; color: #161616; }
  .wf-body { font-size: 15px; color: #525252; line-height: 1.5; }
  .wf-btn-ghost-inv { background: transparent; color: #78a9ff; font-size: 16px; padding: 0 4px; height: 32px; display: inline-flex; align-items: center; border: none; cursor: default; }
  a.wf-btn-ghost-inv { text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
  a.wf-btn-ghost-inv:hover { color: #a6c8ff; }
  body[data-fidelity="hifi"] .wf-h2-inv { font-size: 24px; font-weight: 600; }
  body[data-fidelity="hifi"] .wf-h3 { font-size: 18px; font-weight: 600; }
  body[data-fidelity="hifi"] .wf-body { font-size: 14px; }
/* ===== HERO — copy left, rotating-earth visual right. — notes in base.css ===== */
.hero__display { margin: 0 0 24px; }
.hero__body {
  margin-bottom: 40px;
  max-width: 480px;
  font-size: 17px;
}
.hero__earth { display: block; }


/* ===================================================
   OUTPOST — 2x3 product tile grid: intro tiles,
   imagery, CTAs. Light + dark column variants.
   =================================================== */
.outpost__header { margin-bottom: 40px; }
.outpost__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 2px;
  row-gap: 0;
}
.outpost__tile--light { background: #ffffff; }
.outpost__tile--dark  { background: #dde6f0; }
.outpost__tile--top    { padding: 40px 40px 0; }
.outpost__tile--mid    { padding: 32px 40px 0; display: flex; flex-direction: column; }
.scale-dash__card:last-child { flex: 1; }
.outpost__tile--bottom { padding: 32px 40px 40px; text-align: center; }
.outpost__icon { margin-bottom: 20px; }
.outpost__tile-title { margin-bottom: 8px; }

/* "OR" badge between the host and operator offerings. It's the last grid
   child; on desktop it's taken out of grid flow and centred on the vertical
   seam (full column height). When the columns stack (<1024px) it becomes a
   flow item slotted between the two groups via flex order. */
.outpost__grid { position: relative; }
.outpost__or {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle, 50%);
  background: #eef2f6;
  border: 1px solid #cdd6e0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #161616;
  pointer-events: none;
}


/* ===================================================
   DPI — Drone Program Integration teaser banner.
   Dark counterpart to outpost; single CTA.
   =================================================== */
.dpi {
  padding: 64px max(32px, calc((100% - 1376px) / 2));
  background: #161616;
}
.dpi__header { margin-bottom: 32px; }

/* Dark-bg modifier for section heading secondary copy. */
.section-heading__secondary--inv { color: #c6c6c6; }
/* ===== SOLUTIONS — section wrapper. Carousel rules already — notes in base.css ===== */
.solutions__header {
  margin-bottom: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
/* ===== FOOTER — dark, 4-column links (logo · Products · Resources · — notes in base.css ===== */


/* ──── Short viewport (≤ 900px tall) — 13" laptop fit ──── */
@media (max-height: 900px) {
  .outpost__header {
    margin-bottom: 24px;
  }
  .outpost__tile--top    { padding: 28px 32px 0; }
  .outpost__tile--mid    { padding: 20px 32px 0; }
  .outpost__tile--bottom { padding: 20px 32px 28px; }
  .outpost__icon { margin-bottom: 12px; }
}

/* ===================================================
   Outpost — host earnings dashboard widget (tile row 2 left)
   =================================================== */
.host-dash__chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f0f0f0;
  border-bottom: 1px solid #d8d8d8;
  min-height: 24px;
  box-sizing: border-box;
}
.host-dash__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.host-dash__dot--red    { background: #ff5f57; }
.host-dash__dot--yellow { background: #febc2e; }
.host-dash__dot--green  { background: #28c840; }
.host-dash__nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  margin-right: 4px;
  flex-shrink: 0;
}
.host-dash__url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  padding: 2px 8px 2px 10px;
  font-size: 10px;
  line-height: 1.3;
  color: #525252;
  white-space: nowrap;
  width: 220px;
  max-width: 60%;
  cursor: pointer;
  text-decoration: none;
}
.host-dash__url-lock { flex-shrink: 0; }
.host-dash__url-text {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.host-dash__url-refresh { flex-shrink: 0; }
.host-dash__hero {
  text-align: center;
  padding: 40px 20px 32px;
}
.host-dash__amount {
  font-size: 38px;
  font-weight: 700;
  color: #003B1F;
  letter-spacing: -1.2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.host-dash__sub {
  font-size: 10px;
  color: #5a8085;
}
.host-dash__panel {
  margin: 0 48px 24px;
  padding: 0 14px;
  border: 1px solid #e8edee;
  border-radius: 8px;
  overflow: hidden;
}
.host-dash__head {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 500;
  color: #0a3622;
  border-bottom: 1px solid #e8edee;
}
.host-dash__list {
  will-change: transform;
}
.host-dash__list.is-advancing {
  transition: transform 0.6s ease-in-out;
}

/* ===================================================
   Outpost — scale operations dashboard widget (tile row 2 right)
   =================================================== */
.scale-dash__card {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  padding: 14px 16px;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.scale-dash__label {
  font-size: 11px;
  color: #7a8090;
  margin-bottom: 4px;
}
.scale-dash__value {
  font-size: 26px;
  font-weight: 700;
  color: #1a2235;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.scale-dash__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 90px;
  margin-top: 8px;
}
.scale-dash__plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.scale-dash__plan-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
}
.scale-dash__plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.scale-dash__plan-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a2235;
  line-height: 1.3;
}
.scale-dash__plan-billing {
  font-size: 11px;
  color: #7a8090;
}
.scale-dash__metric-label {
  font-size: 12px;
  font-weight: 700;
  color: #1a2235;
  margin-bottom: 2px;
}
.scale-dash__metric-value {
  font-size: 11px;
  color: #7a8090;
  margin-bottom: 14px;
}
.scale-dash__meter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 8px;
}
.scale-dash__meter {
  height: 8px;
  background: #eef0f3;
  border-radius: 999px;
  overflow: hidden;
}
.scale-dash__meter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #FFB46B 0%, #FF7A18 100%);
  border-radius: 999px;
}

/* ── Dashboard widgets — mobile (≤1024px, tiles stack full-width) ── */
@media (max-width: 1024px) {
  .host-dash__amount { font-size: 32px; }
  .host-dash__panel  { margin: 0 16px 16px; }
  .host-dash__hero   { padding: 28px 20px 22px; }
  .scale-dash__value { font-size: 20px; }
  .scale-dash__bars  { height: 60px; gap: 3px; }
  .scale-dash__card  { max-width: none; }
}