/*
  DroneHQ Public Website CSS

  Scope:
    Public marketing website only.

  Design basis:
    Uses the active DroneHQ theme tokens from /static/styles.css.
*/

.public-site {
  --public-max: 1180px;
  --public-header-height: 76px;
  overflow-x: hidden;
}

.public-site a {
  color: inherit;
  text-decoration: none;
}

.public-container {
  width: min(var(--public-max), calc(100% - 48px));
  margin-inline: auto;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(105, 168, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(4, 15, 31, 0.95), rgba(8, 22, 47, 0.90)),
    var(--header);
  backdrop-filter: blur(18px);
}

.public-header.is-scrolled {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.public-header-inner {
  min-height: var(--public-header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.public-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(77, 184, 255, 0.28));
}

.public-brand-text {
  display: grid;
  line-height: 1;
}

.public-brand-text strong {
  color: var(--text-strong);
  font-size: 1.42rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.public-brand-text strong span {
  color: #168bff;
}

.public-brand-text small {
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.public-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  color: var(--muted-strong);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.public-nav a {
  padding: 10px 2px;
}

.public-nav a:hover,
.public-nav a:focus-visible {
  color: var(--primary);
}

.public-actions,
.public-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.public-button-primary {
  color: #ffffff;
  border-color: rgba(56, 153, 255, 0.72);
  background: linear-gradient(135deg, #0b6ff6, #1a94ff);
  box-shadow: 0 14px 28px rgba(14, 115, 255, 0.24);
}

.public-button-primary:hover,
.public-button-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(14, 115, 255, 0.32);
}

.public-button-secondary {
  color: var(--text-strong);
  background: rgba(10, 28, 54, 0.64);
}

.public-button-secondary:hover,
.public-button-secondary:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.public-button-large {
  min-height: 54px;
  padding-inline: 24px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.public-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--public-header-height));
  padding: 72px 0 42px;
  background:
    radial-gradient(circle at 72% 34%, rgba(23, 128, 255, 0.34), transparent 32%),
    radial-gradient(circle at 83% 16%, rgba(86, 109, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(3, 12, 27, 0.96), rgba(7, 22, 45, 0.94) 52%, rgba(4, 13, 29, 0.98));
}

.public-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 184, 255, 0.44), transparent);
}

.public-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 40px;
}

.public-eyebrow {
  margin: 0 0 14px;
  color: #23b8ff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.public-hero h1 {
  margin: 0;
  max-width: 680px;
  color: var(--text-strong);
  font-size: clamp(2.7rem, 5.4vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.public-hero h1 span {
  color: #168bff;
}

.public-hero-lead {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--muted-strong);
  font-size: 1.08rem;
  line-height: 1.65;
}

.public-hero-actions {
  margin-top: 30px;
}

.public-proof-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 14px;
}

.public-proof-row div {
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid rgba(105, 168, 255, 0.20);
  border-radius: 14px;
  background: rgba(10, 28, 54, 0.42);
}

.public-proof-row strong,
.public-proof-row span {
  display: block;
}

.public-proof-row strong {
  color: var(--text-strong);
  font-size: 0.9rem;
}

.public-proof-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.public-hero-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.public-drone-glow {
  position: absolute;
  width: min(620px, 88%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(37, 145, 255, 0.50), rgba(13, 61, 130, 0.12) 48%, transparent 70%);
  filter: blur(8px);
}

.public-drone-image {
  position: relative;
  z-index: 1;
  width: min(720px, 110%);
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.42));
}

.public-dashboard-section,
.public-section {
  padding: 62px 0;
}

.public-dashboard-section {
  background:
    radial-gradient(circle at 25% 10%, rgba(77, 184, 255, 0.10), transparent 30%),
    rgba(3, 11, 24, 0.96);
}

.public-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(310px, 0.78fr);
  gap: 34px;
  align-items: center;
}

.public-dashboard-card {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  min-height: 398px;
  overflow: hidden;
  border: 1px solid rgba(105, 168, 255, 0.24);
  border-radius: 18px;
  background: rgba(11, 31, 59, 0.68);
  box-shadow: var(--shadow);
}

.public-dashboard-sidebar {
  padding: 22px 16px;
  display: grid;
  align-content: start;
  gap: 9px;
  border-right: 1px solid rgba(105, 168, 255, 0.18);
  background: rgba(4, 15, 31, 0.72);
}

.public-mini-logo {
  margin-bottom: 14px;
  color: var(--text-strong);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.public-mini-logo span {
  color: #168bff;
}

.public-dashboard-sidebar span {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.public-dashboard-sidebar span.active {
  color: #ffffff;
  background: linear-gradient(135deg, #0b6ff6, #1a94ff);
}

.public-dashboard-main {
  padding: 24px;
}

.public-dashboard-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-strong);
}

.public-dashboard-title span {
  color: var(--muted);
  font-size: 0.82rem;
}

.public-metrics {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.public-metrics div,
.public-table-card,
.public-feature-grid article,
.public-cta-card {
  border: 1px solid rgba(105, 168, 255, 0.20);
  border-radius: 14px;
  background: rgba(13, 35, 66, 0.72);
}

.public-metrics div {
  min-height: 96px;
  padding: 14px;
}

.public-metrics span,
.public-metrics small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.public-metrics strong {
  display: block;
  margin-top: 8px;
  color: var(--text-strong);
  font-size: 1.55rem;
}

.public-metrics small {
  color: var(--success);
}

.public-table-card {
  margin-top: 14px;
  padding: 16px;
}

.public-table-row {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1.3fr 0.6fr;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(105, 168, 255, 0.12);
  color: var(--muted-strong);
  font-size: 0.8rem;
}

.public-insight-copy h2,
.public-section-heading h2,
.public-cta h2,
.public-page-hero h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2rem, 3.2vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.public-insight-copy p,
.public-feature-grid p,
.public-cta p,
.public-page-hero p,
.public-footer p {
  color: var(--muted-strong);
}

.public-check-list {
  display: grid;
  gap: 13px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.public-check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
}

.public-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #ffffff;
  background: #168bff;
  font-size: 0.75rem;
  font-weight: 900;
}

.public-section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.public-feature-grid article {
  min-height: 156px;
  padding: 20px 18px;
  text-align: center;
}

.public-feature-grid article span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  color: var(--primary);
  border: 1px solid rgba(77, 184, 255, 0.34);
  background: rgba(39, 168, 255, 0.10);
  font-size: 1.35rem;
}

.public-feature-grid article .public-feature-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.public-feature-grid h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
}

.public-feature-grid p {
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

.public-cta {
  padding: 20px 0 56px;
}

.public-cta-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
}

.public-cta-card img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.public-cta h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
}

.public-cta p {
  margin: 8px 0 0;
}

.public-footer {
  padding: 34px 0;
  border-top: 1px solid rgba(105, 168, 255, 0.16);
  background: rgba(4, 15, 31, 0.88);
}

.public-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr;
  gap: 32px;
}

.public-footer-grid > div {
  display: grid;
  align-content: start;
  gap: 9px;
}

.public-footer a {
  color: var(--muted-strong);
}

.public-footer a:hover,
.public-footer a:focus-visible {
  color: var(--primary);
}

.public-brand-footer img {
  width: 44px;
  height: 44px;
}

.public-page-hero {
  min-height: 62vh;
  padding: 110px 0;
  display: grid;
  align-items: center;
}

.public-page-hero p {
  max-width: 720px;
}

@media (max-width: 1020px) {
  .public-header-inner {
    grid-template-columns: 1fr auto;
  }

  .public-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 14px;
  }

  .public-hero-grid,
  .public-split-grid {
    grid-template-columns: 1fr;
  }

  .public-hero-visual {
    min-height: 360px;
  }

  .public-proof-row,
  .public-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .public-dashboard-card {
    grid-template-columns: 1fr;
  }

  .public-dashboard-sidebar {
    grid-template-columns: repeat(3, auto);
    border-right: 0;
    border-bottom: 1px solid rgba(105, 168, 255, 0.18);
  }

  .public-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .public-cta-card,
  .public-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .public-container {
    width: min(100% - 28px, var(--public-max));
  }

  .public-header-inner,
  .public-actions,
  .public-hero-actions {
    align-items: stretch;
  }

  .public-actions {
    display: none;
  }

  .public-hero {
    padding-top: 48px;
  }

  .public-proof-row,
  .public-feature-grid,
  .public-metrics {
    grid-template-columns: 1fr;
  }

  .public-table-row {
    grid-template-columns: 1fr;
  }

  .public-brand-text strong {
    font-size: 1.1rem;
  }
}
/* DRONEHQ_PUBLIC_HEADER_POLISH_V2_START */

/*
  Header polish V2
  Scope: public website only.
  Goals:
    - move brand/header content closer to the left edge
    - match DroneHQ app button polish more closely
    - sharpen small all-caps nav/brand text
    - tighten header vertical spacing
*/

.public-site {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  --public-header-height: 68px;
}

.public-header {
  border-bottom-color: rgba(105, 168, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(4, 15, 31, 0.985), rgba(6, 19, 38, 0.965)),
    var(--header);
}

.public-header .public-container {
  width: min(1480px, calc(100% - 52px));
}

.public-header-inner {
  min-height: var(--public-header-height);
  grid-template-columns: 300px 1fr auto;
  gap: 22px;
}

.public-brand {
  gap: 11px;
}

.public-brand img {
  width: 43px;
  height: 43px;
  filter:
    drop-shadow(0 0 10px rgba(77, 184, 255, 0.20))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.24));
}

.public-brand-text strong {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 0.95;
}

.public-brand-text small {
  margin-top: 5px;
  color: rgba(245, 248, 255, 0.84);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.265em;
  line-height: 1.1;
}

.public-nav {
  gap: 28px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  color: rgba(245, 248, 255, 0.82);
}

.public-nav a {
  position: relative;
  padding: 12px 0;
  text-shadow: none;
}

.public-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #168bff, #4db8ff);
  opacity: 0;
  transform: scaleX(0.72);
  transition: opacity 150ms ease, transform 150ms ease;
}

.public-nav a:hover::after,
.public-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.public-actions {
  gap: 10px;
}

.public-actions .public-button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: -0.005em;
}

.public-actions .public-button-secondary {
  color: #f5f8ff;
  border-color: rgba(105, 168, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(16, 43, 82, 0.78), rgba(10, 28, 54, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.public-actions .public-button-primary,
.public-button-primary {
  border-color: rgba(77, 184, 255, 0.66);
  background:
    linear-gradient(180deg, #43b9ff 0%, #168bff 42%, #0b6fb8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px rgba(22, 139, 255, 0.27);
}

.public-actions .public-button-primary:hover,
.public-actions .public-button-primary:focus-visible,
.public-button-primary:hover,
.public-button-primary:focus-visible {
  border-color: rgba(155, 215, 255, 0.88);
  background:
    linear-gradient(180deg, #62c6ff 0%, #1d98ff 44%, #0c78c8 100%);
}

.public-hero {
  padding-top: 64px;
}

.public-hero-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 56px;
}

.public-eyebrow {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.public-hero h1 {
  font-weight: 900;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

.public-hero-lead {
  color: rgba(226, 238, 255, 0.90);
  font-size: 1.01rem;
  line-height: 1.62;
}

.public-proof-row div {
  border-color: rgba(105, 168, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(13, 35, 66, 0.76), rgba(9, 27, 54, 0.66));
}

.public-proof-row strong {
  font-weight: 900;
}

@media (min-width: 1400px) {
  .public-header .public-container {
    width: min(1500px, calc(100% - 64px));
  }
}

@media (max-width: 1020px) {
  .public-header-inner {
    grid-template-columns: 1fr auto;
  }

  .public-header .public-container {
    width: min(100% - 32px, var(--public-max));
  }
}

/* DRONEHQ_PUBLIC_HEADER_POLISH_V2_END */
/* DRONEHQ_PUBLIC_HERO_ALIGNMENT_TYPOGRAPHY_V3_START */

/*
  Hero alignment + typography V3
  Scope: public website only.

  Goals:
    - align hero text with the public header/logo content
    - reduce oversized headline weight/width
    - make headline feel closer to DroneHQ app/login typography
    - keep the page dark/navy and compact
*/

.public-site {
  --public-max: 1500px;
}

/* Use one consistent left edge for header and hero content. */
.public-container,
.public-header .public-container {
  width: min(var(--public-max), calc(100% - 96px));
}

.public-header-inner {
  grid-template-columns: 330px 1fr auto;
}

/* Pull hero up and keep it aligned with the brand, not centered inside a narrower column. */
.public-hero {
  padding-top: 58px;
}

.public-hero-grid {
  grid-template-columns: minmax(500px, 0.82fr) minmax(520px, 1.18fr);
  gap: 76px;
  align-items: start;
}

.public-hero-copy {
  max-width: 560px;
  padding-top: 4px;
}

.public-eyebrow {
  margin-bottom: 18px;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: #23b8ff;
}

/* Previous headline was too wide/heavy. This is closer to the DroneHQ login/app weight. */
.public-hero h1 {
  max-width: 540px;
  font-size: clamp(3.15rem, 4.85vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.062em;
  font-weight: 800;
  text-wrap: balance;
}

.public-hero h1 span {
  display: inline-block;
  color: #168bff;
  font-weight: 800;
}

.public-hero-lead {
  max-width: 520px;
  margin-top: 18px;
  font-size: 0.98rem;
  line-height: 1.65;
  font-weight: 500;
  color: rgba(226, 238, 255, 0.92);
}

.public-hero-actions {
  margin-top: 26px;
}

.public-hero-actions .public-button {
  min-height: 50px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 850;
}

.public-proof-row {
  max-width: 520px;
  margin-top: 30px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.public-proof-row div {
  min-height: 92px;
  padding: 14px 14px;
}

.public-proof-row strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.public-proof-row span {
  font-size: 0.73rem;
  line-height: 1.35;
}

/* Keep hero visual from crowding the headline while we still have the green-screen asset. */
.public-hero-visual {
  min-height: 500px;
  padding-top: 80px;
}

.public-drone-image {
  width: min(660px, 100%);
  max-height: 500px;
}

/* Make small header/nav text crisper but not bloated. */
.public-brand-text strong {
  font-weight: 850;
  letter-spacing: 0.035em;
}

.public-brand-text small,
.public-nav {
  font-weight: 850;
}

@media (max-width: 1180px) {
  .public-container,
  .public-header .public-container {
    width: min(var(--public-max), calc(100% - 56px));
  }

  .public-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .public-hero-copy {
    max-width: 640px;
  }

  .public-hero h1,
  .public-hero-lead,
  .public-proof-row {
    max-width: 640px;
  }

  .public-hero-visual {
    min-height: 360px;
    padding-top: 8px;
  }
}

@media (max-width: 680px) {
  .public-container,
  .public-header .public-container {
    width: min(100% - 28px, var(--public-max));
  }

  .public-hero h1 {
    font-size: clamp(2.7rem, 15vw, 4.1rem);
    letter-spacing: -0.055em;
  }
}

/* DRONEHQ_PUBLIC_HERO_ALIGNMENT_TYPOGRAPHY_V3_END */
/* DRONEHQ_PUBLIC_HERO_TEXT_TIGHTEN_V4_START */

/*
  Hero text tighten V4
  Scope: public website only.

  John feedback:
    "Manage every flight / Every asset / All in one place"
    is too large and too bold. Make it tighter, smaller,
    cleaner, and closer to the existing DroneHQ app/login feel.
*/

.public-hero-copy {
  max-width: 500px;
}

/* Override earlier headline rules with a cleaner, less bulky type treatment. */
.public-hero h1 {
  max-width: 500px;
  font-size: clamp(2.55rem, 4.05vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 760;
  text-wrap: balance;
}

.public-hero h1 span {
  font-weight: 760;
  letter-spacing: -0.045em;
}

/* Keep the small cyan heading crisp but not oversized. */
.public-eyebrow {
  margin-bottom: 16px;
  font-size: 0.70rem;
  letter-spacing: 0.125em;
}

/* Match the reduced heading scale with tighter body/CTA spacing. */
.public-hero-lead {
  max-width: 500px;
  margin-top: 16px;
  font-size: 0.94rem;
  line-height: 1.6;
}

.public-hero-actions {
  margin-top: 24px;
}

.public-proof-row {
  max-width: 500px;
  margin-top: 28px;
}

/* Remove visible corrupted arrow-like glyph if it appears after CTA text. */
.public-hero-actions .public-button-primary span,
.public-button-primary span[aria-hidden="true"] {
  font-size: 1.1em;
  line-height: 1;
}

/* Preserve mobile readability. */
@media (max-width: 1180px) {
  .public-hero-copy,
  .public-hero h1,
  .public-hero-lead,
  .public-proof-row {
    max-width: 560px;
  }

  .public-hero h1 {
    font-size: clamp(2.6rem, 7.2vw, 4.35rem);
  }
}

@media (max-width: 680px) {
  .public-hero h1 {
    font-size: clamp(2.4rem, 13vw, 3.55rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
    font-weight: 760;
  }
}

/* DRONEHQ_PUBLIC_HERO_TEXT_TIGHTEN_V4_END */
/* DRONEHQ_PUBLIC_HERO_HEADLINE_TWO_LINE_V5_START */

/*
  Hero headline two-line balance V5
  Scope: public website only.

  Goal:
    White copy:
      Manage every flight.
      Every asset.
    Blue copy:
      All in one place.

  Keep the headline smaller, less heavy, and more like DroneHQ app/login typography.
*/

.public-hero-copy {
  max-width: 640px;
}

.public-hero-title {
  max-width: 640px;
  font-size: clamp(2.85rem, 3.75vw, 4.15rem);
  line-height: 1.045;
  letter-spacing: -0.052em;
  font-weight: 760;
}

.public-hero-title-line {
  display: block;
  white-space: nowrap;
}

.public-hero-title-accent {
  color: #168bff;
  font-weight: 760;
}

.public-hero-lead {
  max-width: 590px;
  margin-top: 18px;
}

.public-proof-row {
  max-width: 590px;
}

/* Give the text side enough room without pushing the drone too far right. */
.public-hero-grid {
  grid-template-columns: minmax(640px, 0.92fr) minmax(520px, 1.08fr);
  gap: 64px;
}

.public-hero-visual {
  padding-top: 72px;
}

@media (max-width: 1280px) {
  .public-hero-grid {
    grid-template-columns: minmax(540px, 0.9fr) minmax(460px, 1.1fr);
    gap: 48px;
  }

  .public-hero-title {
    max-width: 560px;
    font-size: clamp(2.55rem, 4vw, 3.65rem);
  }

  .public-hero-copy,
  .public-hero-lead,
  .public-proof-row {
    max-width: 560px;
  }
}

@media (max-width: 1080px) {
  .public-hero-grid {
    grid-template-columns: 1fr;
  }

  .public-hero-title-line {
    white-space: normal;
  }
}

@media (max-width: 680px) {
  .public-hero-title {
    font-size: clamp(2.2rem, 11.5vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.042em;
  }
}

/* DRONEHQ_PUBLIC_HERO_HEADLINE_TWO_LINE_V5_END */
/* DRONEHQ_PUBLIC_HERO_HEADLINE_EXACT_ROWS_V6_START */

/*
  Hero headline exact rows V6
  Scope: public website only.

  Required line structure:
    white: Manage every
    white: flight. Every asset.
    blue:  All in one place.
*/

.public-hero-copy {
  max-width: 650px;
}

.public-hero-title.public-hero-title-exact {
  max-width: 650px;
  font-size: clamp(2.65rem, 3.55vw, 3.95rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 740;
  margin: 0;
}

.public-hero-title-exact .public-hero-title-line {
  display: block;
  white-space: nowrap;
}

.public-hero-title-exact .public-hero-title-white {
  color: #ffffff !important;
  font-weight: 740;
}

.public-hero-title-exact .public-hero-title-accent {
  color: #168bff !important;
  font-weight: 740;
}

.public-hero-lead {
  max-width: 600px;
  margin-top: 20px;
  font-size: 0.95rem;
  line-height: 1.62;
}

.public-proof-row {
  max-width: 600px;
}

/* Give the left copy enough room for the exact two white rows. */
.public-hero-grid {
  grid-template-columns: minmax(650px, 0.96fr) minmax(500px, 1.04fr);
  gap: 58px;
}

.public-hero-visual {
  padding-top: 68px;
}

@media (max-width: 1320px) {
  .public-hero-grid {
    grid-template-columns: minmax(590px, 0.96fr) minmax(460px, 1.04fr);
    gap: 44px;
  }

  .public-hero-title.public-hero-title-exact {
    max-width: 590px;
    font-size: clamp(2.45rem, 3.65vw, 3.55rem);
  }

  .public-hero-copy,
  .public-hero-lead,
  .public-proof-row {
    max-width: 590px;
  }
}

@media (max-width: 1080px) {
  .public-hero-grid {
    grid-template-columns: 1fr;
  }

  .public-hero-title-exact .public-hero-title-line {
    white-space: normal;
  }
}

@media (max-width: 680px) {
  .public-hero-title.public-hero-title-exact {
    font-size: clamp(2.2rem, 10.8vw, 3.1rem);
    line-height: 1.07;
    letter-spacing: -0.04em;
  }
}

/* DRONEHQ_PUBLIC_HERO_HEADLINE_EXACT_ROWS_V6_END */
/* DRONEHQ_PUBLIC_NAV_CENTER_SIZE_V7_START */

/*
  Nav center + size V7
  Scope: public website only.

  John feedback:
    Make Features / Pricing / Our Story / Contact slightly larger
    and centered in the header.
*/

.public-header-inner {
  grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr) minmax(260px, 340px);
}

.public-nav {
  justify-self: center;
  justify-content: center;
  gap: 34px;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.052em;
  line-height: 1;
}

.public-nav a {
  padding: 18px 0;
}

.public-actions {
  justify-self: end;
}

@media (max-width: 1020px) {
  .public-header-inner {
    grid-template-columns: 1fr auto;
  }

  .public-nav {
    justify-self: start;
    justify-content: flex-start;
    gap: 24px;
    font-size: 0.80rem;
  }
}

/* DRONEHQ_PUBLIC_NAV_CENTER_SIZE_V7_END */
/* DRONEHQ_PUBLIC_HOMEPAGE_FULL_BACKGROUND_V15_START */

/*
  Homepage full background V15
  Scope: /website/ homepage only.

  The custom drone/glow image is the background for the full homepage content.
  It is NOT applied to body.public-site and NOT applied to all public pages.
*/

.public-home-page {
  min-height: 100vh;
  background-color: #061326;
  background-image:
    linear-gradient(90deg,
      rgba(6, 19, 38, 0.99) 0%,
      rgba(6, 19, 38, 0.96) 27%,
      rgba(6, 19, 38, 0.72) 47%,
      rgba(6, 19, 38, 0.16) 68%,
      rgba(6, 19, 38, 0.00) 100%),
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.00) 0%,
      rgba(6, 19, 38, 0.08) 42%,
      rgba(6, 19, 38, 0.82) 74%,
      rgba(6, 19, 38, 0.96) 100%),
    url("/static/images/hero/dronehq_public_hero_background.png"),
    linear-gradient(135deg, #061326 0%, #081a35 52%, #061326 100%);
  background-size:
    100% 100%,
    100% 100%,
    max(1560px, 100vw) auto,
    100% 100%;
  /*
    Moved slightly higher than the current view.
    The drone/glow stays on the right but is no longer only inside the hero box.
  */
  background-position:
    center,
    center,
    right -4vw top -96px,
    center;
  background-repeat: no-repeat;
}

/* The hero is transparent. The homepage wrapper owns the image. */
.public-home-page .public-home-hero {
  min-height: calc(100vh - var(--public-header-height));
  padding: 72px 0 54px;
  background: transparent !important;
  overflow: hidden;
}

.public-home-page .public-home-hero::before,
.public-home-page .public-home-hero::after {
  display: none !important;
}

.public-home-page .public-home-hero .public-hero-grid {
  grid-template-columns: minmax(0, 720px);
  gap: 0;
  align-items: start;
}

.public-home-page .public-home-hero .public-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.public-home-page .public-home-hero .public-hero-title.public-hero-title-exact {
  max-width: 650px;
}

.public-home-page .public-home-hero .public-hero-lead,
.public-home-page .public-home-hero .public-proof-row {
  max-width: 620px;
}

/* The homepage uses one composed background, not a separate drone image. */
.public-home-page .public-hero-visual,
.public-home-page .public-drone-image,
.public-home-page .public-drone-glow {
  display: none !important;
}

/*
  Lower homepage sections sit on the same background with subtle readability
  overlays, not separate full-width hard blocks.
*/
.public-home-page .public-dashboard-section,
.public-home-page .public-section,
.public-home-page .public-cta {
  position: relative;
  background: transparent !important;
}

.public-home-page .public-dashboard-section::before,
.public-home-page .public-section::before,
.public-home-page .public-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.70), rgba(6, 19, 38, 0.90)),
    radial-gradient(circle at 74% 0%, rgba(22, 139, 255, 0.08), transparent 34%);
}

.public-home-page .public-dashboard-section > .public-container,
.public-home-page .public-section > .public-container,
.public-home-page .public-cta > .public-container {
  position: relative;
  z-index: 1;
}

/*
  Temporary icon cleanup:
  Hide broken special-character icons caused by earlier template/CSS encoding.
  We will replace these with clean SVG/CSS icons later.
*/


.public-home-page .public-check-list li::before {
  content: "\2713";
  width: 8px;
  height: 8px;
  top: 0.48em;
  background: #168bff;
  border-radius: 999px;
}

.public-home-page .public-check-list li {
  padding-left: 20px;
}

/* Other public pages keep the normal DroneHQ navy background. */
.public-page-hero {
  background:
    radial-gradient(circle at 74% 0%, rgba(22, 139, 255, 0.10), transparent 34%),
    rgba(3, 11, 24, 0.96);
}

@media (max-width: 1080px) {
  .public-home-page {
    background-position:
      center,
      center,
      60% top -42px,
      center;
    background-size:
      100% 100%,
      100% 100%,
      auto 92vh,
      100% 100%;
  }
}

@media (max-width: 760px) {
  .public-home-page {
    background-image:
      linear-gradient(90deg, rgba(6, 19, 38, 0.99), rgba(6, 19, 38, 0.92)),
      linear-gradient(180deg, rgba(6, 19, 38, 0.02), rgba(6, 19, 38, 0.96)),
      url("/static/images/hero/dronehq_public_hero_background.png"),
      linear-gradient(135deg, #061326 0%, #081a35 52%, #061326 100%);
    background-size:
      100% 100%,
      100% 100%,
      auto 88vh,
      100% 100%;
    background-position:
      center,
      center,
      66% top,
      center;
    background-repeat: no-repeat;
  }
}

/* DRONEHQ_PUBLIC_HOMEPAGE_FULL_BACKGROUND_V15_END */
/* DRONEHQ_PUBLIC_HOMEPAGE_BACKGROUND_CONTINUITY_V17_START */

/*
  Homepage background continuity V17
  Scope: /website/ homepage only.

  Goal:
    Remove accidental visual breaks between homepage sections while still
    allowing intentional SaaS content blocks/cards to separate content.

  The custom drone/glow image remains homepage-only. Lower homepage sections
  sit over a continuous DroneHQ navy/floor-style background.
*/

.public-home-page {
  position: relative;
  background-color: #061326;
  background-image:
    linear-gradient(90deg,
      rgba(6, 19, 38, 0.99) 0%,
      rgba(6, 19, 38, 0.96) 28%,
      rgba(6, 19, 38, 0.74) 48%,
      rgba(6, 19, 38, 0.18) 68%,
      rgba(6, 19, 38, 0.00) 100%),
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.00) 0%,
      rgba(6, 19, 38, 0.06) 42%,
      rgba(6, 19, 38, 0.72) 68%,
      rgba(6, 19, 38, 0.92) 100%),
    url("/static/images/hero/dronehq_public_hero_background.png"),
    radial-gradient(ellipse at 70% 18%, rgba(22, 139, 255, 0.15), transparent 34%),
    radial-gradient(ellipse at 58% 82%, rgba(22, 139, 255, 0.08), transparent 48%),
    linear-gradient(180deg, #061326 0%, #071a34 42%, #061326 100%);
  background-size:
    100% 100%,
    100% 100%,
    max(1560px, 100vw) auto,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    center,
    center,
    right -4vw top -96px,
    center,
    center,
    center;
  background-repeat: no-repeat;
}

/*
  Smooth the transition after the hero. This removes the hard horizontal band
  by making the lower sections transparent over the homepage background.
*/
.public-home-page .public-dashboard-section,
.public-home-page .public-section,
.public-home-page .public-cta {
  background: transparent !important;
  position: relative;
}

/* Replace hard section fills with subtle intentional separators. */
.public-home-page .public-dashboard-section::before,
.public-home-page .public-section::before,
.public-home-page .public-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.24) 0%,
      rgba(6, 19, 38, 0.52) 48%,
      rgba(6, 19, 38, 0.24) 100%),
    radial-gradient(ellipse at 76% 0%, rgba(22, 139, 255, 0.07), transparent 36%);
}

.public-home-page .public-dashboard-section > .public-container,
.public-home-page .public-section > .public-container,
.public-home-page .public-cta > .public-container {
  position: relative;
  z-index: 1;
}

/* Intentional content separation without full-width color breaks. */
.public-home-page .public-dashboard-section {
  padding-top: 76px;
  border-top: 1px solid rgba(105, 168, 255, 0.10);
}

.public-home-page .public-section,
.public-home-page .public-cta {
  border-top: 1px solid rgba(105, 168, 255, 0.08);
}

/* Make the dashboard/product blocks feel intentionally layered. */
.public-home-page .public-dashboard-card,
.public-home-page .public-feature-grid article,
.public-home-page .public-cta-card {
  background:
    linear-gradient(180deg, rgba(13, 35, 66, 0.78), rgba(8, 27, 54, 0.70));
  border-color: rgba(105, 168, 255, 0.22);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* Keep homepage CTA/footer transition clean. */
.public-home-page + .public-footer,
.public-footer {
  border-top: 1px solid rgba(105, 168, 255, 0.12);
}

/* Slightly reduce overly empty hero bottom space while retaining cinematic feel. */
.public-home-page .public-home-hero {
  min-height: min(1075px, calc(100vh - var(--public-header-height)));
}

/* Keep lower homepage icon corruption hidden until we replace with clean icons. */


.public-home-page .public-check-list li::before {
  content: "\2713";
  width: 8px;
  height: 8px;
  top: 0.48em;
  background: #168bff;
  border-radius: 999px;
}

.public-home-page .public-check-list li {
  padding-left: 20px;
}

@media (max-width: 1080px) {
  .public-home-page {
    background-position:
      center,
      center,
      60% top -42px,
      center,
      center,
      center;
    background-size:
      100% 100%,
      100% 100%,
      auto 92vh,
      100% 100%,
      100% 100%,
      100% 100%;
  }
}

@media (max-width: 760px) {
  .public-home-page {
    background-image:
      linear-gradient(90deg, rgba(6, 19, 38, 0.99), rgba(6, 19, 38, 0.92)),
      linear-gradient(180deg, rgba(6, 19, 38, 0.02), rgba(6, 19, 38, 0.96)),
      url("/static/images/hero/dronehq_public_hero_background.png"),
      linear-gradient(180deg, #061326 0%, #071a34 42%, #061326 100%);
    background-size:
      100% 100%,
      100% 100%,
      auto 88vh,
      100% 100%;
    background-position:
      center,
      center,
      66% top,
      center;
  }
}

/* DRONEHQ_PUBLIC_HOMEPAGE_BACKGROUND_CONTINUITY_V17_END */
/* DRONEHQ_PUBLIC_SINGLE_HOMEPAGE_BREAK_V18_START */

/*
  Single homepage break V18
  Scope: /website/ homepage only.

  Keep one intentional transition after the hero. Remove extra hard bands lower
  on the page so the homepage feels continuous and professional.
*/

/* The hero owns the cinematic first impression. */
.public-home-page .public-home-hero {
  border-bottom: 0 !important;
}

/* One intentional separator immediately after the hero. */
.public-home-page .public-dashboard-section {
  position: relative;
  margin-top: 0;
  padding-top: 76px;
  border-top: 1px solid rgba(105, 168, 255, 0.16) !important;
}

/*
  Make the first lower section transition subtle, not a hard band.
  This is the ONE allowed visual break.
*/
.public-home-page .public-dashboard-section::before {
  background:
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.30) 0%,
      rgba(6, 19, 38, 0.54) 42%,
      rgba(6, 19, 38, 0.30) 100%),
    radial-gradient(ellipse at 72% 0%, rgba(22, 139, 255, 0.065), transparent 40%) !important;
}

/* Remove additional section breaks after the dashboard transition. */
.public-home-page .public-section,
.public-home-page .public-cta {
  border-top: 0 !important;
}

.public-home-page .public-section::before,
.public-home-page .public-cta::before {
  background:
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.06) 0%,
      rgba(6, 19, 38, 0.14) 50%,
      rgba(6, 19, 38, 0.08) 100%),
    radial-gradient(ellipse at 76% 0%, rgba(22, 139, 255, 0.035), transparent 38%) !important;
}

/* Keep content blocks readable and intentional. */
.public-home-page .public-dashboard-card,
.public-home-page .public-feature-grid article,
.public-home-page .public-cta-card {
  background:
    linear-gradient(180deg, rgba(13, 35, 66, 0.78), rgba(8, 27, 54, 0.70)) !important;
  border-color: rgba(105, 168, 255, 0.22) !important;
}

/* Do not affect the footer/header. Those can remain their own site structure. */

/* DRONEHQ_PUBLIC_SINGLE_HOMEPAGE_BREAK_V18_END */
/* DRONEHQ_PUBLIC_REMOVE_SECOND_BREAK_V19_START */

/*
  Remove second homepage break V19
  Scope: /website/ homepage only.

  The first transition after the hero stays.
  The break before "Everything you need. In one platform." is removed.
  The lower CTA/footer separation remains.
*/

/* This is the unwanted second band/break. Let the feature section flow. */
.public-home-page .public-section {
  border-top: 0 !important;
  background: transparent !important;
}

.public-home-page .public-section::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Keep the spacing intentional without creating another full-width band. */
.public-home-page .public-section {
  padding-top: 64px;
}

/* Keep the first hero-to-dashboard break intact. */
.public-home-page .public-dashboard-section {
  border-top: 1px solid rgba(105, 168, 255, 0.16) !important;
}

/* Keep the lower CTA/footer structure as the remaining designed break. */
.public-home-page .public-cta {
  border-top: 1px solid rgba(105, 168, 255, 0.10) !important;
}

.public-home-page .public-cta::before {
  background:
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.14) 0%,
      rgba(6, 19, 38, 0.30) 48%,
      rgba(6, 19, 38, 0.18) 100%) !important;
}

/* DRONEHQ_PUBLIC_REMOVE_SECOND_BREAK_V19_END */
/* DRONEHQ_PUBLIC_REMOVE_HERO_DASHBOARD_LINE_V20_START */

/*
  Remove hero-to-dashboard line V20
  Scope: /website/ homepage only.

  The visible line John marked is the dashboard section top border / transition.
  V18 intentionally kept it. This removes it.
*/

.public-home-page .public-dashboard-section {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Make sure no pseudo-element draws a top rule at that transition. */
.public-home-page .public-dashboard-section::before {
  border-top: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.08) 0%,
      rgba(6, 19, 38, 0.24) 52%,
      rgba(6, 19, 38, 0.10) 100%),
    radial-gradient(ellipse at 72% 0%, rgba(22, 139, 255, 0.035), transparent 40%) !important;
}

/* Remove any adjacent section line that could appear as the same break. */
.public-home-page .public-home-hero {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.public-home-page .public-home-hero + .public-dashboard-section {
  border-top: 0 !important;
}

/* DRONEHQ_PUBLIC_REMOVE_HERO_DASHBOARD_LINE_V20_END */
/* DRONEHQ_PUBLIC_PREFLIGHT_PREVIEW_FINAL_PLACEMENT_V24_START */

/*
  Final Preflight preview placement V24
  Scope: /website/ homepage only.

  The preview is a real image, not a fake card background.
  No crop, no filter, no wide fake frame.
*/

/* Keep the break line above the preview section, then move the section up. */
.public-home-page .public-dashboard-section {
  border-top: 1px solid rgba(105, 168, 255, 0.16) !important;
  padding-top: 30px !important;
  margin-top: 0 !important;
  background: transparent !important;
}

.public-home-page .public-dashboard-section::before {
  display: none !important;
  content: none !important;
}

/* Keep the screen/text layout stable. */
.public-home-page .public-dashboard-section .public-split-grid,
.public-home-page .public-dashboard-section .public-container.public-split-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 760px) minmax(360px, 1fr) !important;
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: center !important;
}

/*
  The preview container should disappear visually.
  The screenshot already has its own app border/header.
*/
.public-home-page .public-preflight-preview-card,
.public-home-page .public-dashboard-card.public-preflight-preview-card {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide old fake dashboard markup, but keep the real image. */
.public-home-page .public-dashboard-card.public-preflight-preview-card > :not(.public-preflight-preview-image) {
  display: none !important;
}

/* Show the real screenshot cleanly and at usable size. */
.public-home-page .public-preflight-preview-image {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove any old overlay/frame from previous attempts. */
.public-home-page .public-dashboard-card.public-preflight-preview-card::after {
  display: none !important;
  content: none !important;
}

/* Move the right-side text up/flush with the real screenshot. */
.public-home-page .public-dashboard-copy {
  align-self: center !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep responsive behavior simple. */
@media (max-width: 1080px) {
  .public-home-page .public-dashboard-section .public-split-grid,
  .public-home-page .public-dashboard-section .public-container.public-split-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .public-home-page .public-preflight-preview-card,
  .public-home-page .public-dashboard-card.public-preflight-preview-card,
  .public-home-page .public-preflight-preview-image {
    width: 100% !important;
    max-width: 840px !important;
  }
}

/* DRONEHQ_PUBLIC_PREFLIGHT_PREVIEW_FINAL_PLACEMENT_V24_END */
/* DRONEHQ_PUBLIC_PREFLIGHT_SECTION_LAYOUT_V25_START */

/*
  Preflight section layout V25
  Scope: /website/ homepage only.

  This patch only positions the already-inserted Preflight screenshot and
  right-side insights block. It does not modify hero/nav/drone/footer/pages.
*/

/*
  The break line is the top of this section. Keep it, but pull content up
  so the screenshot starts right below the line instead of floating too low.
*/
.public-home-page .public-dashboard-section {
  margin-top: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 72px !important;
  border-top: 1px solid rgba(105, 168, 255, 0.16) !important;
  background: transparent !important;
}

.public-home-page .public-dashboard-section::before {
  display: none !important;
  content: none !important;
}

/* The section layout: large screenshot left, text right. */
.public-home-page .public-dashboard-section .public-split-grid,
.public-home-page .public-dashboard-section .public-container.public-split-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 820px) minmax(420px, 1fr) !important;
  gap: clamp(42px, 5vw, 76px) !important;
  align-items: start !important;
}

/*
  The screenshot should not look like it is inside a fake card. The image
  already contains the DroneHQ UI frame.
*/
.public-home-page .public-dashboard-card.public-preflight-preview-card,
.public-home-page .public-preflight-preview-card {
  display: block !important;
  width: min(820px, calc(100vw - 96px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide old fake dashboard markup but never hide the real screenshot. */
.public-home-page .public-dashboard-card.public-preflight-preview-card > :not(.public-preflight-preview-image) {
  display: none !important;
}

/* Force the real screenshot to be large, crisp, and unfiltered. */
.public-home-page .public-preflight-preview-image {
  display: block !important;
  width: min(820px, calc(100vw - 96px)) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.public-home-page .public-dashboard-card.public-preflight-preview-card::before,
.public-home-page .public-dashboard-card.public-preflight-preview-card::after {
  display: none !important;
  content: none !important;
}

/* Move the right text up to align with the larger screenshot. */
.public-home-page .public-dashboard-copy {
  align-self: start !important;
  padding-top: 38px !important;
  margin-top: 0 !important;
  max-width: 620px !important;
}

.public-home-page .public-dashboard-copy h2 {
  max-width: 620px;
}

/* Keep this readable on smaller screens. */
@media (max-width: 1180px) {
  .public-home-page .public-dashboard-section .public-split-grid,
  .public-home-page .public-dashboard-section .public-container.public-split-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .public-home-page .public-dashboard-card.public-preflight-preview-card,
  .public-home-page .public-preflight-preview-card,
  .public-home-page .public-preflight-preview-image {
    width: min(860px, calc(100vw - 56px)) !important;
  }

  .public-home-page .public-dashboard-copy {
    padding-top: 0 !important;
    max-width: 760px !important;
  }
}

/* DRONEHQ_PUBLIC_PREFLIGHT_SECTION_LAYOUT_V25_END */



/* JOHN_MANUAL_PREFLIGHT_BACKGROUND_BREAK_TEST_START */

/*
  Manual background break test:
  Keep Preflight screenshot/text in place.
  Move only the lower dark background break upward.
*/

.public-home-page .public-dashboard-section {
  margin-top: 0 !important;
  padding-top: 28px !important;
  position: relative !important;
  background: transparent !important;
  border-top: 0 !important;
  overflow: visible !important;
}

/*
  This is the visual dark lower background.
  Negative top moves the break upward WITHOUT moving screenshot/text.
*/
.public-home-page .public-dashboard-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -180px !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(7, 23, 44, 0.72) 0%,
      rgba(7, 23, 44, 0.92) 22%,
      rgba(5, 17, 34, 0.96) 100%
    ) !important;
}

/* Keep the screenshot/text above the moved background. */
.public-home-page .public-dashboard-section > .public-container {
  position: relative !important;
  z-index: 1 !important;
}

/* JOHN_MANUAL_PREFLIGHT_BACKGROUND_BREAK_TEST_END */


/* JOHN_MANUAL_PREFLIGHT_CONTENT_UP_TEST_START */

/*
  Manual content position test:
  Move the Preflight screenshot and right-side text upward together.
  This does NOT move the background break.
*/

.public-home-page .public-dashboard-section > .public-container,
.public-home-page .public-dashboard-section .public-container.public-split-grid {
  transform: translateY(-200px) !important;
}

/* JOHN_MANUAL_PREFLIGHT_CONTENT_UP_TEST_END */

/* JOHN_MANUAL_REALTIME_INSIGHTS_POSITION_TEST_START */

/*
  Manual position test:
  Move only the right-side Real-Time Insights text group.
  Active HTML class is .public-insight-copy.
*/

.public-home-page .public-dashboard-section .public-insight-copy {
  transform: translateY(220px) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* JOHN_MANUAL_REALTIME_INSIGHTS_POSITION_TEST_END */

/* JOHN_MANUAL_HERO_BREAK_LINE_ONLY_TEST_START */

/*
  Manual visual test:
  Add one intentional line exactly on the existing background break.
  This does not add another fade/background layer.
  This does not move screenshot, text, drone, or layout.
*/

.public-home-page .public-dashboard-section::before {
  border-top: 1px solid rgba(38, 153, 255, 0.34) !important;
  box-shadow: 0 -1px 18px rgba(38, 153, 255, 0.12) !important;
}

/* JOHN_MANUAL_HERO_BREAK_LINE_ONLY_TEST_END */


/* JOHN_MANUAL_PREFLIGHT_SCREENSHOT_SIZE_TEST_START */

.public-home-page .public-dashboard-card.public-preflight-preview-card,
.public-home-page .public-preflight-preview-card {
  width: 1160px !important;
  max-width: none !important;
}

.public-home-page .public-preflight-preview-image,
.public-home-page .public-preflight-preview-card img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* JOHN_MANUAL_PREFLIGHT_SCREENSHOT_SIZE_TEST_END */


/* JOHN_MANUAL_PREFLIGHT_STACKED_LAYOUT_TEST_START */

/*
  Manual layout test:
  Put the Real-Time Insights text above the Preflight screenshot.
  Center the screenshot and allow it to be larger.
  This avoids text/image overlap.
*/

.public-home-page .public-dashboard-section .public-container,
.public-home-page .public-dashboard-section .public-container.public-split-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 34px !important;
  transform: translateY(-140px) !important;
}

/* Put the text first, above the screenshot */
.public-home-page .public-dashboard-section .public-insight-copy {
  order: 1 !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
}

.public-home-page .public-dashboard-section .public-insight-copy ul {
  display: inline-grid !important;
  text-align: left !important;
  margin-top: 22px !important;
}

/* Put the screenshot second, centered */
.public-home-page .public-dashboard-section .public-dashboard-card.public-preflight-preview-card,
.public-home-page .public-dashboard-section .public-preflight-preview-card {
  order: 2 !important;
  width: min(1120px, calc(100vw - 96px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* Make the image fill the centered card */
.public-home-page .public-preflight-preview-image,
.public-home-page .public-preflight-preview-card img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
}

/* JOHN_MANUAL_PREFLIGHT_STACKED_LAYOUT_TEST_END */

/* JOHN_MANUAL_PREFLIGHT_FEATURE_GRID_TEST_START */

/*
  Manual visual test:
  Replace skinny bullets with three compact feature groups.
*/

.public-home-page .public-preflight-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: min(1040px, calc(100vw - 96px)) !important;
  margin: 28px auto 0 !important;
}

.public-home-page .public-preflight-feature {
  min-height: 112px !important;
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(38, 153, 255, 0.28) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
}

.public-home-page .public-preflight-feature strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.public-home-page .public-preflight-feature span {
  display: block !important;
  color: rgba(232, 243, 255, 0.86) !important;
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px) {
  .public-home-page .public-preflight-feature-grid {
    grid-template-columns: 1fr !important;
    width: min(680px, calc(100vw - 40px)) !important;
  }
}

/* JOHN_MANUAL_PREFLIGHT_FEATURE_GRID_TEST_END */

/* JOHN_MANUAL_PREFLIGHT_FEATURE_GRID_CENTER_TEST_START */

/*
  Center the three Preflight feature cards above the Preflight screenshot.
  The feature row now uses the same visual width/alignment as the screenshot area.
*/

.public-home-page .public-insight-copy {
  width: min(1120px, calc(100vw - 96px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.public-home-page .public-preflight-feature-grid {
  width: min(900px, calc(100vw - 96px)) !important;
  margin: 28px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 280px) !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: stretch !important;
  transform: translateX(-60px) !important;
}

.public-home-page .public-preflight-feature {
  text-align: center !important;
}

/* JOHN_MANUAL_PREFLIGHT_FEATURE_GRID_CENTER_TEST_END */

/* JOHN_MANUAL_HERO_CTA_AND_TOP_CARDS_TUNE_START */

/*
  Tune homepage hero CTA + top proof cards.
  - Makes the main trial button smaller.
  - Makes the four hero cards cleaner/wider.
  - Keeps card headings closer to one line where possible.
*/

.public-home-page .public-hero-actions .public-button-large {
  min-height: 44px !important;
  padding: 11px 22px !important;
  font-size: 0.92rem !important;
  border-radius: 12px !important;
}

.public-home-page .public-proof-row {
  max-width: 720px !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.public-home-page .public-proof-row > div {
  min-height: 104px !important;
  padding: 14px 14px 12px !important;
}

.public-home-page .public-proof-row strong {
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
  margin-bottom: 6px !important;
}

.public-home-page .public-proof-row span {
  font-size: 0.78rem !important;
  line-height: 1.28 !important;
}

/* JOHN_MANUAL_HERO_CTA_AND_TOP_CARDS_TUNE_END */

/* JOHN_MANUAL_AFTER_PREFLIGHT_GAP_TUNE_START */

/*
  Manual gap control:
  Reduces the big empty space between the Preflight screenshot section
  and the "Everything you need. In one platform." section.
*/

.public-home-page .public-dashboard-section {
  padding-bottom: 05px !important;
  margin-bottom: 0 !important;
}

.public-home-page .public-dashboard-section + .public-section {
  padding-top: 10px !important;
}

/* JOHN_MANUAL_AFTER_PREFLIGHT_GAP_TUNE_END */
/* DRONEHQ_PUBLIC_HOMEPAGE_FINAL_COPY_TUNE_START */

/*
  Final homepage copy tune.
  Scope:
  - Small DJI/Windows current-focus note under hero cards.
  - Lower platform section lead text.
  Does not change hero background, Preflight screenshot, break positioning, or section layout.
*/

.public-home-page .public-current-focus-note {
  max-width: 620px !important;
  margin: 12px 0 0 !important;
  color: rgba(232, 243, 255, 0.72) !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.public-home-page .public-platform-section-lead {
  max-width: 860px !important;
  margin: 14px auto 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* DRONEHQ_PUBLIC_HOMEPAGE_FINAL_COPY_TUNE_END */

/* JOHN_MANUAL_HERO_SIX_CARD_GRID_START */

.public-home-page .public-proof-row {
  display: grid !important;
  grid-template-columns: repeat(3, 170px) !important;
  gap: 12px !important;
  max-width: 546px !important;
  margin-top: 18px !important;
}

.public-home-page .public-proof-row > div {
  min-height: 88px !important;
  padding: 12px 13px !important;
}

.public-home-page .public-proof-row strong {
  display: block !important;
  font-size: 0.84rem !important;
  line-height: 1.1 !important;
  margin-bottom: 5px !important;
}

.public-home-page .public-proof-row span {
  display: block !important;
  font-size: 0.72rem !important;
  line-height: 1.24 !important;
}

/* JOHN_MANUAL_HERO_SIX_CARD_GRID_END */

/* JOHN_MANUAL_PUBLIC_FOOTER_CLEANUP_START */

.public-footer .public-footer-grid {
  grid-template-columns: 1fr !important;
  align-items: center !important;
}

.public-footer-main {
  max-width: 720px !important;
}

.public-footer-pilot-note {
  margin: 14px 0 6px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.public-footer-main small {
  color: rgba(232, 243, 255, 0.64) !important;
}

/* JOHN_MANUAL_PUBLIC_FOOTER_CLEANUP_END */


/* JOHN_MANUAL_PUBLIC_FOOTER_COPYRIGHT_FULL_CENTER_START */

.public-footer .public-footer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.public-footer-main {
  width: 100% !important;
  max-width: none !important;
}

.public-footer-main > small {
  display: block !important;
  width: 100% !important;
  margin-top: 22px !important;
  text-align: center !important;
  color: rgba(232, 243, 255, 0.64) !important;
}

/* JOHN_MANUAL_PUBLIC_FOOTER_COPYRIGHT_FULL_CENTER_END */

/* JOHN_MANUAL_PUBLIC_FOOTER_SLIM_START */

.public-footer.public-footer-slim {
  padding: 28px 0 18px !important;
}

.public-footer.public-footer-slim .public-footer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.public-footer.public-footer-slim .public-footer-main {
  width: 100% !important;
  max-width: none !important;
}

.public-footer.public-footer-slim .public-footer-main p {
  margin: 0 !important;
}

.public-footer.public-footer-slim .public-footer-pilot-note {
  margin-top: 10px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.public-footer.public-footer-slim .public-footer-copyright {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  text-align: center !important;
  color: rgba(232, 243, 255, 0.64) !important;
  font-size: 0.82rem !important;
}

/* JOHN_MANUAL_PUBLIC_FOOTER_SLIM_END */


/* DRONEHQ_PUBLIC_FEATURES_PAGE_BUILD_START */

/*
  Features page only.
  Homepage is intentionally untouched.
  This block matches the homepage rhythm:
  - white / white / blue hero pattern
  - softer paragraph text
  - smaller section headings
  - compact cards
  - homepage-style CTA
*/

.public-features-page {
  background:
    radial-gradient(circle at 78% 12%, rgba(38, 153, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #06111f 0%, #07192c 44%, #06111f 100%) !important;
  color: #ffffff !important;
}

.public-features-page .public-features-hero {
  padding: 104px 0 70px !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.18) !important;
}

.public-features-page .public-features-title {
  max-width: 820px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 3.95vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 700 !important;
}

.public-features-page .public-features-title span {
  display: block !important;
}

.public-features-page .public-features-title .features-title-white {
  color: #ffffff !important;
}

.public-features-page .public-features-title .features-title-blue {
  color: #1e9bff !important;
}

.public-features-page .public-features-lead {
  max-width: 760px !important;
  margin: 22px 0 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-features-page .public-features-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.public-features-page .public-features-section {
  padding: 62px 0 !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.12) !important;
}

.public-features-page .public-features-section-alt {
  background: rgba(5, 17, 31, 0.34) !important;
}

.public-features-page .public-section-heading {
  max-width: 860px !important;
  margin: 0 auto 32px !important;
  text-align: center !important;
}

.public-features-page .public-section-heading h2 {
  max-width: 780px !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  font-size: clamp(1.85rem, 2.55vw, 2.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.042em !important;
  font-weight: 700 !important;
}

.public-features-page .public-section-heading p:not(.public-eyebrow) {
  max-width: 760px !important;
  margin: 14px auto 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

.public-features-page .public-capability-grid,
.public-features-page .public-provider-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.public-features-page .public-capability-grid-five {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.public-features-page .public-feature-list-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.public-features-page .public-provider-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.public-features-page .public-capability-grid article,
.public-features-page .public-feature-list-grid article,
.public-features-page .public-provider-grid article {
  min-height: 136px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(38, 153, 255, 0.24) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12) !important;
}

.public-features-page .public-provider-grid article {
  min-height: 116px !important;
}

.public-features-page .public-capability-grid h3,
.public-features-page .public-feature-list-grid h3,
.public-features-page .public-provider-grid strong {
  display: block !important;
  margin: 0 0 9px !important;
  color: #ffffff !important;
  font-size: 0.94rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.public-features-page .public-capability-grid p,
.public-features-page .public-provider-grid span {
  display: block !important;
  margin: 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.84rem !important;
  line-height: 1.46 !important;
  font-weight: 400 !important;
}

.public-features-page .public-feature-list-grid ul {
  margin: 0 !important;
  padding-left: 18px !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}
@media (max-width: 1120px) {
  .public-features-page .public-capability-grid,
  .public-features-page .public-capability-grid-five,
  .public-features-page .public-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .public-features-page .public-features-hero {
    padding: 82px 0 54px !important;
  }

  .public-features-page .public-features-title {
  max-width: 820px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 3.95vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 700 !important;
}

  .public-features-page .public-section-heading h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }

  .public-features-page .public-capability-grid,
  .public-features-page .public-capability-grid-five,
  .public-features-page .public-feature-list-grid,
  .public-features-page .public-provider-grid {
    grid-template-columns: 1fr !important;
  }
}

/* DRONEHQ_PUBLIC_FEATURES_PAGE_BUILD_END */
/* DRONEHQ_PUBLIC_PRICING_PAGE_BUILD_START */

/*
  Pricing page only.
  Homepage is intentionally untouched.
*/

.public-pricing-page {
  background:
    radial-gradient(circle at 78% 14%, rgba(38, 153, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #06111f 0%, #07192c 44%, #06111f 100%) !important;
  color: #ffffff !important;
}

.public-pricing-page .public-pricing-hero {
  padding: 104px 0 46px !important;
}

.public-pricing-page .public-pricing-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
  gap: 76px !important;
  align-items: center !important;
}

.public-pricing-page .public-pricing-title {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 4vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 650 !important;
}

.public-pricing-page .public-pricing-title span {
  display: block !important;
}

.public-pricing-page .pricing-title-white {
  color: #ffffff !important;
}

.public-pricing-page .pricing-title-blue {
  color: #1e9bff !important;
}

.public-pricing-page .public-pricing-lead {
  max-width: 660px !important;
  margin: 22px 0 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 1rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-pricing-page .public-pricing-hero-actions {
  margin-top: 28px !important;
}

.public-pricing-page .public-pricing-trust-panel {
  max-width: 420px !important;
  margin-left: auto !important;
}

.public-pricing-page .public-pricing-trust-item {
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 18px !important;
  align-items: center !important;
}

.public-pricing-page .public-pricing-trust-icon {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(38, 153, 255, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(30, 155, 255, 0.12) !important;
  font-size: 1.35rem !important;
}

.public-pricing-page .public-pricing-trust-item h2 {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.public-pricing-page .public-pricing-trust-item p {
  margin: 0 !important;
  color: rgba(232, 243, 255, 0.78) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}

.public-pricing-page .public-pricing-trust-divider {
  height: 1px !important;
  margin: 24px 0 !important;
  background: rgba(232, 243, 255, 0.22) !important;
}

.public-pricing-page .public-pricing-plans-section {
  padding: 34px 0 64px !important;
}

.public-pricing-page .public-pricing-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(340px, 1.16fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.public-pricing-page .public-pricing-card,
.public-pricing-page .public-pricing-addons-card {
  position: relative !important;
  min-height: 100% !important;
  padding: 30px !important;
  border: 1px solid rgba(38, 153, 255, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16) !important;
}

.public-pricing-page .public-pricing-card-featured {
  border-color: rgba(38, 153, 255, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(38, 153, 255, 0.22), 0 22px 60px rgba(0, 0, 0, 0.2) !important;
}

.public-pricing-page .public-pricing-badge {
  position: absolute !important;
  top: -13px !important;
  right: 24px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(38, 153, 255, 0.72) !important;
  border-radius: 8px !important;
  background: rgba(8, 31, 59, 0.96) !important;
  color: #20c8ff !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.public-pricing-page .public-pricing-card h2,
.public-pricing-page .public-pricing-addons-card h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 1.65rem !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}

.public-pricing-page .public-pricing-card-subtitle {
  margin: 10px 0 0 !important;
  color: rgba(232, 243, 255, 0.8) !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.public-pricing-page .public-pricing-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 26px 0 20px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(232, 243, 255, 0.16) !important;
}

.public-pricing-page .public-pricing-price strong {
  color: #ffffff !important;
  font-size: 2.45rem !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
}

.public-pricing-page .public-pricing-price span {
  color: rgba(232, 243, 255, 0.78) !important;
  font-size: 0.95rem !important;
}

.public-pricing-page .public-pricing-feature-list {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.public-pricing-page .public-pricing-feature-list li {
  position: relative !important;
  padding-left: 25px !important;
  color: rgba(232, 243, 255, 0.88) !important;
  font-size: 0.94rem !important;
  line-height: 1.35 !important;
}

.public-pricing-page .public-pricing-feature-list li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #1e9bff !important;
  font-weight: 900 !important;
}

.public-pricing-page .public-pricing-button {
  width: 100% !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin-top: 28px !important;
  padding: 13px 18px !important;
  font-size: 0.88rem !important;
}

.public-pricing-page .public-pricing-addon-list {
  display: grid !important;
  gap: 0 !important;
  margin-top: 22px !important;
}

.public-pricing-page .public-pricing-addon {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(232, 243, 255, 0.16) !important;
}

.public-pricing-page .public-pricing-addon:first-child {
  padding-top: 8px !important;
}

.public-pricing-page .public-pricing-addon-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(30, 155, 255, 0.82) !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
}

.public-pricing-page .public-pricing-addon h3 {
  margin: 0 0 5px !important;
  color: #ffffff !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.public-pricing-page .public-pricing-addon p {
  margin: 0 !important;
  color: rgba(232, 243, 255, 0.76) !important;
  font-size: 0.84rem !important;
  line-height: 1.4 !important;
}

.public-pricing-page .public-pricing-addon strong {
  color: #1e9bff !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.public-pricing-page .public-pricing-addon strong span {
  color: rgba(232, 243, 255, 0.72) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.public-pricing-page .public-pricing-note {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  gap: 10px !important;
  margin-top: 20px !important;
  color: rgba(232, 243, 255, 0.78) !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
}

.public-pricing-page .public-pricing-note p {
  margin: 0 !important;
}

.public-pricing-page .public-pricing-trial-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-top: 24px !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(38, 153, 255, 0.2) !important;
  border-radius: 14px !important;
  background: rgba(8, 31, 59, 0.56) !important;
}

.public-pricing-page .public-pricing-trial-strip strong {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.public-pricing-page .public-pricing-trial-strip span {
  margin-left: 10px !important;
  color: rgba(232, 243, 255, 0.78) !important;
  font-size: 0.92rem !important;
}

.public-pricing-page .public-pricing-strip-button {
  min-height: 40px !important;
  padding: 12px 18px !important;
  font-size: 0.86rem !important;
  white-space: nowrap !important;
}

@media (max-width: 1120px) {
  .public-pricing-page .public-pricing-hero-grid,
  .public-pricing-page .public-pricing-layout {
    grid-template-columns: 1fr !important;
  }

  .public-pricing-page .public-pricing-trust-panel {
    max-width: none !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 760px) {
  .public-pricing-page .public-pricing-hero {
    padding: 82px 0 38px !important;
  }

  .public-pricing-page .public-pricing-title {
    font-size: clamp(2.35rem, 10vw, 3.25rem) !important;
  }

  .public-pricing-page .public-pricing-addon {
    grid-template-columns: 44px 1fr !important;
  }

  .public-pricing-page .public-pricing-addon strong {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .public-pricing-page .public-pricing-trial-strip {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* DRONEHQ_PUBLIC_PRICING_PAGE_BUILD_END */
/* DRONEHQ_PUBLIC_STORY_PAGE_BUILD_START */

/*
  Our Story page only.
  Homepage is intentionally untouched.
*/

.public-story-page {
  background:
    radial-gradient(circle at 78% 12%, rgba(38, 153, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #06111f 0%, #07192c 44%, #06111f 100%) !important;
  color: #ffffff !important;
}

.public-story-page .public-story-hero {
  padding: 104px 0 72px !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.16) !important;
}

.public-story-page .public-story-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

.public-story-page .public-story-title {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 3.95vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 650 !important;
}

.public-story-page .public-story-title span {
  display: block !important;
}

.public-story-page .story-title-white {
  color: #ffffff !important;
}

.public-story-page .story-title-blue {
  color: #1e9bff !important;
}

.public-story-page .public-story-lead {
  max-width: 710px !important;
  margin: 22px 0 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 1rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-story-page .public-story-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.public-story-page .public-story-founder-card {
  padding: 22px !important;
  border: 1px solid rgba(38, 153, 255, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16) !important;
}

.public-story-page .public-story-photo-placeholder {
  display: grid !important;
  place-items: center !important;
  min-height: 260px !important;
  border: 1px dashed rgba(38, 153, 255, 0.36) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at center, rgba(38, 153, 255, 0.12), transparent 58%),
    rgba(4, 15, 29, 0.62) !important;
  text-align: center !important;
}

.public-story-page .public-story-photo-placeholder img {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}

.public-story-page .public-story-photo-placeholder span {
  display: block !important;
  color: rgba(232, 243, 255, 0.66) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.public-story-page .public-story-founder-copy {
  padding-top: 18px !important;
}

.public-story-page .public-story-founder-copy h2 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

.public-story-page .public-story-founder-copy p:not(.public-eyebrow) {
  margin: 5px 0 0 !important;
  color: rgba(232, 243, 255, 0.78) !important;
  font-size: 0.9rem !important;
  line-height: 1.42 !important;
}

.public-story-page .public-story-section {
  padding: 64px 0 !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.12) !important;
}

.public-story-page .public-story-section-alt {
  background: rgba(5, 17, 31, 0.34) !important;
}

.public-story-page .public-story-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.public-story-page .public-story-card,
.public-story-page .public-story-quote-card,
.public-story-page .public-story-problem-grid article,
.public-story-page .public-story-values-grid article {
  border: 1px solid rgba(38, 153, 255, 0.24) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12) !important;
}

.public-story-page .public-story-card {
  padding: 28px 30px !important;
}

.public-story-page .public-story-card h2,
.public-story-page .public-story-philosophy h2,
.public-story-page .public-section-heading h2 {
  max-width: 780px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.85rem, 2.55vw, 2.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.042em !important;
  font-weight: 700 !important;
}

.public-story-page .public-story-card p:not(.public-eyebrow),
.public-story-page .public-story-philosophy-copy p,
.public-story-page .public-section-heading p:not(.public-eyebrow) {
  margin: 16px 0 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.96rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-story-page .public-story-quote-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 28px !important;
}

.public-story-page .public-story-quote-card span {
  color: #1e9bff !important;
  font-size: 4rem !important;
  line-height: 0.7 !important;
  font-weight: 800 !important;
}

.public-story-page .public-story-quote-card p {
  margin: 10px 0 0 !important;
  color: #ffffff !important;
  font-size: 1.18rem !important;
  line-height: 1.45 !important;
  letter-spacing: -0.025em !important;
  font-weight: 650 !important;
}

.public-story-page .public-section-heading {
  max-width: 840px !important;
  margin: 0 auto 30px !important;
  text-align: center !important;
}

.public-story-page .public-section-heading h2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-story-page .public-section-heading p:not(.public-eyebrow) {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-story-page .public-story-problem-grid,
.public-story-page .public-story-values-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.public-story-page .public-story-problem-grid article,
.public-story-page .public-story-values-grid article {
  min-height: 150px !important;
  padding: 20px 22px !important;
}

.public-story-page .public-story-problem-grid h3,
.public-story-page .public-story-values-grid h3 {
  margin: 0 0 9px !important;
  color: #ffffff !important;
  font-size: 0.96rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.public-story-page .public-story-problem-grid p,
.public-story-page .public-story-values-grid p {
  margin: 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.84rem !important;
  line-height: 1.48 !important;
}

.public-story-page .public-story-philosophy {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
}

.public-story-page .public-story-philosophy-copy {
  padding: 24px 28px !important;
  border: 1px solid rgba(38, 153, 255, 0.22) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 59, 0.46) !important;
}

.public-story-page .public-story-philosophy-copy p:first-child {
  margin-top: 0 !important;
}

.public-story-page .public-story-mission {
  padding: 70px 0 64px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.12) !important;
}

.public-story-page .public-story-mission h2 {
  margin: 0 auto !important;
  max-width: 880px !important;
  font-size: clamp(2.3rem, 3.6vw, 3.65rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
  font-weight: 650 !important;
}

.public-story-page .public-story-mission h2 span {
  display: block !important;
  color: #ffffff !important;
}

.public-story-page .public-story-mission h2 span:last-child {
  color: #1e9bff !important;
}

.public-story-page .public-story-mission p:not(.public-eyebrow) {
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 1rem !important;
  line-height: 1.58 !important;
}

@media (max-width: 980px) {
  .public-story-page .public-story-hero-grid,
  .public-story-page .public-story-main-grid,
  .public-story-page .public-story-philosophy {
    grid-template-columns: 1fr !important;
  }

  .public-story-page .public-story-problem-grid,
  .public-story-page .public-story-values-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .public-story-page .public-story-hero {
    padding: 82px 0 54px !important;
  }

  .public-story-page .public-story-title {
    font-size: clamp(2.35rem, 10vw, 3.25rem) !important;
  }

  .public-story-page .public-story-photo-placeholder {
    min-height: 220px !important;
  }
}

/* DRONEHQ_PUBLIC_STORY_PAGE_BUILD_END */
/* JOHN_STORY_FOUNDER_PHOTO_PHONE_FRAME_START */

/*
  Our Story founder photo only.
  Makes John's vertical portrait display like a phone-style portrait card.
*/

.public-story-page .public-story-founder-card {
  max-width: 420px !important;
  margin-left: auto !important;
}

.public-story-page .public-story-photo-placeholder.public-story-founder-photo {
  display: block !important;
  width: 100% !important;
  max-width: 330px !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(38, 153, 255, 0.34) !important;
  border-radius: 18px !important;
  background: rgba(4, 15, 29, 0.62) !important;
}

.public-story-page .public-story-photo-placeholder.public-story-founder-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.public-story-page .public-story-founder-copy {
  max-width: 330px !important;
  margin: 0 auto !important;
  padding-top: 18px !important;
}

@media (max-width: 980px) {
  .public-story-page .public-story-founder-card {
    max-width: 420px !important;
    margin: 0 !important;
  }
}

/* JOHN_STORY_FOUNDER_PHOTO_PHONE_FRAME_END */

/* JOHN_STORY_QUOTE_ITALIC_SOFTEN_START */

/*
  Our Story quote card only.
  Keeps the quote italic and personal, but makes it easier to read.
*/

.public-story-page .public-story-quote-card p {
  margin: 10px 0 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 1.12rem !important;
  line-height: 1.58 !important;
  letter-spacing: -0.012em !important;
  font-weight: 500 !important;
  font-style: italic !important;
}

.public-story-page .public-story-quote-card span {
  color: #1e9bff !important;
  font-size: 3.35rem !important;
  line-height: 0.7 !important;
  font-weight: 700 !important;
}

/* JOHN_STORY_QUOTE_ITALIC_SOFTEN_END */
/* JOHN_PRICING_FONT_WEIGHT_SOFTEN_START */

/*
  Pricing page only.
  Softens pricing card typography so it feels more professional and less chunky.
*/

.public-pricing-page .public-pricing-card h2,
.public-pricing-page .public-pricing-addons-card h2 {
  font-weight: 650 !important;
  letter-spacing: -0.022em !important;
}

.public-pricing-page .public-pricing-price strong {
  font-weight: 650 !important;
  letter-spacing: -0.032em !important;
}

.public-pricing-page .public-pricing-feature-list li {
  font-weight: 400 !important;
}

.public-pricing-page .public-pricing-addon h3 {
  font-weight: 650 !important;
  letter-spacing: -0.014em !important;
}

.public-pricing-page .public-pricing-addon strong {
  font-weight: 650 !important;
}

.public-pricing-page .public-pricing-button,
.public-pricing-page .public-pricing-strip-button {
  font-weight: 650 !important;
}

/* JOHN_PRICING_FONT_WEIGHT_SOFTEN_END */
/* JOHN_HOME_HERO_CARD_HEADERS_CENTER_START */

/*
  Homepage hero six cards only.
  Centers the card headings while keeping the description text normal.
*/

.public-home-page .public-proof-row strong {
  text-align: center !important;
}

.public-home-page .public-proof-row span {
  text-align: left !important;
}

/* JOHN_HOME_HERO_CARD_HEADERS_CENTER_END */
/* JOHN_FEATURES_CARD_WIDTH_AND_HEADERS_CENTER_START */

/*
  Features page only.
  Pulls feature card groups in slightly and centers card titles.
  Body copy stays left aligned for readability.
*/

.public-features-page .public-capability-grid,
.public-features-page .public-feature-list-grid,
.public-features-page .public-provider-grid {
  width: min(100%, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-features-page .public-capability-grid article,
.public-features-page .public-feature-list-grid article,
.public-features-page .public-provider-grid article {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.public-features-page .public-capability-grid h3,
.public-features-page .public-feature-list-grid h3,
.public-features-page .public-provider-grid strong {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.public-features-page .public-capability-grid p,
.public-features-page .public-feature-list-grid p,
.public-features-page .public-feature-list-grid ul,
.public-features-page .public-provider-grid span {
  text-align: left !important;
}

/* JOHN_FEATURES_CARD_WIDTH_AND_HEADERS_CENTER_END */
/* JOHN_PRICING_CARD_HEADERS_CENTER_START */

/*
  Pricing page only.
  Centers the main card headers while leaving supporting text readable.
*/

.public-pricing-page .public-pricing-card > h2,
.public-pricing-page .public-pricing-addons-card > h2 {
  text-align: center !important;
}

.public-pricing-page .public-pricing-card > .public-pricing-card-subtitle,
.public-pricing-page .public-pricing-addons-card > .public-pricing-card-subtitle {
  text-align: center !important;
}

/* JOHN_PRICING_CARD_HEADERS_CENTER_END */
/* JOHN_STORY_CARD_HEADERS_CENTER_START */

/*
  Our Story page only.
  Centers the compact card headers while keeping paragraph text left aligned.
*/

.public-story-page .public-story-problem-grid h3,
.public-story-page .public-story-values-grid h3 {
  text-align: center !important;
}

.public-story-page .public-story-problem-grid p,
.public-story-page .public-story-values-grid p {
  text-align: left !important;
}

/* JOHN_STORY_CARD_HEADERS_CENTER_END */
/* DRONEHQ_PUBLIC_CONTACT_PAGE_BUILD_START */

/*
  Contact page only.
  Homepage, Features, Pricing, and Our Story are intentionally untouched.
*/

.public-contact-page {
  background:
    radial-gradient(circle at 76% 10%, rgba(38, 153, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #06111f 0%, #07192c 44%, #06111f 100%) !important;
  color: #ffffff !important;
}

.public-contact-page .public-contact-hero {
  padding: 104px 0 68px !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.16) !important;
}

.public-contact-page .public-contact-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr) !important;
  gap: 76px !important;
  align-items: center !important;
}

.public-contact-page .public-contact-title {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 3.95vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 650 !important;
}

.public-contact-page .public-contact-title span {
  display: block !important;
}

.public-contact-page .contact-title-white {
  color: #ffffff !important;
}

.public-contact-page .contact-title-blue {
  color: #1e9bff !important;
}

.public-contact-page .public-contact-lead {
  max-width: 690px !important;
  margin: 22px 0 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 1rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-contact-page .public-contact-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.public-contact-page .public-contact-status-card,
.public-contact-page .public-contact-form-card,
.public-contact-page .public-contact-info-card,
.public-contact-page .public-contact-topic-grid article {
  border: 1px solid rgba(38, 153, 255, 0.24) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 59, 0.58) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12) !important;
}

.public-contact-page .public-contact-status-card {
  max-width: 430px !important;
  margin-left: auto !important;
  padding: 28px !important;
}

.public-contact-page .public-contact-status-card h2,
.public-contact-page .public-contact-form-card h2,
.public-contact-page .public-contact-info-card h2,
.public-contact-page .public-section-heading h2,
.public-contact-page .public-contact-message h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.85rem, 2.55vw, 2.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.042em !important;
  font-weight: 650 !important;
}

.public-contact-page .public-contact-status-card p:not(.public-eyebrow),
.public-contact-page .public-contact-form-card p,
.public-contact-page .public-contact-info-card p,
.public-contact-page .public-section-heading p:not(.public-eyebrow),
.public-contact-page .public-contact-message p {
  margin: 14px 0 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.96rem !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}

.public-contact-page .public-contact-status-list {
  display: grid !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.public-contact-page .public-contact-status-list div {
  padding: 14px 16px !important;
  border: 1px solid rgba(38, 153, 255, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(4, 15, 29, 0.36) !important;
}

.public-contact-page .public-contact-status-list strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
}

.public-contact-page .public-contact-status-list span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(232, 243, 255, 0.72) !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

.public-contact-page .public-contact-section {
  padding: 58px 0 !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.12) !important;
}

.public-contact-page .public-contact-section-alt {
  background: rgba(5, 17, 31, 0.34) !important;
}

.public-contact-page .public-contact-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.public-contact-page .public-contact-form-card,
.public-contact-page .public-contact-info-card {
  padding: 28px 30px !important;
}

.public-contact-page .public-contact-form {
  display: grid !important;
  gap: 14px !important;
  margin-top: 22px !important;
}

.public-contact-page .public-contact-field-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.public-contact-page .public-contact-form label {
  display: grid !important;
  gap: 7px !important;
}

.public-contact-page .public-contact-form label span {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
}

.public-contact-page .public-contact-form label em {
  color: rgba(232, 243, 255, 0.56) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.public-contact-page .public-contact-form input,
.public-contact-page .public-contact-form textarea {
  width: 100% !important;
  border: 1px solid rgba(38, 153, 255, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(4, 15, 29, 0.62) !important;
  color: #ffffff !important;
  outline: none !important;
  font: inherit !important;
}

.public-contact-page .public-contact-form input {
  min-height: 44px !important;
  padding: 0 14px !important;
}

.public-contact-page .public-contact-form textarea {
  resize: vertical !important;
  min-height: 104px !important;
  padding: 12px 14px !important;
}

.public-contact-page .public-contact-form input::placeholder,
.public-contact-page .public-contact-form textarea::placeholder {
  color: rgba(232, 243, 255, 0.42) !important;
}

.public-contact-page .public-contact-submit {
  width: fit-content !important;
  min-height: 42px !important;
  padding: 12px 18px !important;
  margin-top: 2px !important;
  font-size: 0.86rem !important;
}

.public-contact-page .public-contact-form-note {
  margin-top: 0 !important;
  color: rgba(232, 243, 255, 0.62) !important;
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
}

.public-contact-page .public-contact-email-list {
  display: grid !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.public-contact-page .public-contact-email-list a {
  display: block !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(38, 153, 255, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(4, 15, 29, 0.36) !important;
  text-decoration: none !important;
}

.public-contact-page .public-contact-email-list strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
}

.public-contact-page .public-contact-email-list span {
  display: block !important;
  margin-top: 5px !important;
  color: #1e9bff !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
}

.public-contact-page .public-section-heading {
  max-width: 820px !important;
  margin: 0 auto 30px !important;
  text-align: center !important;
}

.public-contact-page .public-section-heading h2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-contact-page .public-section-heading p:not(.public-eyebrow) {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-contact-page .public-contact-topic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: min(100%, 1260px) !important;
  margin: 0 auto !important;
}

.public-contact-page .public-contact-topic-grid article {
  min-height: 132px !important;
  padding: 20px 22px !important;
}

.public-contact-page .public-contact-topic-grid h3 {
  margin: 0 0 9px !important;
  color: #ffffff !important;
  font-size: 0.96rem !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  text-align: center !important;
}

.public-contact-page .public-contact-topic-grid p {
  margin: 0 !important;
  color: rgba(232, 243, 255, 0.82) !important;
  font-size: 0.84rem !important;
  line-height: 1.48 !important;
  text-align: left !important;
}

.public-contact-page .public-contact-message {
  padding: 66px 0 62px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(38, 153, 255, 0.12) !important;
}

.public-contact-page .public-contact-message h2 {
  max-width: 850px !important;
  margin: 0 auto !important;
  font-size: clamp(2.15rem, 3.35vw, 3.35rem) !important;
}

.public-contact-page .public-contact-message h2 span {
  display: block !important;
}

.public-contact-page .public-contact-message h2 span:last-child {
  color: #1e9bff !important;
}

.public-contact-page .public-contact-message p {
  max-width: 710px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px) {
  .public-contact-page .public-contact-hero-grid,
  .public-contact-page .public-contact-main-grid {
    grid-template-columns: 1fr !important;
  }

  .public-contact-page .public-contact-status-card {
    max-width: none !important;
    margin-left: 0 !important;
  }

  .public-contact-page .public-contact-topic-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .public-contact-page .public-contact-hero {
    padding: 82px 0 54px !important;
  }

  .public-contact-page .public-contact-title {
    font-size: clamp(2.35rem, 10vw, 3.25rem) !important;
  }

  .public-contact-page .public-contact-field-row {
    grid-template-columns: 1fr !important;
  }
}

/* DRONEHQ_PUBLIC_CONTACT_PAGE_BUILD_END */
/* JOHN_CONTACT_PUBLIC_TESTING_COPY_TUNE_START */

/*
  Contact page only.
  Makes the status card wording match current DroneHQ state.
*/

.public-contact-page .public-contact-status-card h2 span {
  display: block !important;
  color: #1e9bff !important;
}

/* JOHN_CONTACT_PUBLIC_TESTING_COPY_TUNE_END */
/* JOHN_CONTACT_BETA_TESTING_STATUS_TUNE_START */

/*
  Contact page only.
  Keeps the status-card headline to two clean lines.
*/

.public-contact-page .public-contact-status-card {
  max-width: 470px !important;
}

.public-contact-page .public-contact-status-card h2 {
  max-width: 390px !important;
}

.public-contact-page .public-contact-status-card h2 span {
  display: block !important;
  color: #1e9bff !important;
  white-space: nowrap !important;
}

/* JOHN_CONTACT_BETA_TESTING_STATUS_TUNE_END */
/* JOHN_CONTACT_FORM_AND_EMAIL_TUNE_START */

/*
  Contact page only.
  Lightens form fields and tightens the contact email option boxes.
*/

.public-contact-page .public-contact-form input,
.public-contact-page .public-contact-form textarea {
  background: rgba(12, 42, 75, 0.72) !important;
  border-color: rgba(60, 166, 255, 0.36) !important;
  color: #ffffff !important;
}

.public-contact-page .public-contact-form input:focus,
.public-contact-page .public-contact-form textarea:focus {
  background: rgba(14, 49, 88, 0.82) !important;
  border-color: rgba(38, 153, 255, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(38, 153, 255, 0.12) !important;
}

.public-contact-page .public-contact-form input::placeholder,
.public-contact-page .public-contact-form textarea::placeholder {
  color: rgba(232, 243, 255, 0.58) !important;
}

.public-contact-page .public-contact-info-card {
  align-self: start !important;
}

.public-contact-page .public-contact-email-list {
  width: fit-content !important;
  min-width: 300px !important;
  max-width: 360px !important;
}

.public-contact-page .public-contact-email-list a {
  padding: 12px 14px !important;
  min-width: 300px !important;
}

.public-contact-page .public-contact-email-list strong {
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
}

.public-contact-page .public-contact-email-list span {
  margin-top: 4px !important;
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
}

/* JOHN_CONTACT_FORM_AND_EMAIL_TUNE_END */

/* DRONEHQ_FEATURES_SYNC_AGENT_HERO */

.public-features-page .public-features-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr) !important;
  align-items: center !important;
  gap: 56px !important;
}

.public-features-page .public-features-hero-copy {
  min-width: 0 !important;
}

.public-features-page .public-features-hero-visual {
  width: 100% !important;
  max-width: 560px !important;
  justify-self: end !important;
  padding: 10px !important;
  border: 1px solid rgba(38, 153, 255, 0.30) !important;
  border-radius: 18px !important;
  background: rgba(4, 16, 30, 0.72) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 32px rgba(30, 155, 255, 0.08) !important;
  overflow: hidden !important;
}

.public-features-page .public-features-hero-visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 11px !important;
}

@media (max-width: 900px) {
  .public-features-page .public-features-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .public-features-page .public-features-hero-visual {
    max-width: 680px !important;
    justify-self: start !important;
  }
}

/* DRONEHQ_FEATURES_SYNC_AGENT_HERO_END */
/* DRONEHQ_PUBLIC_CONTACT_SUCCESS_V1 */
.public-contact-success {
  display: block;
  margin: 16px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 12px;
  background: rgba(22, 163, 74, 0.14);
  color: #bbf7d0;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* DRONEHQ_PUBLIC_HOME_HERO_ALIGNMENT_ICONS_V2_START */
.public-home-hero .public-hero-copy {
  margin-top: 28px;
}

.public-home-hero .public-eyebrow {
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

.public-home-hero .public-proof-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.public-home-hero .public-proof-icon {
  width: 26px;
  height: 26px;
  color: #21a7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-home-hero .public-proof-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-home-hero .public-proof-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.public-home-hero .public-proof-copy strong,
.public-home-hero .public-proof-copy > span {
  display: block;
}

@media (max-width: 900px) {
  .public-home-hero .public-hero-copy {
    margin-top: 12px;
  }
}
/* DRONEHQ_PUBLIC_HOME_HERO_ALIGNMENT_ICONS_V2_END */
/* DRONEHQ_PUBLIC_HOME_HERO_CARD_BALANCE_V1 */
/*
  Keep the six proof cards visually aligned with the full hero copy width.
  Three equal columns, two rows, no narrow card cluster.
*/
.public-home-hero .public-proof-row {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-home-hero .public-proof-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .public-home-hero .public-proof-row {
    grid-template-columns: 1fr;
  }
}
/* DRONEHQ_PUBLIC_HOME_HERO_CARD_WIDTH_FINAL_V1 */
/*
  Final homepage hero card sizing:
  - widen the left hero content area
  - make all six cards span the same visual width
  - keep 3 equal columns x 2 rows
*/
.public-home-hero .public-hero-copy {
  width: 720px !important;
  max-width: 720px !important;
}

.public-home-hero .public-proof-row {
  width: 720px !important;
  max-width: 720px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.public-home-hero .public-proof-card {
  width: auto !important;
  min-width: 0 !important;
  min-height: 84px;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}

.public-home-hero .public-proof-copy {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  .public-home-hero .public-hero-copy,
  .public-home-hero .public-proof-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .public-home-hero .public-proof-row {
    grid-template-columns: 1fr !important;
  }
}
/* DRONEHQ_PUBLIC_HOME_HERO_CARD_WIDTH_FINAL_V1_END */
/* DRONEHQ_PUBLIC_HOME_HERO_HEADING_CENTER_V1 */
/*
  Center the three hero heading elements within the 720px left hero section:
  eyebrow + white headline line + blue headline line.
  Paragraph, buttons, cards, and drone image remain unchanged.
*/
.public-home-hero .public-eyebrow,
.public-home-hero .public-hero-title,
.public-home-hero .public-hero-title-line {
  width: 100%;
  text-align: center !important;
}

.public-home-hero .public-hero-title-line {
  display: block;
}
/* DRONEHQ_PUBLIC_HOME_HERO_HEADING_CENTER_V1_END */
/* DRONEHQ_PUBLIC_HOME_HERO_HEADING_CENTER_V2 */
/*
  Force the eyebrow + white headline + blue headline to be
  genuinely centered as three independent lines inside the
  720px hero content column.
*/
.public-home-hero .public-eyebrow {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.public-home-hero .public-hero-title {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.public-home-hero .public-hero-title-line {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
/* DRONEHQ_PUBLIC_HOME_HERO_HEADING_CENTER_V2_END */
/* DRONEHQ_PUBLIC_HOME_HERO_LEAD_WIDTH_V1 */
/*
  Let the supporting hero paragraph use the full 720px content width
  so it wraps less and visually matches the headline/card section.
*/
.public-home-hero .public-hero-lead {
  width: 100% !important;
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* DRONEHQ_PUBLIC_HOME_HERO_LEAD_WIDTH_V1_END */

/* DRONEHQ_PUBLIC_HOME_HERO_LEAD_CENTER_FINAL */
.public-home-hero .public-hero-lead {
  width: 720px !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
    transform: translateX(5px);
}

@media (max-width: 900px) {
  .public-home-hero .public-hero-lead {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* DRONEHQ_PUBLIC_HOME_PROOF_TITLE_ALIGNMENT_V1 */
/*
  Final hero card cleanup:
  - center each proof-card title within the text column
  - keep descriptions left aligned
  - preserve icons, card widths, and grid layout
*/
.public-home-hero .public-proof-copy > strong {
  width: 100%;
  display: block;
  text-align: center !important;
}

.public-home-hero .public-proof-copy > span {
  width: 100%;
  display: block;
  text-align: left !important;
}
/* DRONEHQ_PUBLIC_HOME_PROOF_TITLE_ALIGNMENT_V1_END */

/* MANUAL PROOF CARD TITLE POSITIONING */

.public-home-hero .public-proof-card:nth-child(1) .public-proof-copy > strong {
  transform: translateX(-16px);
}

.public-home-hero .public-proof-card:nth-child(2) .public-proof-copy > strong {
  transform: translateX(-16px);
}

.public-home-hero .public-proof-card:nth-child(3) .public-proof-copy > strong {
  transform: translateX(-16px);
}

.public-home-hero .public-proof-card:nth-child(4) .public-proof-copy > strong {
  transform: translateX(-16px);
}

.public-home-hero .public-proof-card:nth-child(5) .public-proof-copy > strong {
  transform: translateX(-16px);
}

.public-home-hero .public-proof-card:nth-child(6) .public-proof-copy > strong {
  transform: translateX(-16px);
}
/* DroneHQ Operations Core six-card grid */
.operations-core-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operations-core-grid > article {
  grid-column: auto;
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .operations-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .operations-core-grid {
    grid-template-columns: 1fr;
  }
}
/* DRONEHQ OPERATIONS CORE FINAL 3-COLUMN OVERRIDE */
.public-capability-grid.operations-core-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.public-capability-grid.operations-core-grid > article {
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .public-capability-grid.operations-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .public-capability-grid.operations-core-grid {
    grid-template-columns: 1fr !important;
  }
}

/* DRONEHQ PUBLIC CONTACT COMPACT SUCCESS TEXT */
.public-contact-success {
  display: block !important;
  margin: 10px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4ade80 !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V1_START */
/*
  Homepage-only mobile correction.
  Prevents later desktop-specific homepage rules from forcing
  grids and controls wider than the mobile viewport.
*/

@media (max-width: 760px) {

  /* Every homepage element must respect the viewport. */
  .public-home-page,
  .public-home-page *,
  .public-home-page *::before,
  .public-home-page *::after {
    box-sizing: border-box;
  }

  .public-home-page .public-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero */
  .public-home-page .public-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .public-home-page .public-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .public-home-page .public-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .public-home-page .public-hero-actions .public-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Hero proof / integration cards */
  .public-home-page .public-proof-row {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .public-home-page .public-proof-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Remove desktop positioning nudges from proof-card titles. */
  .public-home-page .public-proof-card .public-proof-copy > strong {
    transform: none !important;
  }

  /* Dashboard / preflight section */
  .public-home-page .public-dashboard-section .public-split-grid,
  .public-home-page .public-dashboard-section .public-container.public-split-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 28px !important;
  }

  .public-home-page .public-preflight-preview-card,
  .public-home-page .public-dashboard-card.public-preflight-preview-card,
  .public-home-page .public-insight-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .public-home-page .public-preflight-preview-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Preflight feature cards */
  .public-home-page .public-preflight-feature-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  .public-home-page .public-preflight-feature {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Other homepage card grids */
  .public-home-page .public-feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Long text must wrap rather than widen the page. */
  .public-home-page h1,
  .public-home-page h2,
  .public-home-page h3,
  .public-home-page p,
  .public-home-page span,
  .public-home-page strong {
    overflow-wrap: break-word;
  }
}

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V1_END */

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V2_START */

@media (max-width: 760px) {

  /* Stop the Real-time insights section from overlapping the proof cards. */
  .public-home-page .public-dashboard-section .public-container.public-split-grid {
    transform: none !important;
    margin-top: 28px !important;
  }

  /* Keep the three preflight cards centered inside the phone viewport. */
  .public-home-page .public-preflight-feature-grid {
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .public-home-page .public-preflight-feature {
    text-align: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .public-home-page .public-preflight-feature strong,
  .public-home-page .public-preflight-feature span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V2_END */

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V3_START */

@media (max-width: 760px) {
  .public-home-page .public-feature-grid {
    gap: 12px !important;
  }

  .public-home-page .public-feature-grid article {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 16px !important;
  }

  .public-home-page .public-feature-grid h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .public-home-page .public-feature-grid p {
    margin: 8px 0 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }
}

/* DRONEHQ_PUBLIC_HOME_MOBILE_FIX_V3_END */

/* DRONEHQ_PUBLIC_BRAND_HQ_V1_START */

/* Shared public-site DroneHQ wordmark treatment. */
.public-brand-hq {
  color: #168bff !important;
}

/* Keep selected desktop marketing headings from wrapping unnecessarily. */
@media (min-width: 1100px) {
  .public-features-page .public-section-heading {
    max-width: 1180px !important;
  }

  .public-features-page .public-section-heading h2 {
    max-width: 1180px !important;
  }

  .public-contact-page .public-contact-options h2 {
    max-width: none !important;
  }

  .public-contact-page .public-contact-options-heading {
    white-space: nowrap;
  }
}

/* All public section eyebrows use the DroneHQ blue treatment. */
.public-home-page .public-eyebrow,
.public-features-page .public-eyebrow,
.public-pricing-page .public-eyebrow,
.public-story-page .public-eyebrow,
.public-contact-page .public-eyebrow {
  color: #27a8ff !important;
}

/* DRONEHQ_PUBLIC_BRAND_HQ_V1_END */
/* DRONEHQ_PUBLIC_DESKTOP_HEADING_CLEANUP_V1_START */

/*
  Allow major marketing headings to use the available desktop width.
  Mobile remains untouched and can wrap naturally.
*/
@media (min-width: 1100px) {

  .public-home-page .public-section-heading,
  .public-features-page .public-section-heading,
  .public-story-page .public-section-heading,
  .public-contact-page .public-section-heading {
    max-width: 1180px !important;
    width: 100% !important;
  }

  .public-home-page .public-section-heading h2,
  .public-features-page .public-section-heading h2,
  .public-story-page .public-section-heading h2,
  .public-contact-page .public-section-heading h2 {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: balance;
  }

  /*
    Specific large section headings that currently wrap too early.
    These remain responsive because this only applies on wide desktop.
  */
  .public-features-page h2,
  .public-story-page h2 {
    text-wrap: balance;
  }
}

/* Temporary launch-region availability notice. */
.public-availability-notice {
  max-width: 920px;
  margin: 18px auto 28px;
  padding: 12px 18px;
  border: 1px solid rgba(39, 168, 255, 0.30);
  border-radius: 12px;
  background: rgba(13, 35, 66, 0.58);
  color: rgba(226, 238, 255, 0.94);
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.45;
}

.public-availability-notice strong {
  color: #4db8ff;
}

@media (max-width: 760px) {
  .public-availability-notice {
    margin: 14px 0 22px;
    padding: 11px 14px;
    font-size: 0.82rem;
  }
}

/* DRONEHQ_PUBLIC_DESKTOP_HEADING_CLEANUP_V1_END */
/* DRONEHQ_PUBLIC_STAGING_HEADING_CLEANUP_V1_START */

/* Keep the DroneHQ brand together anywhere it appears inside headings. */
.public-brand-wordmark {
  display: inline !important;
  white-space: nowrap !important;
}

.public-brand-wordmark .public-brand-hq {
  display: inline !important;
}

/* Features hero: preserve the intended 3-line title on wide desktop. */
@media (min-width: 1100px) {
  .public-features-page .public-features-hero-copy {
    width: 100% !important;
    max-width: 920px !important;
  }

  .public-features-page .public-features-title {
    width: 100% !important;
    max-width: 920px !important;
  }

  .public-features-page .public-features-title .features-title-blue {
    white-space: nowrap !important;
  }
}

/* Contact status card: keep DroneHQ together and make the heading compact. */
.public-contact-page .public-contact-status-card h2 {
  max-width: 100% !important;
  text-wrap: balance;
}

.public-contact-page .public-contact-status-card h2 .public-brand-wordmark,
.public-contact-page .public-contact-status-card h2 .public-brand-hq {
  display: inline !important;
}

.public-contact-page .public-contact-status-card .public-contact-beta-line {
  display: inline !important;
}

/* Reach heading must remain inside its card. */
.public-contact-page .public-contact-options-heading {
  white-space: normal !important;
  max-width: 100% !important;
  font-size: clamp(1.6rem, 2vw, 2rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

/* Thank-you headline: exactly two visual lines on desktop. */
.public-contact-page .public-contact-message h2 .public-contact-thank-line {
  display: block !important;
  white-space: nowrap !important;
}

.public-contact-page .public-contact-message h2 .public-brand-wordmark,
.public-contact-page .public-contact-message h2 .public-brand-hq {
  display: inline !important;
}

@media (max-width: 760px) {
  .public-features-page .public-features-title .features-title-blue,
  .public-contact-page .public-contact-message h2 .public-contact-thank-line {
    white-space: normal !important;
  }
}

/* DRONEHQ_PUBLIC_STAGING_HEADING_CLEANUP_V1_END */
/* DRONEHQ_PUBLIC_BRAND_LINE_CLEANUP_V1_START */

/* Drone stays white; only HQ carries the DroneHQ blue. */
.public-brand-drone {
  color: #ffffff !important;
}

.public-brand-hq {
  color: #168bff !important;
}

/* Prevent the wrapper from tinting the entire DroneHQ wordmark blue. */
.public-brand-wordmark {
  color: inherit !important;
}

/* Connected-platform service labels stay on one line. */
.public-features-page .public-brand-service {
  display: inline-block !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

/* Keep DroneHQ pieces inline inside service labels. */
.public-features-page .public-brand-service .public-brand-drone,
.public-features-page .public-brand-service .public-brand-hq {
  display: inline !important;
}

/* Contact thank-you keeps Drone white and HQ blue. */
.public-contact-page .public-contact-message .public-brand-wordmark {
  color: #ffffff !important;
}

/* DRONEHQ_PUBLIC_BRAND_LINE_CLEANUP_V1_END */
/* DRONEHQ_PUBLIC_FEATURE_SERVICE_LABEL_FIX_V2_START */

/*
  Connected Platform cards:
  force DroneHQ API / DroneHQ AI to render as one horizontal label.
*/
.public-features-page .public-feature-card .public-brand-service,
.public-features-page .public-provider-card .public-brand-service,
.public-features-page article .public-brand-service {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

/* Override any older span/block rules inside feature/provider cards. */
.public-features-page .public-brand-service > span,
.public-features-page .public-brand-service .public-brand-drone,
.public-features-page .public-brand-service .public-brand-hq {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}

/* Drone white, HQ blue. */
.public-features-page .public-brand-service .public-brand-drone {
  color: #ffffff !important;
}

.public-features-page .public-brand-service .public-brand-hq {
  color: #168bff !important;
}

/* DRONEHQ_PUBLIC_FEATURE_SERVICE_LABEL_FIX_V2_END */
/* DRONEHQ_CONTACT_STATUS_COLOR_FINAL_V1_START */

/* Current Status:
   Drone white / HQ blue / all remaining heading text white.
*/
.public-contact-page .public-contact-status-card h2 {
  color: #ffffff !important;
}

.public-contact-page .public-contact-status-card h2 .public-brand-wordmark {
  display: inline !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

.public-contact-page .public-contact-status-card h2 .public-brand-drone {
  display: inline !important;
  color: #ffffff !important;
}

.public-contact-page .public-contact-status-card h2 .public-brand-hq {
  display: inline !important;
  color: #168bff !important;
}

.public-contact-page .public-contact-status-card h2 .public-contact-beta-line {
  display: inline !important;
  color: #ffffff !important;
}

/* DRONEHQ_CONTACT_STATUS_COLOR_FINAL_V1_END */
/* DRONEHQ_PUBLIC_SMALL_HEADINGS_FINAL_V2_START */

/* Small feature cards: no blue HQ treatment. */
.public-features-page .public-feature-list-grid h3 {
  color: #ffffff !important;
}

/* Provider-card headings match every other provider card. */
.public-features-page .public-provider-grid article > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Story mission: all white and one line on desktop. */
.public-story-page .public-story-mission-heading {
  color: #ffffff !important;
}

@media (min-width: 1100px) {
  .public-story-page .public-story-mission-heading {
    width: 100% !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1099px) {
  .public-story-page .public-story-mission-heading {
    white-space: normal !important;
  }
}

/* DRONEHQ_PUBLIC_SMALL_HEADINGS_FINAL_V2_END */
/* DRONEHQ_CONTACT_THANKS_FINAL_V2_START */

/* Explicit two-line Contact closing heading. */
.public-contact-page .public-contact-thanks-heading {
  color: #ffffff !important;
  text-align: center !important;
}

.public-contact-page .public-contact-thanks-heading > .public-contact-thanks-line-one,
.public-contact-page .public-contact-thanks-heading > .public-contact-thanks-line-two {
  display: block !important;
  color: #ffffff !important;
}

/* Keep DroneHQ together on line one. */
.public-contact-page .public-contact-thanks-brand {
  display: inline !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

.public-contact-page .public-contact-thanks-brand .public-contact-thanks-hq {
  display: inline !important;
  color: #168bff !important;
}

/* Entire second line is white. */
.public-contact-page .public-contact-thanks-line-two {
  color: #ffffff !important;
}

/* DRONEHQ_CONTACT_THANKS_FINAL_V2_END */
/* DRONEHQ_CONTACT_THANKS_TWO_LINE_FINAL_V4_START */

body .public-contact-page .public-contact-message .public-contact-thanks-heading {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  color: #ffffff !important;
}

body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-line-one,
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-line-two {
  display: block !important;
  width: 100% !important;
  color: #ffffff !important;
}

/* Keep the entire first line together on desktop. */
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-line-one {
  white-space: nowrap !important;
}

/* Keep the second line together too. */
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-line-two {
  white-space: nowrap !important;
}

/* DroneHQ stays together. */
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-brand {
  display: inline !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

/* Drone white. */
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-drone {
  display: inline !important;
  color: #ffffff !important;
}

/* HQ blue. */
body .public-contact-page .public-contact-message
.public-contact-thanks-heading
.public-contact-thanks-hq {
  display: inline !important;
  color: #168bff !important;
}

/* Allow natural wrapping again on smaller screens. */
@media (max-width: 760px) {
  body .public-contact-page .public-contact-message
  .public-contact-thanks-heading
  .public-contact-thanks-line-one,
  body .public-contact-page .public-contact-message
  .public-contact-thanks-heading
  .public-contact-thanks-line-two {
    white-space: normal !important;
  }
}

/* DRONEHQ_CONTACT_THANKS_TWO_LINE_FINAL_V4_END */
/* DRONEHQ_STORY_MISSION_CENTER_FINAL_V1_START */

.public-story-page .public-story-mission-heading {
  width: fit-content !important;
  max-width: calc(100% - 48px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  color: #ffffff !important;
}

@media (min-width: 1100px) {
  .public-story-page .public-story-mission-heading {
    white-space: nowrap !important;
  }
}

@media (max-width: 1099px) {
  .public-story-page .public-story-mission-heading {
    width: auto !important;
    white-space: normal !important;
  }
}

/* DRONEHQ_STORY_MISSION_CENTER_FINAL_V1_END */
/* DRONEHQ_PUBLIC_FUTURE_APPS_V1_START */

.public-features-page .public-future-apps-section {
  padding: 48px 0 !important;
}

.public-features-page .public-future-apps-section .public-section-heading {
  margin-bottom: 24px !important;
}

.public-features-page .public-future-apps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.public-features-page .public-future-apps-grid article {
  min-height: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(39, 168, 255, 0.30) !important;
  border-radius: 16px !important;
  background: rgba(8, 31, 54, 0.72) !important;
  text-align: center !important;
}

.public-features-page .public-future-apps-grid h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.public-features-page .public-future-apps-grid p {
  margin: 10px 0 0 !important;
  color: rgba(232, 243, 255, 0.84) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

.public-features-page .public-future-apps-note {
  margin: 18px auto 0 !important;
  text-align: center !important;
  color: rgba(232, 243, 255, 0.68) !important;
  font-size: 0.82rem !important;
}

@media (max-width: 760px) {
  .public-features-page .public-future-apps-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .public-features-page .public-future-apps-grid article {
    padding: 18px 16px !important;
  }
}

/* DRONEHQ_PUBLIC_FUTURE_APPS_V1_END */
/* DRONEHQ_STORY_MISSION_TRUE_CENTER_V2_START */

/* Center the entire mission heading area, not only the h2 text box. */
.public-story-page .public-story-mission {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.public-story-page .public-story-mission .public-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.public-story-page .public-story-mission-heading {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  color: #ffffff !important;
}

@media (min-width: 1100px) {
  .public-story-page .public-story-mission-heading {
    white-space: nowrap !important;
  }
}

@media (max-width: 1099px) {
  .public-story-page .public-story-mission-heading {
    white-space: normal !important;
  }
}

/* DRONEHQ_STORY_MISSION_TRUE_CENTER_V2_END */
/* DRONEHQ_STORY_PHILOSOPHY_STACK_V1_START */

/* Philosophy heading belongs above its supporting text. */
.public-story-page .public-story-philosophy {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  align-items: start !important;
}

/* Keep the heading area compact above the copy. */
.public-story-page .public-story-philosophy > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
}

/* Supporting copy sits directly below and can use the available width. */
.public-story-page .public-story-philosophy-copy {
  width: 100% !important;
  max-width: none !important;
}

/* DRONEHQ_STORY_PHILOSOPHY_STACK_V1_END */
/* DRONEHQ_STORY_MISSION_VIEWPORT_CENTER_V3_START */

/*
  Mission section final geometry.
  Keep normal page/container geometry, but center the headline against
  the viewport so previous width/max-width rules cannot visually offset it.
*/
.public-story-page .public-story-mission {
  text-align: center !important;
}

.public-story-page .public-story-mission .public-container {
  width: min(var(--public-max), calc(100% - 48px)) !important;
  max-width: var(--public-max) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.public-story-page .public-story-mission-heading {
  display: block !important;
  box-sizing: border-box !important;

  /* Full viewport line centered independently of the content container. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;

  color: #ffffff !important;
  text-align: center !important;
}

@media (min-width: 1100px) {
  .public-story-page .public-story-mission-heading {
    white-space: nowrap !important;
  }
}

@media (max-width: 1099px) {
  .public-story-page .public-story-mission-heading {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: normal !important;
  }
}

/* DRONEHQ_STORY_MISSION_VIEWPORT_CENTER_V3_END */
/* DRONEHQ_STORY_FINAL_MANUAL_ALIGNMENT_V1_START */

/* Why DroneHQ Exists: keep heading on one centered desktop line. */
@media (min-width: 1100px) {
  .public-story-page
  .public-story-section-alt
  .public-section-heading h2 {
    max-width: none !important;
    width: max-content !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* Philosophy wrapper position confirmed manually. */
.public-story-page .public-story-philosophy > div:first-child {
  transform: translateX(10px) !important;
}

/* Philosophy heading position confirmed manually. */
.public-story-page .public-story-philosophy > div:first-child h2 {
  transform: translateX(500px) !important;
}

/* Mission heading position confirmed manually. */
@media (min-width: 1100px) {
  .public-story-page .public-story-mission-heading {
    transform: translateX(-150px) !important;
  }
}

/* Reset manual desktop nudges on smaller screens. */
@media (max-width: 1099px) {
  .public-story-page .public-story-philosophy > div:first-child,
  .public-story-page .public-story-philosophy > div:first-child h2,
  .public-story-page .public-story-mission-heading {
    transform: none !important;
  }

  .public-story-page
  .public-story-section-alt
  .public-section-heading h2 {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* DRONEHQ_STORY_FINAL_MANUAL_ALIGNMENT_V1_END */
/* DRONEHQ_STORY_FINAL_TESTED_ALIGNMENT_V2_START */

@media (min-width: 1100px) {

  /* Why DroneHQ Exists: one centered line. */
  .public-story-page
  .public-story-section-alt
  .public-section-heading h2 {
    max-width: none !important;
    width: max-content !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Philosophy block values confirmed manually in DevTools. */
  .public-story-page .public-story-philosophy > div:first-child {
    transform: translateX(10px) !important;
  }

  .public-story-page
  .public-story-philosophy
  > div:first-child
  .public-eyebrow {
    transform: translateX(650px) !important;
  }

  .public-story-page
  .public-story-philosophy
  > div:first-child
  h2 {
    transform: translateX(500px) !important;
  }

  /* Mission value confirmed manually in DevTools. */
  .public-story-page .public-story-mission-heading {
    transform: translateX(-150px) !important;
  }
}

/* Smaller screens return to normal responsive flow. */
@media (max-width: 1099px) {

  .public-story-page
  .public-story-section-alt
  .public-section-heading h2 {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .public-story-page .public-story-philosophy > div:first-child,
  .public-story-page
  .public-story-philosophy
  > div:first-child
  .public-eyebrow,
  .public-story-page
  .public-story-philosophy
  > div:first-child
  h2,
  .public-story-page .public-story-mission-heading {
    transform: none !important;
  }
}

/* DRONEHQ_STORY_FINAL_TESTED_ALIGNMENT_V2_END */