/* ========================================================================
   Shared site navigation — used by every page (open-c-homepage, ahi, etc.).
   Edit this ONE file to change the nav across the whole site.
   The matching HTML markup is documented in NAV_SNIPPET.html.
   ======================================================================== */

/* Nav frame */
nav[aria-label="Primary"]{
  padding:0;
  border-bottom:1px solid var(--rule);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--cream);
  overflow:visible;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
body{padding-top:72px}

nav[aria-label="Primary"] .nav-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
  gap:24px;
  overflow:visible;
}

/* Logo overlapping the nav (extends downward into page content) */
nav[aria-label="Primary"] .nav-brand{
  flex-shrink:0;
  position:relative;
  z-index:2;
  align-self:flex-start;
  margin-top:6px;
}
nav[aria-label="Primary"] .nav-brand a{
  display:flex;
  align-items:center;
  gap:0;
  text-decoration:none;
  line-height:0;
}
nav[aria-label="Primary"] .brand-logo{
  height:120px;
  width:auto;
  display:block;
  transition:height .35s cubic-bezier(.16,1,.3,1), filter .35s cubic-bezier(.16,1,.3,1);
}
/* Logo blends naturally on any background — no inversion filters.
   Aaron's call (May 2026): the new transparent-background logo should just
   show through whatever section it overlaps without color manipulation. */
nav[aria-label="Primary"].nav-on-dark .brand-logo,
nav[aria-label="Primary"].nav-on-green .brand-logo{
  filter:none;
}

/* Right side: links + CTA */
nav[aria-label="Primary"] .nav-right{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
nav[aria-label="Primary"] .nav-links{
  display:flex;
  gap:22px;
  list-style:none;
  align-items:center;
  flex-wrap:nowrap;
  padding:0;
  margin:0;
}
nav[aria-label="Primary"] .nav-links a{
  font-size:14.5px;
  font-weight:700;
  color:var(--ink2);
  text-decoration:none;
  font-family:'Fraunces',Georgia,serif;
  letter-spacing:-0.2px;
  white-space:nowrap;
  position:relative;
  transition:color .2s ease;
}
nav[aria-label="Primary"] .nav-links a:hover{color:var(--accent)}
nav[aria-label="Primary"] .nav-links a.active{color:var(--accent);font-weight:700}
nav[aria-label="Primary"] .nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  height:2px;
  width:0;
  background:var(--accent);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
nav[aria-label="Primary"] .nav-links a:hover::after{width:100%}
nav[aria-label="Primary"] .nav-links a.active::after{width:100%}

/* Base CTA button shared by the two CTA variants below */
nav[aria-label="Primary"] .nav-cta{
  font-size:15px;
  font-weight:600;
  color:var(--cream);
  background:var(--ink);
  padding:8px 20px;
  border-radius:4px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
nav[aria-label="Primary"] .nav-cta:hover{
  background:var(--ink2);
  color:var(--cream);
}

/* Primary CTA — Demo C_Verified (accent green, slightly elevated) */
nav[aria-label="Primary"] .nav-cta-demo{
  background:var(--accent);
  color:var(--cream);
  box-shadow:0 4px 14px rgba(30,92,79,0.3);
}
nav[aria-label="Primary"] .nav-cta-demo:hover{
  background:#17503f;
  box-shadow:0 6px 18px rgba(30,92,79,0.45);
  transform:translateY(-2px);
}
nav[aria-label="Primary"] .nav-cta-demo .cv-check{color:#a8e0cb;margin-left:2px}

/* Secondary CTA — Join the Beta (outlined accent) */
nav[aria-label="Primary"] .nav-cta-beta{
  background:transparent;
  color:var(--accent);
  border:1.5px solid var(--accent);
  padding:7.5px 14px;
}
nav[aria-label="Primary"] .nav-cta-beta:hover{
  background:var(--accent);
  color:var(--cream);
  transform:translateY(-2px);
}

/* Mobile hamburger */
nav[aria-label="Primary"] .hamburger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  flex-direction:column;
  gap:5px;
}
nav[aria-label="Primary"] .hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  transition:all .3s ease;
  border-radius:2px;
}
nav[aria-label="Primary"] .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
nav[aria-label="Primary"] .hamburger.active span:nth-child(2){opacity:0}
nav[aria-label="Primary"] .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
@media(max-width:1180px){
  nav[aria-label="Primary"] .hamburger{display:flex}
}

/* C_Verified brand mark — used in the Demo CTA */
nav[aria-label="Primary"] .cv{font-weight:800;white-space:nowrap}
nav[aria-label="Primary"] .cv-check{color:var(--accent);font-weight:800;margin-left:1px;display:inline-block}

/* ========================================================================
   Unified site-wide checkmark style — matches the bold check from the
   C_Verified product logo. All ✔ marks across the site (cv-check,
   step-check, hero-check, inline ones in body copy, etc.) read with
   the same heavy weight and accent-green tint.  Specific contextual
   overrides (white check on dark green buttons, etc.) still win via
   higher specificity in each page's local CSS.
   ======================================================================== */
.cv-check, .step-check, .hero-check{
  font-family:'Source Sans 3','Source Sans Pro','Segoe UI Symbol','Apple Color Emoji',sans-serif;
  font-weight:900;
  font-feature-settings:"liga" off, "calt" off;
  text-rendering:geometricPrecision;
}

/* ========================================================================
   Inline C_Verified product logo — used in body text site-wide in place of
   the text-based "C_Verified ✔" brand mark. The image is pre-cropped tight
   to its content (no internal padding), and these rules align it cleanly
   on the text baseline with no visual buffer.
   - .cv-logo: regular logo (black "C_" + green "Verified" + green check)
                for light cream / white backgrounds
   - .cv-logo-light: cream silhouette of the same logo, for dark sections
                     (nav demo button, Act 2 banner, Pilot CTA, etc.)
   ======================================================================== */
.cv-logo, .cv-logo-light{
  display:inline-block;
  height:0.95em;
  width:auto;
  vertical-align:-0.16em;
  margin:0 0.04em;
  /* No padding, no border — the image itself is the brand mark */
}

/* ========================================================================
   Site legal footer + fixed hash ribbon — shared across every page.
   ======================================================================== */
.site-legal{
  background:var(--cream);
  border-top:1px solid var(--rule);
  padding:24px 24px 32px;
}
.site-legal-inner{max-width:1100px;margin:0 auto;text-align:center}
.site-legal-line{
  font-size:12px;
  color:var(--ink3);
  line-height:1.6;
  margin:0 auto 6px;
  max-width:880px;
  font-family:'Source Sans 3',Georgia,sans-serif;
}
.site-legal-line:last-child{margin-bottom:0}
.site-legal-fine{font-size:11px;color:var(--ink4);margin-top:10px;max-width:760px;font-style:italic}
.site-legal .cv{font-weight:800;white-space:nowrap}
.site-legal .cv-check{color:var(--accent);font-weight:800;margin-left:1px}

/* Hash ribbon hidden site-wide — Aaron's call, looked too gimmicky.
   Leaving the rules in place but suppressed in case we want it back. */
.hash-ribbon.hash-ribbon-fixed{display:none !important}
.hash-ribbon{
  overflow:hidden;
  background:var(--ink);
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:relative;
  isolation:isolate;
}
.hash-ribbon::before,.hash-ribbon::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.hash-ribbon::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
.hash-ribbon::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}
.hash-ribbon-track{
  display:flex;gap:42px;white-space:nowrap;
  font-family:'SF Mono','JetBrains Mono','Consolas',monospace;
  font-size:11px;font-weight:500;letter-spacing:1.2px;
  color:rgba(250,248,244,0.45);
  width:max-content;
  animation:hashRibbonScroll 70s linear infinite;
  will-change:transform;
}
.hash-ribbon.hash-ribbon-fixed{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:40;
  padding:6px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:none;
  box-shadow:0 -2px 12px rgba(0,0,0,0.18);
}
.hash-ribbon.hash-ribbon-fixed .hash-ribbon-track{animation-duration:70s !important}
.hash-ribbon-track > span{display:inline-flex;align-items:center;gap:14px}
.hash-ribbon-track > span::after{content:'\25C7';color:var(--accent);font-size:10px;opacity:0.8}
@keyframes hashRibbonScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .hash-ribbon-track{animation-duration:120s !important}
}

/* Scroll-shrink state */
nav[aria-label="Primary"].nav-scrolled{
  background:rgba(250,248,244,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--rule), 0 4px 18px rgba(0,0,0,0.04);
}
nav[aria-label="Primary"].nav-scrolled .nav-inner{padding-top:6px;padding-bottom:6px}
nav[aria-label="Primary"].nav-scrolled .brand-logo{height:72px !important}

/* Responsive */
@media(max-width:1180px){
  nav[aria-label="Primary"] .nav-links{display:none}
}
@media(max-width:860px){
  nav[aria-label="Primary"] .nav-brand .brand-logo{height:64px !important}
  nav[aria-label="Primary"] .nav-brand{margin-top:0}
}
@media(max-width:480px){
  nav[aria-label="Primary"] .nav-cta{font-size:14px;padding:6px 14px}
}