/* ═══════════════════════════════════════════════════════════
   Frely inner pages — full v4 Clear Guide restyle.
   Warm paper + teal (same world as /v4/), replaces the dark
   v1 skin on all non-front pages. Loaded AFTER style.css.
   Revision 2026-08-25: header unified with v4, readable text
   (no more gray-on-paper), dark stat numbers, dark CTA button.
   ═══════════════════════════════════════════════════════════ */

/* ── v1 base overrides: inner pages use the page center axis ──
   .section carries vertical-only padding; horizontal spacing comes
   from the .inner-content padding (see style.css alignment fix). */
.section { padding-left: 0 !important; padding-right: 0 !important; }

/* ── axis alignment for blocks inside the content column ──
   After the r4 container fix, .inner-content's axis = header logo axis.
   These blocks sit inside it but had their own centering/indents: */
/* CTA panel: its text is centered via text-align:center - the PANEL box should
   span the content width (max-width from parent rule) and stay on axis */
.inner-content .cta-panel { max-width: 900px; margin-left: 0; margin-right: auto; }
/* stat row: 4 boxes, full content width, no extra centering */
.inner-content .stat-row { max-width: 900px; margin-left: 0; margin-right: auto; }
/* timeline: its padding-left is the rail indent - keep it, but pin the box to axis */
.inner-content .timeline { max-width: 900px; margin-left: 0; margin-right: auto; }

/* ── unified mobile menu (r7): two distinct groups ── */
/* group label "Pages" */
.main-nav .menu-pages-label {
  font-family: var(--fp-mono, ui-monospace, monospace);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fp-faint, #8a949e); margin: 20px 0 6px; padding-left: 2px;
}
/* page links: smaller, muted, with ↗ chip - clearly different from anchors */
.main-nav .page-link {
  font-size: 0.98rem; color: var(--fp-soft, #45566a);
  display: flex; align-items: center; gap: 10px;
}
.main-nav .page-link::before {
  content: "↗"; width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fp-teal-wash, rgba(20,184,166,0.1)); color: var(--fp-teal-deep, #0f766e);
  font-size: 0.78rem; font-weight: 800;
}
/* CTA inside the menu list: button look, centered */
.main-nav .nav-cta {
  display: inline-block; margin-top: 14px;
  background: linear-gradient(135deg, #4a9e5c, #3cb043);
  color: #fff !important; text-decoration: none;
  padding: 13px 26px; border-radius: 12px; font-weight: 700;
}
/* r6: the CTA lives INSIDE the menu <ul>; on desktop widths the menu is a
   horizontal bar - hide the in-menu CTA there (the header already has its own
   "Join the waitlist" button), otherwise it pushes the row out of the header */
@media (min-width: 721px) {
  .main-nav .nav-cta { display: none; }
}
/* checklist: chip + text as a flex row - no floating absolute badge,
   chip aligns with the first text line, gap is controlled */
.check-list li {
  display: flex !important; align-items: flex-start !important;
  gap: 14px !important; padding: 18px 18px !important;
}
.check-list li::before {
  position: static !important; margin-top: 1px;
  width: 26px; height: 26px; min-width: 26px; flex-shrink: 0;
}

/* ── v4 fonts (theme already ships them under assets/fonts/v2) ── */
@font-face { font-family:'Outfit'; font-weight:600; font-display:swap; src:url('assets/fonts/v2/outfit700.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:700; font-display:swap; src:url('assets/fonts/v2/outfit800.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url('assets/fonts/v2/manrope400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:500; font-display:swap; src:url('assets/fonts/v2/manrope500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap; src:url('assets/fonts/v2/manrope700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('assets/fonts/v2/jbmono400.woff2') format('woff2'); }

/* ── tokens (mirror of v4) ── */
:root {
  --fp-paper: #faf7f2;
  --fp-paper-deep: #f3efe7;
  --fp-card: #ffffff;
  --fp-ink: #24313d;
  --fp-soft: #5c6672;
  --fp-faint: #8a9198;
  --fp-line: #e6e0d4;
  --fp-teal: #14b8a6;
  --fp-teal-deep: #0d9488;
  --fp-teal-ink: #0f766e;
  --fp-teal-wash: #e9f6f3;
}

/* ── base ── */
html { background: var(--fp-paper) !important; }
body {
  background: var(--fp-paper) !important;
  color: var(--fp-ink) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}
::selection { background: var(--fp-teal); color: #fff !important; }

h1, h2, h3, h4 {
  font-family: 'Outfit', 'Manrope', system-ui, sans-serif !important;
  color: var(--fp-ink) !important;
  letter-spacing: -0.02em;
}
a { color: var(--fp-teal-deep) !important; }
a:hover { color: var(--fp-teal-ink) !important; }

/* ── header: same world as v4 topbar (paper, blur, ink text) ── */
.site-header {
  background: rgba(250, 247, 242, 0.88) !important;
  border-bottom: 1px solid var(--fp-line) !important;
}
.site-header.scrolled { border-bottom-color: var(--fp-line) !important; }
.site-header .logo { color: var(--fp-ink) !important; }
.site-header .logo em { color: var(--fp-teal) !important; }
.site-header .logo::after { background: var(--fp-teal) !important; box-shadow: none !important; }
.main-nav a:not(.btn) { color: var(--fp-soft) !important; }
.main-nav a:not(.btn):hover { color: var(--fp-teal-ink) !important; }
.main-nav a:not(.btn)::after { background: var(--fp-teal) !important; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--fp-ink) !important; }
/* desktop: nav links + CTA on ONE line (CTA was wrapping under the menu) */
@media (min-width: 721px) {
  .main-nav { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; white-space: nowrap; }
}
/* tablet: tighten the header so the CTA never clips past the viewport edge */
@media (min-width: 721px) and (max-width: 940px) {
  .main-nav { gap: 14px; }
  .main-nav ul { gap: 18px !important; }
  .main-nav a:not(.btn) { font-size: 0.86rem !important; }
  .main-nav .btn { padding: 9px 14px !important; font-size: 0.84rem !important; }
}
/* mobile fullscreen menu: paper instead of dark, matches v4 mobile menu */
body.nav-open .main-nav { background: var(--fp-paper) !important; }
/* stack the CTA button UNDER the links inside the fullscreen menu */
body.nav-open .main-nav { flex-direction: column; justify-content: center; overflow-y: auto; max-height: 100vh; padding: 90px 24px 40px; }
body.nav-open .main-nav .btn { margin-top: 26px !important; }
body.nav-open .main-nav .nav-cta { margin-top: 22px; }
/* r7: the header's own CTA duplicates the in-menu one - hide it while the menu is open */
body.nav-open .site-header .btn { opacity: 0; pointer-events: none; }
/* CRITICAL: backdrop-filter on the header makes it the containing block for
   position:fixed descendants - the fullscreen overlay then sizes to the 68px
   header instead of the viewport (menu items cramped at top). Kill the blur
   on mobile widths so inset:0 means the real viewport again. */
@media (max-width: 720px) {
  /* blur is off here (containing-block bug) - so the header must be SOLID,
     otherwise page text shows through while scrolling */
  .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--fp-paper) !important; }
  body.nav-open { overflow: hidden; }
}
/* inner pages: logo already ends with a period glyph - hide the v1 square dot */
.site-header .logo::after { display: none !important; }

/* ── page hero ── */
.page-hero {
  background: var(--fp-paper-deep) !important;
  border-bottom: 1px solid var(--fp-line) !important;
  overflow: hidden;
}
.page-hero .hero-grid { display: none !important; }
.page-hero .eyebrow { color: var(--fp-teal-deep) !important; }
.page-hero .eyebrow::before { background: var(--fp-teal) !important; }
.page-hero p { color: var(--fp-soft) !important; }

/* ── inner content: readable ink, not gray ── */
.inner-content { color: var(--fp-ink) !important; }
.inner-content p, .inner-content li { color: var(--fp-soft) !important; }
.inner-content strong, .inner-content b { color: var(--fp-ink) !important; }
.inner-content h2 { color: var(--fp-ink) !important; }
.inner-content h2::before { background: var(--fp-teal) !important; }
.inner-content h3 { color: var(--fp-ink) !important; }
.inner-content strong a, .inner-content b a { color: var(--fp-teal-deep) !important; }
.inner-content code {
  background: var(--fp-ink) !important; color: #e8f4f1 !important;
  border: none !important; border-radius: 7px; padding: 2px 8px;
}
.inner-content pre { background: var(--fp-ink) !important; color: #e8f4f1 !important; border: none !important; border-radius: 12px; }
.inner-content pre code { background: transparent !important; padding: 0; }
.inner-content blockquote {
  background: var(--fp-teal-wash) !important; border-left: 3px solid var(--fp-teal) !important;
  color: var(--fp-teal-ink) !important; border-radius: 0 10px 10px 0;
}
.inner-content ul li::before, .inner-content ol li::before { color: var(--fp-teal) !important; }
.inner-content hr { border: none; border-top: 1px solid var(--fp-line) !important; }

/* ── cards / steps / faq / checklist ── */
.feat-card, .stat-box, .step, .faq-item, .info-card, .timeline-item, .check-list li, .rm-col, .split-list li {
  background: var(--fp-card) !important;
  border-color: var(--fp-line) !important;
  box-shadow: none !important;
}
.feat-card:hover, .step:hover, .check-list li:hover {
  border-color: rgba(20, 184, 166, 0.45) !important;
  box-shadow: 0 18px 44px rgba(36, 49, 61, 0.08) !important;
}
.feat-card::after { content: none !important; }
.feat-icon {
  background: var(--fp-teal-wash) !important;
  border: 1px solid rgba(20, 184, 166, 0.35) !important;
}
.check-list li::before {
  background: var(--fp-teal-wash) !important;
  border: 1px solid rgba(20, 184, 166, 0.4) !important;
  color: var(--fp-teal-ink) !important;
}
.check-list li strong, .step p, .feat-card p { color: var(--fp-soft) !important; }
.faq-item { border-radius: 14px !important; }
.faq-item summary { color: var(--fp-ink) !important; }
.faq-item summary:hover { color: var(--fp-teal-deep) !important; }
.faq-a, .faq-item p { color: var(--fp-soft) !important; }
.faq-plus::before, .faq-plus::after { background: var(--fp-teal) !important; }

/* ── stat row: numbers were near-white on paper - make them solid ink ── */
.stat-box { background: var(--fp-card) !important; }
.stat-num {
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: var(--fp-ink) !important; color: var(--fp-ink) !important;
}
.stat-label { color: var(--fp-soft) !important; }

/* ── roadmap timeline ── */
.timeline::before { background: var(--fp-line) !important; }
.tl-item h3 { color: var(--fp-ink) !important; }
.tl-item p { color: var(--fp-soft) !important; }
.tl-status.live { color: var(--fp-teal-ink) !important; border-color: rgba(20,184,166,0.4) !important; }
.tl-status.next { color: var(--fp-faint) !important; border-color: var(--fp-line) !important; }
.tl-dot { background: var(--fp-teal) !important; box-shadow: none !important; }
.rm-col.done { background: linear-gradient(180deg, rgba(20,184,166,0.06), transparent 55%), var(--fp-card) !important; }
.rm-col li::before { color: var(--fp-teal) !important; }

/* ── buttons: teal gradient like v4 ── */
.btn, .btn-primary {
  background: linear-gradient(180deg, var(--fp-teal), var(--fp-teal-deep)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.28);
}
.btn:hover, .btn-primary:hover {
  background: linear-gradient(180deg, var(--fp-teal-deep), var(--fp-teal-ink)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(13, 148, 136, 0.38);
}
.btn-ghost {
  background: transparent !important;
  color: var(--fp-ink) !important;
  border: 1px solid var(--fp-line) !important;
}
.btn-ghost:hover { border-color: var(--fp-teal) !important; color: var(--fp-teal-ink) !important; background: var(--fp-teal-wash) !important; }

/* ── CTA panel: teal on dark ink fails contrast - use v4 ink panel + white button ── */
.cta-panel {
  background: var(--fp-ink) !important;
  border: 1px solid var(--fp-line) !important;
}
.cta-panel::before { background: radial-gradient(closest-side, rgba(20, 184, 166, 0.25), transparent) !important; }
.cta-panel h2, .cta-panel h3, .cta-panel p { color: #fff !important; }
.cta-panel p { color: #aab4bf !important; }
.cta-panel .btn, .cta-panel .btn-primary {
  background: #fff !important;
  color: var(--fp-ink) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.cta-panel .btn:hover, .cta-panel .btn-primary:hover { background: var(--fp-teal-wash) !important; color: var(--fp-teal-ink) !important; }

/* ── footer ── */
.site-footer {
  background: var(--fp-card) !important;
  border-top: 1px solid var(--fp-line) !important;
}
.site-footer, .site-footer a { color: var(--fp-soft) !important; }
.site-footer a:hover { color: var(--fp-teal-deep) !important; }
.site-footer h4 { color: var(--fp-faint) !important; }
.site-footer .logo { color: var(--fp-ink) !important; }
.site-footer .logo em { color: var(--fp-teal) !important; }
.footer-bottom { border-top: 1px solid var(--fp-line) !important; }

/* ── waitlist form (join page): paper inputs like v4 ── */
.waitlist-form input[type=email], .waitlist-form select {
  background: var(--fp-card) !important;
  border: 1.5px solid var(--fp-line) !important;
  color: var(--fp-ink) !important;
}
.waitlist-form input[type=email]:focus, .waitlist-form select:focus {
  border-color: var(--fp-teal) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
.waitlist-form select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 42px !important; }
.wl-label { color: var(--fp-ink) !important; }
.wl-optional, .wl-note { color: var(--fp-faint) !important; }
.frely-waitlist-success {
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  color: #14532d !important;
}

/* ── misc chrome ── */
.scroll-progress { background: var(--fp-teal) !important; box-shadow: none !important; }
.code-window { background: var(--fp-ink) !important; border-color: var(--fp-line) !important; box-shadow: 0 24px 60px rgba(36, 49, 61, 0.18) !important; }
.split-list .tick { background: var(--fp-teal-wash) !important; border-color: rgba(20, 184, 166, 0.4) !important; color: var(--fp-teal-ink) !important; }