/* ===================================================================
   Clock 'N' Compass — shared site styles
   Loaded on every page alongside the Tailwind Play CDN + per-page config.
   Mirrors the approved homepage visual system exactly.
   =================================================================== */

html { scroll-behavior: smooth; }
body {
  background-color: #f7f9fb;
  -webkit-font-smoothing: antialiased;
  font-family: "Hanken Grotesk", sans-serif;
  color: #0f172a;
}
.font-display { font-family: "Plus Jakarta Sans", sans-serif; }

.eyebrow {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* ---- abstract premium surfaces (used sparingly) ---- */
.glass-slab {
  position: absolute; border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,0.85), rgba(255,255,255,0.35));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 30px 60px -28px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}
.plane-blue { background: linear-gradient(150deg, rgba(218,226,253,0.95), rgba(218,226,253,0.3)); }
.plane-lime { background: linear-gradient(150deg, rgba(225,242,176,0.9), rgba(225,242,176,0.25)); }
.wash {
  position: absolute; pointer-events: none; filter: blur(70px); opacity: 0.8;
  background: radial-gradient(closest-side, rgba(218,226,253,0.9), rgba(221,214,243,0.4) 60%, transparent);
}
.object-glow {
  position: absolute; pointer-events: none; filter: blur(50px); opacity: 0.85;
  background: radial-gradient(closest-side, rgba(205,224,255,0.95), rgba(193,241,0,0.12) 55%, transparent 75%);
}

.float-a { animation: floatA 14s ease-in-out infinite; }
.float-b { animation: floatB 17s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-20px) rotate(-1deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(18px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .float-a,.float-b { animation: none; } }

/* ---- on-scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .88s cubic-bezier(.2,.7,.2,1), transform .88s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- misc ---- */
details summary::-webkit-details-marker { display: none; }
.ledger { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100% 34px; }
.icon-line { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* active nav link — lime underline accent */
.cnc-nav-link.is-active { color: #0f172a; }
.cnc-nav-link.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: #c1f100; margin-top: 3px;
}

/* prose for legal pages */
.legal-prose h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 22px; color: #0f172a; margin: 40px 0 14px; letter-spacing: -0.01em; scroll-margin-top: 120px; }
.legal-prose h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 17px; color: #0f172a; margin: 26px 0 10px; }
.legal-prose p { color: #45464d; line-height: 1.7; margin-bottom: 16px; font-size: 15.5px; }
.legal-prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-prose ul li { position: relative; padding-left: 22px; color: #45464d; line-height: 1.6; font-size: 15.5px; }
.legal-prose ul li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 9999px; background: #c1f100; }
.legal-prose a { color: #0b4f8a; text-decoration: underline; text-underline-offset: 2px; }
.legal-prose strong { color: #0f172a; font-weight: 600; }
.legal-prose address { font-style: normal; color: #45464d; line-height: 1.7; font-size: 15.5px; margin-bottom: 16px; }
.legal-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14.5px; }
.legal-prose thead th { text-align: left; font-weight: 600; color: #0f172a; padding: 10px 14px; background: #eceef0; border-bottom: 2px solid #e2e5e9; }
.legal-prose tbody td { padding: 9px 14px; color: #45464d; border-bottom: 1px solid #edeff2; vertical-align: top; }
.legal-prose tbody tr:last-child td { border-bottom: none; }
.legal-prose small { color: #76777d; font-size: 13px; }

/* ---- reduced-motion: make .reveal content immediately visible ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- mobile nav: hide top-level Get Started pill on small screens ---- */
/* The drawer already contains a Get Started CTA; pill only reappears at sm (640px+) */
@media (max-width: 639px) {
  .cnc-nav-pill { display: none !important; }
}

/* ---- touch target minimums (44px) ---- */
/* Drawer close buttons */
#hp-menu-close,
#cnc-menu-close {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* Payment modal close button */
#pm-close {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* Footer nav links: add vertical breathing room on mobile for comfortable tapping */
@media (max-width: 1023px) {
  footer li a {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* ---- intentional mobile rhythm (not just stacked) ---- */
@media (max-width: 767px) {
  .py-section { padding-top: 76px !important; padding-bottom: 76px !important; }
  .price-featured { box-shadow: 0 30px 55px -34px rgba(15,23,42,0.55) !important; }
  .preview-panel { padding: 28px 22px !important; border-radius: 26px !important; }
}

/* ---- focus states — visible ring on keyboard navigation ---- */
:focus-visible {
  outline: 2.5px solid #c1f100;
  outline-offset: 3px;
  border-radius: 4px;
}
details summary:focus-visible { border-radius: 10px; }

/* ---- hero two-column layout ---- */
.cnc-hero-layout {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
@media (min-width: 1280px) { .cnc-hero-layout { gap: 4rem; } }
.cnc-hero-text { flex: 1; min-width: 0; }
.cnc-hero-visual { flex-shrink: 0; width: 290px; }
@media (min-width: 1280px) { .cnc-hero-visual { width: 316px; } }

/* ---- screen-reader utility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- mobile navigation drawer ---- */
#cnc-mobile-menu,
#hp-mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  z-index: 70;
  background: #fff;
  box-shadow: -24px 0 80px -20px rgba(15,23,42,0.22);
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
#cnc-mobile-menu.is-open,
#hp-mobile-menu.is-open { transform: translateX(0); }
#cnc-mobile-overlay,
#hp-mobile-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(15,23,42,0.18);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#cnc-mobile-overlay.is-open,
#hp-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  #cnc-mobile-menu, #hp-mobile-menu,
  #cnc-mobile-overlay, #hp-mobile-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #cnc-mobile-menu, #hp-mobile-menu { transition: none; }
  #cnc-mobile-overlay, #hp-mobile-overlay { transition: none; }
}

/* ---- native <dialog> payment modal ---- */
dialog#payment-modal {
  border: none;
  padding: 0;
  outline: none;
  border-radius: 1.5rem;
  background: #fff;
  width: min(calc(100vw - 2rem), 448px);
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 24px 80px -16px rgba(15,23,42,0.36);
  margin: auto;
  position: fixed;
}
dialog#payment-modal::backdrop {
  background: rgba(15,23,42,0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 639px) {
  dialog#payment-modal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    top: auto;
    margin: 0;
    max-height: 88dvh;
  }
}
/* plan detail panel */
#plan-detail.hidden { display: none; }

/* ---- pricing card — selected plan highlight ---- */
.plan-selected {
  outline: 2px solid #0f172a;
  outline-offset: 3px;
  transition: outline-offset 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bg-primary.plan-selected {
  outline-color: #c1f100;
}