/* ============================================================
   pages.css — modern "topcoat" for the inner pages.
   Loaded AFTER bootstrap + style.min.css. Keeps the original
   component styling, but gives every inner page the uplift
   header/footer, Fraunces/Hanken type, cyan accent and a clean
   hero — so the whole site is cohesive with the home.
   ============================================================ */
:root{
  --blue:#17b7ff; --blue-ink:#0a82c6; --blue-deep:#075a89; --blue-wash:#e6f6ff;
  --amber:#f5a623; --amber-ink:#c97e07; --green:#45c167;
  --ink:#14202b; --ink-2:#46586a; --ink-3:#8493a3;
  --line:#e8eef3; --line-2:#f0f4f7; --paper:#fff; --paper-2:#f5f9fc;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1);
  --sh-1:0 1px 2px rgba(20,32,43,.05),0 4px 12px rgba(20,32,43,.06);
  --sh-2:0 8px 24px rgba(20,32,43,.10); --sh-3:0 18px 50px rgba(10,130,198,.20);
}

/* ---- type + base overrides ---- */
body.pg{font-family:var(--font-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
.pg h1,.pg h2,.pg h3,.pg h4,.pg h5{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.pg a{color:inherit}
.pg .link-blue,.pg a.link-blue{color:var(--blue-ink);border-bottom:1.5px solid var(--blue-wash)}
.pg .link-blue:hover{border-color:var(--blue)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---- header (matches home) ---- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.hdr .logo img{height:54px;width:auto}
.hdr .nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.hdr .nav-links a{padding:8px 14px;border-radius:999px;font-weight:500;color:var(--ink-2);font-size:.97rem;text-decoration:none;transition:.18s}
.hdr .nav-links a:hover{color:var(--ink);background:var(--paper-2)}
.hdr .nav-cta{display:flex;align-items:center;gap:10px}
.hdr .nav-login{font-weight:500;color:var(--ink-2);text-decoration:none}
.hdr .nav-login:hover{color:var(--ink)}
.hdr .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.7em 1.3em;border-radius:999px;text-decoration:none;transition:transform .2s var(--ease),box-shadow .25s}
.hdr .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(23,183,255,.4)}
.hdr .btn-primary:hover{transform:translateY(-2px)}
.hdr .arr{transition:transform .25s var(--ease)} .hdr .btn:hover .arr{transform:translateX(3px)}
@media(max-width:680px){.hdr .nav-links,.hdr .nav-login{display:none}}

/* ---- inner-page hero (page-heading) — clean & consistent ---- */
.pg .page-heading,
.pg .page-heading.orange,.pg .page-heading.dark-orange,.pg .page-heading.blue,.pg .page-heading.contact-hero{
  background:radial-gradient(46rem 30rem at 80% -20%,var(--blue-wash),transparent 60%),linear-gradient(180deg,#fff,#f6fbff) !important;
  color:var(--ink) !important;border-bottom:1px solid var(--line);
  padding:clamp(60px,8vw,104px) 0 clamp(34px,5vw,56px) !important;text-align:center;position:relative;overflow:hidden;
}
.pg .page-heading h1{color:var(--ink) !important;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.05;margin:0 auto;max-width:18ch}
.pg .page-heading p,.pg .page-subtitle,.pg .integration-subtitle{color:var(--ink-2) !important;font-size:1.18rem;max-width:52ch;margin:16px auto 0}
.pg .page-heading .eyebrow,.pg .text-uppercase{color:var(--blue-ink) !important}

/* ---- buttons (legacy .button -> cyan pill) ---- */
.pg .button,.pg a.button{
  display:inline-flex;align-items:center;gap:.5em;background:var(--blue) !important;color:#fff !important;
  font-family:var(--font-body);font-weight:600;border:none !important;border-radius:999px !important;
  padding:.85em 1.7em !important;box-shadow:0 8px 22px rgba(23,183,255,.35);transition:transform .2s var(--ease),box-shadow .25s;text-decoration:none
}
.pg .button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(23,183,255,.45)}
.pg .button.btn-white,.pg .button.btn-outline-white{background:#fff !important;color:var(--blue-ink) !important;border:1.5px solid var(--line) !important;box-shadow:none}
.pg .button.btn-claude{background:#d97757 !important;box-shadow:0 8px 22px rgba(217,119,87,.35)}
.pg .button.btn-chatgpt{background:#10a37f !important;box-shadow:0 8px 22px rgba(16,163,127,.3)}

/* ---- soften cards & accents to the brand ---- */
.pg .feature-box,.pg .pricing-card,.pg .testimonial-card,.pg .contact-card,.pg .company-details-card,
.pg .step-container,.pg .faq-item{border-radius:18px}
.pg .pricing-card-team,.pg .cta-section{background:linear-gradient(150deg,var(--blue),var(--blue-deep)) !important}
/* let the "MOST POPULAR" badge overhang the card top (legacy row clips it) */
.pg .pricing-container{overflow:visible !important}
.pg .pricing-badge{background:var(--amber) !important;box-shadow:0 6px 16px rgba(245,166,35,.4);z-index:2}
.pg .pricing-bullet,.pg .integration-bullet,.pg .table-check{color:var(--green) !important}
.pg .color-blue,.pg .color-cyan{color:var(--blue-ink) !important}

/* ---- footer (matches home) ---- */
.ft{position:relative;z-index:2;border-top:1px solid var(--line);padding:60px 0 40px;color:var(--ink-3);background:#fff}
.ft .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ft-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.ft .logo img{height:54px;margin-bottom:12px}
.ft p{color:var(--ink-3);font-size:.95rem}
.ft h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.ft ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.ft a{color:var(--ink-2);font-size:.95rem;text-decoration:none}
.ft a:hover{color:var(--ink)}
.ft-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:.85rem;text-align:center}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-grid{grid-template-columns:1fr}}