/* ==========================================================================
   jackknife.co shared chrome: header, footer, buttons.

   These four pages are hand-written static HTML with no build step, so the
   markup for the nav and the footer is duplicated per page on purpose. This
   file is what keeps the three of them looking like one site: change a
   colour, a radius or a breakpoint here and every page moves together.

   Deliberately free of Tailwind utilities so the chrome keeps its styling
   independently of how the rest of the page is built.
   ========================================================================== */

/* ---------- Header ------------------------------------------------------ */

.jk-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background: rgba(240, 248, 250, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.jk-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 16px;
}

.jk-nav-logo {
  display: block;
  line-height: 0;
  user-select: none;
  white-space: nowrap;
}

.jk-nav-logo img {
  display: block;
  height: 36px;
  object-fit: contain;
}

.jk-nav-toggle {
  display: none;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.jk-nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jk-nav-link {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: rgba(17, 24, 39, 0.7);
  text-decoration: none;
  transition: color 150ms ease;
}

.jk-nav-link:hover {
  color: #00a385;
}

/* The page you are standing on. Marked with aria-current so the highlight
   and the accessible name stay in step; P2 was exactly these two drifting. */
.jk-nav-link[aria-current="page"] {
  color: #00a385;
}

@media (min-width: 640px) {
  .jk-nav-inner { padding: 16px 32px; }
  .jk-nav-links { gap: 32px; }
  .jk-nav-link { font-size: 14px; }
}

/* Collapse the links behind the menu button on phones, but only once the
   shared script has marked the document as scripted. Without JS the button
   could never reopen the menu, so the links stay inline instead of
   disappearing. */
@media (max-width: 768px) {
  .js .jk-nav-toggle { display: block; }

  .js .jk-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    gap: 16px;
    z-index: 50;
    padding: 16px 24px;
    background: #f0f8fa;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .js .jk-nav-links.jk-nav-links-open { display: flex; }
}

/* ---------- Buttons ----------------------------------------------------- */

.jk-btn {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  padding: 16px 32px;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.jk-btn:active { transform: scale(0.95); }

/* Navy pill on a light section. */
.jk-btn-primary {
  color: #ffffff;
  background: #0a4a5c;
  box-shadow: 0 4px 16px rgba(6, 51, 64, 0.2);
}

.jk-btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(6, 51, 64, 0.25);
}

/* White pill on a navy section. */
.jk-btn-inverse {
  font-size: 18px;
  color: #0a4a5c;
  background: #ffffff;
  padding: 20px 40px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.jk-btn-inverse:hover {
  transform: scale(1.05);
  background: #f0f8fa;
}

/* Teal pill, used by the sticky bar. */
.jk-btn-accent {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #00a385;
  padding: 12px 32px;
}

.jk-btn-accent:hover { background: #009474; }

@media (min-width: 768px) {
  .jk-btn-inverse { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .jk-btn,
  .jk-btn:hover,
  .jk-btn:active { transform: none; }
}

/* ---------- Footer ------------------------------------------------------ */

.jk-footer {
  width: 100%;
  padding: 40px 0 96px;
  background: #063340;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.jk-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 48px;
}

.jk-footer-copy {
  order: 3;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: #d1d5db;
}

.jk-footer-legal {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.jk-footer-link {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: #d1d5db;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 150ms ease, color 150ms ease;
}

.jk-footer-link:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: #00a385;
  text-underline-offset: 4px;
}

.jk-footer-pro {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #00a385;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 150ms ease;
}

.jk-footer-pro:hover {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: #00a385;
  text-underline-offset: 4px;
}

.jk-footer-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 80rem;
  margin: 48px auto 0;
  padding: 32px 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.jk-footer-mark {
  user-select: none;
  line-height: 0;
}

.jk-footer-mark img {
  display: block;
  height: 28px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .jk-footer-inner,
  .jk-footer-base { flex-direction: row; }
  .jk-footer-copy { order: 1; }
  .jk-footer-legal { order: 2; }
  .jk-footer-pro { order: 3; }
}

/* ---------- Mockup labelling -------------------------------------------- */

/* Marks a phone mockup whose numbers would otherwise read as live data.
   Jackknife is pre-launch: there is no rated Pro network behind the review
   counts in these screens, so they say so. */
.jk-illustrative {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(107, 124, 133, 0.25);
  background: rgba(107, 124, 133, 0.06);
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7c85;
}

.jk-illustrative::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Variant for a label sitting on top of a photo rather than on the page. */
.jk-illustrative-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(6, 51, 64, 0.72);
  color: #ffffff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- App Store badge --------------------------------------------- */

/* Apple "Download on the App Store" badge.
   images/app-store-badge-*.svg are Apple's official files, used unmodified.
   Apple Graphic Standards: minimum badge height is 40px onscreen, and minimum
   clear space on all sides equals one-quarter the badge height.
   https://developer.apple.com/app-store/marketing/guidelines/

   Added in PRs #3411 and #3412, which put the same rules in all four pages'
   own <style> blocks. The footer is shared now, so the footer placement is
   shared too. Home keeps its hero-only sizing locally, next to the hero. */

.app-store-badge { display: inline-block; line-height: 0; text-decoration: none; }
.app-store-badge img { display: block; width: auto; }

/* Footer: 40px tall, Apple's onscreen minimum, so 10px is the clear-space
   floor. The row's 16px flex gap clears it on both axes. */
.footer-app-store-badge img { height: 40px; }