/* nav -- ONE definition for every page, including the Experience pages
   (build writes it into experience/hb-nav.css), so crossing over never changes it.
   Its variables live on .nav itself so it renders the same under any page's :root. */
.nav{--maxw:1180px;--disp:Georgia,'Times New Roman',serif;
  --body:'Figtree','Segoe UI',system-ui,sans-serif;--on-dark:#F3E8CE;--honey2:#F0A830;
  position:sticky;top:0;z-index:50;background:#1C1208ee;backdrop-filter:blur(10px);
  border-bottom:1px solid #C8860A22}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 30px;height:60px;
  display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--disp);font-size:19px;color:var(--on-dark);padding:6px 4px;margin-left:-4px}
.nav-logo .mk{width:24px;height:24px}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.03em;
  color:#F3E8CE9a;text-decoration:none;padding:8px 11px;border-radius:6px;white-space:nowrap}
.nav-links a:hover{color:var(--honey2);background:#ffffff0a}
.nav-links a[aria-current]{color:var(--honey2)}
/* narrow desktops: a little less padding per item, so the follower menu ("Hummingbird") fits in one row */
@media (min-width:1021px) and (max-width:1180px){.nav-links a,.nav-tools{padding-left:8px;padding-right:8px}}
/* Tools: the button opens and closes its list (hovering opens it on a desktop); "All free tools" is inside */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-tools{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;color:#F3E8CE9a;
  font:inherit;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.03em;padding:8px 11px;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-tools svg{width:9px;height:9px;transition:transform .2s}
.nav-tools:hover,.nav-drop.open .nav-tools,.nav-tools.is-current{color:var(--honey2)}
.nav-tools:hover{background:#ffffff0a}
.nav-drop.open .nav-tools svg{transform:rotate(180deg)}
.nav-links .sl-nav{color:var(--honey2)}
/* the nav's one action (2026-10-15): "Let's talk" as a honey button (9.7:1); on phones it also sits in the top bar */
.nav-links a.nav-cta{background:var(--honey2);color:#1C1208;margin-left:10px;padding:8px 15px}
.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{background:#FFC864;color:#1C1208}
.nav-talk{display:none}
@media (max-width:1020px){.nav-talk{display:inline-flex;align-items:center;margin-left:auto;margin-right:6px;padding:8px 14px;min-height:40px;border-radius:6px;background:var(--honey2);color:#1C1208;font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap}.nav-links a.nav-cta{margin:8px 30px 4px;border-radius:6px;text-align:center}}
.nav-panel{position:absolute;top:calc(100% + 10px);left:-8px;width:290px;display:none;
  background:#1C1208f7;backdrop-filter:blur(10px);border:1px solid #C8860A33;
  border-radius:12px;padding:8px;box-shadow:0 16px 44px #0007}
.nav-panel::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-drop.open .nav-panel{display:block}
@media (hover:hover) and (min-width:1021px){.nav-drop:hover .nav-panel{display:block}}
.nav-panel a,.nav-soon{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;color:var(--on-dark)}
.nav-panel small{font-size:12.5px;font-weight:500;color:#F3E8CE99;line-height:1.35}
.nav-soon{opacity:.55;cursor:default}
.nav-soon b{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--honey2);margin-left:6px}
.nav-panel .nav-all{flex-direction:row;border-top:1px solid #ffffff14;margin-top:6px;
  border-radius:0 0 8px 8px;font-size:13px;color:var(--honey2)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:9px}
.nav-toggle span{display:block;height:2px;width:22px;background:var(--honey2);border-radius:2px;
  transition:transform .2s,opacity .2s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}
@media (max-width:1020px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#1C1208f7;backdrop-filter:blur(10px);border-top:1px solid #ffffff14;
    padding:6px 0;display:none;max-height:calc(100vh - 60px);overflow-y:auto}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 30px;font-size:15px;border-radius:0}
  .nav-drop{flex-direction:column;align-items:stretch}
  .nav-tools{width:100%;justify-content:space-between;padding:14px 30px;font-size:15px;border-radius:0}
  .nav-tools svg{width:11px;height:11px}
  .nav-panel{position:static;display:none;width:auto;background:none;border:0;box-shadow:none;
    backdrop-filter:none;padding:0 0 8px 16px;border-radius:0}
  .nav-drop.open .nav-panel{display:block}
  .nav-panel::before{display:none}
  .nav-panel a,.nav-soon{padding:9px 30px;font-size:14px}
  .nav-panel .nav-all{border-top:0;margin-top:0}
}

/* --- Experience-only additions. The build prepends the site's shared NAV_CSS
   (build_site.py) to this file in dist, so the nav above is identical to every
   other page. Only what is specific to the showcase lives here. --- */

/* the showcase scenes pin themselves to the top of the viewport, so the nav
   scrolls away here instead of sticking over them */
.nav{position:relative}

/* "you are here": the Experience journey, or a tool's breadcrumb */
.section-bar{--sb-muted:#F3E8CE9a;--sb-ink:#F3E8CE;--sb-honey:#F0A830;--sb-line:#C8860A26;
  max-width:1180px;margin:auto;padding:0 30px;display:flex;align-items:center;gap:14px;min-height:48px;
  border-bottom:1px solid var(--sb-line);font:600 12.5px/1 'Figtree','Segoe UI',system-ui,sans-serif;
  letter-spacing:.02em;overflow-x:auto;scrollbar-width:none}
.section-bar::-webkit-scrollbar{display:none}
.section-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-muted);white-space:nowrap}
.section-bar ol{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.section-bar li{display:flex;align-items:center;white-space:nowrap}
.section-bar a,.section-bar li>span{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 8px;color:var(--sb-muted);text-decoration:none;transition:color .2s}
.section-bar a:hover{color:var(--sb-honey)}
.section-bar [aria-current=page]{color:var(--sb-ink)}
.section-bar .step{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;border:1px solid var(--sb-line);font-size:10px;font-variant-numeric:tabular-nums;line-height:1}
.section-bar li.walked .step{border-color:transparent;background:#F0A83026;color:var(--sb-honey)}
.section-bar [aria-current=page] .step{border-color:var(--sb-honey);background:var(--sb-honey);color:#1C1208}
.section-bar a[aria-current=page]::after{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:1px;background:var(--sb-honey);transform-origin:left}
/* the path you've walked glows honey up to where you are */
.section-bar ol:not(.crumbs) li+li::before{content:"";width:22px;height:1px;margin:0 2px;background:linear-gradient(var(--sb-honey),var(--sb-honey)) 0 0/0% 100% no-repeat var(--sb-line)}
.section-bar ol:not(.crumbs) li.walked+li::before{background-size:100% 100%}
.crumbs li+li::before{content:"/";color:var(--sb-muted);opacity:.6}
/* motion as wayfinding: arriving draws the path in, then underlines "here" */
@media(prefers-reduced-motion:no-preference){
  .section-bar li.walked+li::before{animation:hb-walk .45s ease-out both}
  /* each step's path draws after the one before it (the delays must out-rank the shorthand above) */
  .section-bar li.walked+li:nth-child(3)::before{animation-delay:.3s}
  .section-bar li.walked+li:nth-child(4)::before{animation-delay:.6s}
  .section-bar a[aria-current=page]::after{animation:hb-arrive .55s cubic-bezier(.2,.7,.2,1) both .25s}
  .section-bar li:nth-child(3) a[aria-current=page]::after{animation-delay:.6s}
  .section-bar li:nth-child(4) a[aria-current=page]::after{animation-delay:.9s}
}
@keyframes hb-walk{from{background-size:0 100%}}
@keyframes hb-arrive{from{transform:scaleX(0)}}
@media(max-width:700px){.section-bar{padding:0 20px;gap:8px}}
@media(max-width:420px){.section-label{display:none}.section-bar ol:not(.crumbs) li+li::before{width:12px}.section-bar a,.section-bar li>span{padding:0 6px}}
/* four steps don't fit a phone: there the other steps show just their number (the name stays for screen readers
   and in the link's own text), and only "you are here" is spelled out */
@media(max-width:560px){.section-label{display:none}.section-bar ol:not(.crumbs) a:not([aria-current]){font-size:0;gap:0}}

/* WCAG 2.4.7 / 2.4.11: GPT's .skip is z-index 50, the same as the nav it slides under, and the nav comes
   later in the page, so a focused skip link was painted behind it. Lift it while focused. */
.skip:focus,.skip:focus-visible{z-index:100}