/* ============================================================
   SITE CHROME — nav + hamburger + footer. ONE source of truth.
   Extracted 2026-08-04 after the nav diverged visually for the
   fifth recorded time: the homepage carried its own nav/footer
   markup AND its own rules for the same class names, so every
   chrome improvement shipped to one world and not the other
   (the footer brand block and the Buyers' Agents link never
   reached the homepage at all). Loaded by BaseLayout on EVERY
   page, before page styles. Edit chrome here or nowhere.
   ============================================================ */

/* Tokens the chrome depends on — self-contained so it renders identically
   even on pages whose own sheet uses different token names (homepage.css
   predates the shared tokens). Values mirror base.css. */
:root {
  --chrome-white: #FFFFFF;
  --chrome-ink: #0F1115;
  --chrome-red: #C8292E;
  --chrome-grey-200: #E5E7EB;
  --chrome-grey-500: #334155;
  --chrome-font-h: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   NAV — light, static (matches homepage .home-nav)
   ============================================================ */

.home-nav {
  /* Pinned: homepage.css sets *{box-sizing:border-box}, inner sheets leave the
     default — the same max-width+padding computed two different nav widths.
     The inner (content-box) rendering is the site-wide look, so say so. */
  box-sizing: content-box;
  /* Floating nav v2 — sticky, pseudo-bg full-width */
  /* July canon (DESIGN-SYSTEM §1.5): light STATIC nav, exactly like the
     homepage — it scrolls away with content. The old sticky/.scrolled
     shrink-on-blur system was dead WP-era code (no JS ever toggled it). */
  position: relative !important; /* in-flow (scrolls away) + anchors the ::before underlay */
  max-width: 1080px;
  margin: 0 auto !important;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  height: auto !important;
}
.home-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  bottom: 0;
  background: var(--chrome-white);
  border-bottom: 1px solid var(--chrome-grey-200);
  z-index: -1;
  pointer-events: none;
}
.home-nav .nav-tryit-cta {
  transition: background 0.15s, border-color 0.15s;
}
.home-nav .nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--chrome-font-h);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--chrome-ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.home-nav .nav-brand-icon { flex-shrink: 0; width: 24px; height: 24px; }
.home-nav .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.home-nav .nav-links a {
  font-family: var(--chrome-font-h);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--chrome-grey-500);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.home-nav .nav-links a:hover { color: var(--chrome-ink); }
.home-nav .nav-tryit-cta {
  background: var(--chrome-ink);
  color: var(--chrome-white);
  padding: 8px 16px;
  border: 1px solid var(--chrome-ink);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-nav .nav-tryit-cta:hover { background: var(--chrome-red); border-color: var(--chrome-red); color: var(--chrome-white); }

/* Sign-up CTA. Red because it is the PRIMARY action and the homepage primary is
   deliberately red; "Try It Free" stays ink so the pair reads as a hierarchy
   (demo vs join) rather than two competing buttons. */
.home-nav .nav-cta,
nav .nav-cta {
  background: var(--chrome-red);
  color: var(--chrome-white);
  padding: 8px 16px;
  border: 1px solid var(--chrome-red);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-nav .nav-cta:hover,
nav .nav-cta:hover { background: var(--chrome-ink); border-color: var(--chrome-ink); color: var(--chrome-white); }
/* `.home-nav .nav-links a` is (0,2,1) and outranks `.home-nav .nav-cta` (0,2,0) — the
   descendant element selector wins — so the label rendered grey-500 on red: 1.88:1,
   measured live on every inner page. Re-assert at (0,3,1). */
.home-nav .nav-links a.nav-cta,
nav .nav-links a.nav-cta { color: var(--chrome-white); }
/* Same (0,2,1)-beats-(0,2,0) trap, other button: without this re-assert the
   Try It Free label rendered grey-500 on ink on the homepage. */
.home-nav .nav-links a.nav-tryit-cta,
nav .nav-links a.nav-tryit-cta { color: var(--chrome-white); }

/* Adding the sign-up CTA made 8 nav items, which overflowed the bar by 28px at a
   1200px laptop width (measured, not assumed). Tighten the gap between ~1024-1300px
   rather than drop a link — losing a nav item to fit a button is the wrong trade. */
@media (min-width: 769px) and (max-width: 1300px) {
  .home-nav .nav-links { gap: 1.1rem; }
  .home-nav .nav-tryit-cta,
  .home-nav .nav-cta { padding: 8px 12px; }
}

@media (max-width: 768px) {
  /* Show the last TWO items collapsed, not just one — otherwise adding the sign-up
     CTA would have silently hidden "Try It Free" on mobile. */
  .home-nav .nav-links li:not(:nth-last-child(-n+2)) { display: none; }
}


/* "You are here" — layout.ts sets aria-current="page" on the active nav item. */
nav.home-nav .nav-links a[aria-current="page"] {
  color: var(--chrome-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--chrome-red);
}
/* === MOBILE-NAV-HAMBURGER 2026-05-22 === */
nav.home-nav .nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  margin-left: auto;
  z-index: 60;
}
nav.home-nav .nav-hamburger::before,
nav.home-nav .nav-hamburger::after,
nav.home-nav .nav-hamburger > span {
  content: '';
  display: block;
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--chrome-ink);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
nav.home-nav .nav-hamburger::before { top: 15px; }
nav.home-nav .nav-hamburger > span { top: 21px; }
nav.home-nav .nav-hamburger::after { top: 27px; }

body.nav-open nav.home-nav .nav-hamburger::before { top: 21px; transform: rotate(45deg); }
body.nav-open nav.home-nav .nav-hamburger > span { opacity: 0; }
body.nav-open nav.home-nav .nav-hamburger::after { top: 21px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  nav.home-nav .nav-hamburger { display: block !important; }
  nav.home-nav .nav-links {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 80px 28px 32px !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    transform: translateX(100%);
    /* visibility keeps the closed drawer out of the tab order / screen readers */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 55 !important;
    gap: 0 !important;
    display: flex !important;
    overflow-y: auto;
    list-style: none;
    margin: 0;
  }
  body.nav-open nav.home-nav .nav-links { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; }
  body.nav-open { overflow: hidden; }
  nav.home-nav .nav-links li {
    display: block !important;
    width: 100%;
  }
  nav.home-nav .nav-links li a {
    display: block !important;
    padding: 16px 0 !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid var(--grey-200, #e5e7eb) !important;
    color: var(--chrome-ink) !important;
    text-decoration: none !important;
  }
  nav.home-nav .nav-links li a.nav-tryit-cta {
    margin-top: 16px;
    background: var(--chrome-ink) !important;
    color: #fff !important;
    text-align: center;
    padding: 14px 16px !important;
    border: 0 !important;
  }
}

.footer-col-title {
  font-family: var(--font-m);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.62);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-family: var(--font-b);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.18s;
}

.footer-col a:hover { color: var(--chrome-white); }

@media (min-width: 768px) {
}

.footer-attribution {
  font-size: 11px;
  max-width: 600px;
  line-height: 1.5;
  opacity: 0.7;
}

/* ---- GLOBAL: Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1023px) {
}

@media (max-width: 640px) {
}

@media (min-width: 640px) {
}

@media (min-width: 1024px) {
}

.tool-card {
  background: var(--chrome-white);
  border: 1px solid var(--chrome-grey-200);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), border-color 0.25s;
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--chrome-ink);
}

.tool-card h3 {
  font-family: var(--chrome-font-h);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--chrome-ink);
}

.tool-card p {
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--grey-700);
  line-height: 1.55;
  margin-bottom: 14px;
}

/* Removed 2026-07-31: the .tool-viz-* group (bars, tags, gauge) was dead — the
   markup it styled appears in 0 built pages. It also carried the only genuine
   layout-property animation on the site (transition: width on the gauge fill),
   which an automated design audit flagged; deleting the dead rule closes the
   finding without changing anything a visitor sees. */

.feasibly-footer {
  background: var(--chrome-ink);
  color: rgba(255,255,255,0.6);
  padding: 64px 24px 28px;
}

/* Footer brand row (added 2026-08-03) — the footer previously had NO brand
   presence at all. Tile is the "Paper" colourway: the original ink tile has no
   edge against this ink background. */
.feasibly-footer .footer-brand {
  max-width: 1200px;
  margin: 0 auto 2.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feasibly-footer .footer-brand-icon { display: block; }
.feasibly-footer .footer-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.feasibly-footer .footer-cols {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.feasibly-footer .footer-col {
  display: flex;
  flex-direction: column;
}

.feasibly-footer .footer-col-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1rem;
}

.feasibly-footer .footer-col a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.18s;
}

.feasibly-footer .footer-col a:hover { color: #fff; }

.feasibly-footer .footer-attribution {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  text-align: center;
}

@media (max-width: 1023px) { /* Footer brand row (added 2026-08-03) — the footer previously had NO brand
   presence at all. Tile is the "Paper" colourway: the original ink tile has no
   edge against this ink background. */
.feasibly-footer .footer-brand {
  max-width: 1200px;
  margin: 0 auto 2.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feasibly-footer .footer-brand-icon { display: block; }
.feasibly-footer .footer-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.feasibly-footer .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
@media (max-width: 640px)  { /* Footer brand row (added 2026-08-03) — the footer previously had NO brand
   presence at all. Tile is the "Paper" colourway: the original ink tile has no
   edge against this ink background. */
.feasibly-footer .footer-brand {
  max-width: 1200px;
  margin: 0 auto 2.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feasibly-footer .footer-brand-icon { display: block; }
.feasibly-footer .footer-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.feasibly-footer .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 420px)  { /* Footer brand row (added 2026-08-03) — the footer previously had NO brand
   presence at all. Tile is the "Paper" colourway: the original ink tile has no
   edge against this ink background. */
.feasibly-footer .footer-brand {
  max-width: 1200px;
  margin: 0 auto 2.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feasibly-footer .footer-brand-icon { display: block; }
.feasibly-footer .footer-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.feasibly-footer .footer-cols { grid-template-columns: 1fr; } }

/* /for/ persona index page */
.mk-personas { padding: 96px 0 64px; background: #fff; }
.mk-persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E5E7EB;
  border: 1px solid #E5E7EB;
}
@media (max-width: 720px) { .mk-persona-grid { grid-template-columns: 1fr; } }
.mk-persona-card {
  background: #fff;
  padding: 2rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
  position: relative;
}
.mk-persona-card:hover { background: #F7F5F0; }
.mk-persona-card:hover .mk-persona-cta { color: #C8292E; }
.mk-persona-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0F1115;
  margin: 0.25rem 0 0.5rem;
}
.mk-persona-lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3D4048;
  margin: 0 0 1rem;
}
.mk-persona-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #0F1115;
  margin-top: auto;
  transition: color 0.18s;
}

/* On dark surfaces (page-hero, cta-banner, feas-moment, footer) — make .btn-green visible */
.page-hero .btn-green,
.cta-banner .btn-green,
.feas-moment .btn-green,
.footer-cta .btn-green {
  background: var(--chrome-red);
  color: var(--chrome-white);
  border-color: var(--chrome-red);
}
.page-hero .btn-green:hover,
.cta-banner .btn-green:hover,
.feas-moment .btn-green:hover,
.footer-cta .btn-green:hover {
  background: var(--chrome-white);
  color: var(--chrome-ink);
  border-color: var(--chrome-white);
}