/* Flightna — page-level styles, hero internals & responsive */

/* Page hero (non-home, light) */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; top: -40%; right: -10%; width: 480px; height: 480px; background: var(--grad-soft); border-radius: 50%; filter: blur(60px); opacity: .7; pointer-events: none; }
.page-hero .inner { position: relative; max-width: 760px; }
.page-hero h1 { margin: var(--s-4) 0; }
.page-hero .lead { max-width: 60ch; }
.page-hero .hero-cta { margin-top: var(--s-5); display: flex; gap: .8rem; flex-wrap: wrap; }

/* Split layout (text + visual) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.split.narrow { gap: var(--s-6); }

/* Connects-to chips row */
.connects { display: flex; flex-wrap: wrap; gap: .7rem; }
.connects a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font-size: .9rem; color: var(--ink); font-weight: 500; transition: all var(--t-fast) var(--ease); }
.connects a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.connects a .ico { width: 16px; height: 16px; color: var(--brand); }

/* Native-proof panel */
.proof-panel { background: var(--ink); color: var(--d-ink-2); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.6rem); }
.proof-panel h3 { color: #fff; }
.proof-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: var(--s-5); }
.proof-panel li { display: flex; gap: .6rem; font-size: .95rem; }
.proof-panel li .ico { width: 18px; height: 18px; color: var(--aqua); flex: none; margin-top: .15rem; }

/* Solution pain→fix list */
.solve { display: grid; gap: var(--s-4); }
.solve-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.solve-row .pain b { color: var(--err); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .3rem; }
.solve-row .fix b { color: var(--ok); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .3rem; }
.solve-row .mods { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }

/* ROI calculator */
.calc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--sh-2); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.calc-out { text-align: center; background: var(--d-bg); color: #fff; border-radius: var(--r-lg); padding: var(--s-6); }
.calc-out .big { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; }
.calc-out .lbl { color: var(--d-ink-3); font-size: .9rem; }
.range { width: 100%; accent-color: var(--brand); }
.range-val { font-family: var(--font-display); font-weight: 700; color: var(--brand); }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.post-thumb { height: 150px; background: var(--grad); position: relative; }
.post-thumb .tag { position: absolute; bottom: 10px; left: 12px; background: rgba(7,11,22,.6); color: #fff; padding: .25rem .6rem; border-radius: var(--r-sm); font-size: .72rem; font-weight: 600; }
.post-card .body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.post-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.post-card p { font-size: .9rem; color: var(--ink-3); flex: 1; }
.post-card .meta { font-size: .8rem; color: var(--ink-4); margin-top: var(--s-4); }
.article { max-width: 760px; margin-inline: auto; }
.article h2 { margin: var(--s-6) 0 var(--s-3); }
.article h3 { margin: var(--s-5) 0 var(--s-2); }
.article p { margin-bottom: var(--s-4); color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; }
.article ul.bullets { margin: var(--s-4) 0; display: grid; gap: .6rem; }
.article ul.bullets li { display: flex; gap: .6rem; }
.article ul.bullets li .ico { color: var(--brand); width: 18px; height: 18px; flex: none; margin-top: .3rem; }

/* Misc page bits */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.legal-body { max-width: 760px; }
.legal-body h2 { margin: var(--s-6) 0 var(--s-3); font-size: 1.4rem; }
.legal-body p, .legal-body li { color: var(--ink-2); margin-bottom: var(--s-3); }
.legal-body ul { list-style: disc; padding-left: 1.2rem; }

.notfound { text-align: center; padding-block: var(--s-10); }
.notfound .code { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .intg-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-menu, .nav-login { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-inner, .split, .calc-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan.featured { order: -1; }
  .proof-panel ul { grid-template-columns: 1fr; }
  .solve-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .post-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile drawer */
  .nav-drawer {
    position: fixed; inset: 72px 0 0; background: #fff; z-index: 99;
    transform: translateX(100%); transition: transform var(--t) var(--ease);
    overflow-y: auto; padding: var(--s-5) var(--gutter) var(--s-9); display: block;
  }
  body.nav-open .nav-drawer { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav-drawer details { border-bottom: 1px solid var(--line); }
  .nav-drawer summary { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
  .nav-drawer summary::-webkit-details-marker { display: none; }
  .nav-drawer summary .ico { transition: transform var(--t) var(--ease); }
  .nav-drawer details[open] summary .ico { transform: rotate(180deg); }
  .nav-drawer .drawer-links a { display: block; padding: .55rem 0 .55rem var(--s-4); color: var(--ink-2); }
  .nav-drawer .drawer-flat > a { display: block; padding: var(--s-4) 0; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-drawer .drawer-cta { margin-top: var(--s-5); }

  /* Mobile sticky CTA bar */
  .mobile-cta-bar {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    padding: .7rem var(--gutter); background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  body { padding-bottom: 72px; }
}

@media (max-width: 560px) {
  .cols-2, .cols-3, .post-grid, .value-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pipeline .stage { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .pipeline .stage:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
}