/* Rentl site nav (grouped + mega panel) and mobile drawer.
   Shared by every marketing page. Scoped under .site-nav / .mobile-menu /
   .mm-scrim because blog.html has a second <nav> (the topic filter) and pages
   already use .btn-ghost / .btn-primary for other things. Link this AFTER the
   page's own <style>. Markup: design_handoff_nav/Nav Reference.html.
   Behaviour: nav.js. */

/* Tokens: FIELD identity by default (exact handoff values). */
.site-nav,.mobile-menu,.mm-scrim{
  --nv-bg:#F2F2EE;--nv-bg-subtle:#E6E5DF;--nv-bg-elevated:#FFFFFF;--nv-deep:#0F1411;
  --nv-ink:#0F1411;--nv-ink-soft:#2A322C;--nv-muted:#6E736C;--nv-line:#D8D7CF;--nv-line-strong:#B8B6AB;
  --nv-accent:#1F5F3F;--nv-accent-deep:#15482F;--nv-mint:#9BC2A9;
  --nv-sans:'Geist',-apple-system,system-ui,sans-serif;--nv-mono:'JetBrains Mono',ui-monospace,monospace;
  --nv-wordmark:'Fraunces',Georgia,serif;--nv-radius-sm:2px;--nv-ease-out:cubic-bezier(.2,.8,.2,1);
}
/* index.html's identity switch: civic and ledger take the page's own tokens */
:root[data-identity="civic"] :is(.site-nav,.mobile-menu,.mm-scrim),
:root[data-identity="ledger"] :is(.site-nav,.mobile-menu,.mm-scrim){
  --nv-bg:var(--bg);--nv-bg-subtle:var(--bg-subtle);--nv-bg-elevated:var(--bg-elevated);--nv-deep:var(--bg-deep);
  --nv-ink:var(--ink);--nv-ink-soft:var(--ink-soft);--nv-muted:var(--muted);--nv-line:var(--line);--nv-line-strong:var(--line-strong);
  --nv-accent:var(--accent);--nv-accent-deep:var(--accent-deep);--nv-mint:var(--accent-mid);
  --nv-sans:var(--sans);--nv-radius-sm:var(--radius-sm);
}
.site-nav *,.mobile-menu *{box-sizing:border-box}
.site-nav a,.mobile-menu a{text-decoration:none}

/* ---------- bar ---------- */
.site-nav{position:sticky;top:0;z-index:100;height:68px;padding:0 1.5rem;margin:0;display:flex;align-items:center;justify-content:space-between;background:color-mix(in oklab,var(--nv-bg) 88%,transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--nv-line);font-family:var(--nv-sans);line-height:normal;-webkit-font-smoothing:antialiased}
.site-nav .nav-logo{display:flex;align-items:center;gap:10px;color:var(--nv-ink);cursor:pointer;flex:none}
.site-nav .nav-logo:hover{color:var(--nv-ink)}
.site-nav .nav-logo-icon{width:30px;height:30px;display:block;flex:none}
.site-nav .nav-logo-text{font-family:var(--nv-wordmark);font-weight:500;font-size:22px;letter-spacing:-.025em;font-optical-sizing:auto;color:var(--nv-ink)}
.site-nav .nav-dot{color:var(--nv-accent);font-style:italic}
.site-nav .nav-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto 0 3rem;padding:0}
/* li stays unpositioned so each panel's containing block is the sticky bar */
.site-nav .nav-links>li{position:static}
.site-nav .nav-links>li>a,.site-nav .nav-trigger{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--nv-radius-sm);font:inherit;font-size:14.5px;line-height:normal;color:var(--nv-ink-soft);background:none;border:0;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.site-nav .nav-links>li>a:hover,.site-nav .nav-trigger:hover,.site-nav .nav-has-mega.open>.nav-trigger,
/* current page: Pricing / Contact, or Resources on Blog and Renters' Rights Act (set by nav.js) */
.site-nav .nav-links>li>a[aria-current="page"],.site-nav .nav-has-mega.is-current>.nav-trigger{background:var(--nv-bg-subtle);color:var(--nv-ink)}
.site-nav a:focus-visible,.site-nav button:focus-visible{outline:2px solid var(--nv-accent);outline-offset:2px}
.site-nav .nav-caret{width:9px;height:9px;flex:none;transition:transform .25s}
.site-nav .nav-has-mega.open .nav-caret{transform:rotate(180deg)}
.site-nav .nav-cta{display:flex;gap:.6rem;align-items:center;flex:none}
.site-nav .nav-btn{font-family:var(--nv-sans);font-size:14px;font-weight:500;line-height:normal;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--nv-radius-sm);border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:all .15s ease}
.site-nav .nav-btn-ghost{background:transparent;color:var(--nv-ink);border-color:var(--nv-line-strong);padding:8px 16px}
.site-nav .nav-btn-ghost:hover{border-color:var(--nv-ink);background:var(--nv-bg-subtle);color:var(--nv-ink)}
.site-nav .nav-btn-primary{background:var(--nv-ink);color:var(--nv-bg);border-color:var(--nv-ink);padding:8px 18px}
.site-nav .nav-btn-primary:hover{background:var(--nv-accent);border-color:var(--nv-accent);color:var(--nv-bg)}

/* ---------- mega panel: full-bleed under the bar ---------- */
.site-nav .nav-mega{position:absolute;left:0;right:0;top:100%;background:var(--nv-bg);border-bottom:1px solid var(--nv-line);box-shadow:0 30px 50px -30px rgba(15,20,17,.25);padding:2rem 1.5rem 2.25rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .25s var(--nv-ease-out),visibility 0s .25s}
.site-nav .nav-mega.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s,transform .25s var(--nv-ease-out),visibility 0s}
.site-nav .nav-mega-item{padding:18px;border-radius:10px;display:flex;flex-direction:column;gap:6px;color:var(--nv-ink);cursor:pointer;transition:background .15s}
.site-nav .nav-mega-item:hover{background:var(--nv-bg-subtle);color:var(--nv-ink)}
.site-nav .nav-mega-item small{font-family:var(--nv-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--nv-muted)}
.site-nav .nav-mega-item b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.site-nav .nav-mega-item span{font-size:13.5px;color:var(--nv-muted);line-height:1.45}
.site-nav .nav-mega-feat{background:var(--nv-deep);color:var(--nv-bg);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;cursor:pointer;transition:transform .2s}
.site-nav .nav-mega-feat:hover{transform:translateY(-2px);color:var(--nv-bg)}
.site-nav .nav-mega-feat small{font-family:var(--nv-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--nv-mint)}
.site-nav .nav-mega-feat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:8px}
.site-nav .nav-mega-feat span{font-size:13.5px;color:var(--nv-mint)}

/* ---------- mobile drawer ---------- */
.site-nav .nav-burger,.mobile-menu,.mm-scrim{display:none}
@media(max-width:1100px){
  .site-nav .nav-mega{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-nav .nav-mega-feat{display:none}
}
@media(max-width:980px){
  .site-nav{height:64px;padding:0 1.15rem}
  .site-nav .nav-links,.site-nav .nav-mega{display:none}
  .site-nav .nav-cta .nav-btn-ghost{display:none}
  /* with the links hidden, keep Get started beside the burger rather than centred */
  .site-nav .nav-cta{margin-left:auto;margin-right:10px}
  .site-nav .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:none;cursor:pointer;color:var(--nv-ink)}
  .site-nav .nav-burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .site-nav .nav-burger span+span{margin-top:5px}
  body.menu-open .site-nav .nav-burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
  body.menu-open .site-nav .nav-burger span+span{transform:translateY(-3.25px) rotate(-45deg)}
  /* lock on html: with html set to overflow-x:clip (index.html), hiding body
     overflow makes body a scroll box and closing the menu jumps back to the top */
  html.menu-open{overflow:hidden}
  /* the cookie banner sits at z-index 998 and would cover the open drawer */
  body.menu-open #cookieBanner{display:none!important}
  .mobile-menu{display:block;position:fixed;left:0;right:0;top:64px;z-index:99;background:var(--nv-bg-elevated);border-bottom:1px solid var(--nv-line);box-shadow:0 28px 56px -28px rgba(15,20,17,.4);padding:.25rem 1.15rem 1.5rem;max-height:calc(100vh - 64px);overflow-y:auto;transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;font-family:var(--nv-sans);line-height:normal}
  body.menu-open .mobile-menu{transform:none;opacity:1;pointer-events:auto}
  .mm-scrim{display:block;position:fixed;inset:64px 0 0;z-index:98;background:rgba(15,20,17,.32);opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.menu-open .mm-scrim{opacity:1;pointer-events:auto}
  .mobile-menu .mm-label{font-family:var(--nv-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-muted);padding:1.1rem .1rem .3rem}
  .mobile-menu .mm-links{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
  .mobile-menu .mm-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:13px .1rem;min-height:52px;font-size:16.5px;color:var(--nv-ink);cursor:pointer;border-bottom:1px solid var(--nv-line)}
  .mobile-menu .mm-links a:active{color:var(--nv-accent)}
  .mobile-menu .mm-links a svg{width:14px;height:14px;color:var(--nv-line-strong);transform:rotate(-90deg);flex-shrink:0}
  .mobile-menu .mm-foot{display:grid;gap:.55rem;margin-top:1.5rem}
  .mobile-menu .mm-foot a{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 18px;font-size:15.5px;font-weight:600;border-radius:var(--nv-radius-sm);border:1px solid transparent;transition:background .15s,border-color .15s}
  .mobile-menu .mm-primary{background:var(--nv-accent);color:var(--nv-bg)}
  .mobile-menu .mm-primary:active{background:var(--nv-accent-deep)}
  .mobile-menu .mm-secondary{background:transparent;color:var(--nv-ink);border-color:var(--nv-line-strong)}
  .mobile-menu .mm-note{font-family:var(--nv-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--nv-muted);text-align:center;margin:.35rem 0 0}
}
/* the sticky bottom bar (.mcta) takes over on pages that have one; pages
   without it keep "Get started free" in the bar */
@media(max-width:640px){body:has(.mcta) .site-nav .nav-cta{display:none}}
@media(prefers-reduced-motion:reduce){
  .site-nav .nav-mega,.site-nav .nav-mega.show,.site-nav .nav-caret,.site-nav .nav-mega-feat,.mobile-menu,.mm-scrim,.site-nav .nav-burger span{transition:none}
  .site-nav .nav-mega-feat:hover{transform:none}
}