/* ============================================================
   JBNC shared site frame — nav, footer, portal, reveal, primitives.
   Palette-agnostic: every page defines these variables in its own
   :root and the frame consumes them, so the family stays cohesive
   while each product keeps its identity.

   Required page variables:
     --ink        page background
     --paper      primary text
     --paper-dim  secondary text
     --hair       hairline / border colour
     --accent     product accent (CTAs, focus, hover)
   Optional:
     --accent-2   second accent for gradients
   ============================================================ */

:root{ --nav-h:68px; --frame-maxw:1200px; --frame-ease:cubic-bezier(.16,1,.3,1); }

*{ box-sizing:border-box; }

/* ---------- shared layout primitives ---------- */
.wrap{ max-width:var(--frame-maxw); margin:0 auto; padding:0 24px; }

/* ---------- top nav ---------- */
.frame-nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-bottom:1px solid transparent;
  transition:background .4s var(--frame-ease), border-color .4s var(--frame-ease), backdrop-filter .4s var(--frame-ease);
}
.frame-nav.scrolled{
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}
.frame-nav .brand{
  display:flex; align-items:center; gap:10px; color:var(--paper);
  font-family:"Inter",system-ui,sans-serif; font-weight:800; letter-spacing:.02em; font-size:1.02rem;
}
.frame-nav .brand img{ width:26px; height:26px; display:block; }
.frame-nav .brand em{ font-style:normal; color:var(--paper-dim); font-weight:500; }

.frame-links{ display:flex; align-items:center; gap:26px; }
.frame-link{
  font-family:"Inter",system-ui,sans-serif; font-size:.9rem; color:var(--paper-dim);
  transition:color .2s; white-space:nowrap;
}
.frame-link:hover{ color:var(--paper); }
.frame-back{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); transition:color .2s;
}
.frame-back:hover{ color:var(--accent); }

/* portal button + dropdown */
.portal-btn{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 16px; border-radius:9px; border:1px solid var(--hair); color:var(--paper);
  background:transparent; cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.portal-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.portal-btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.portal-btn.solid:hover{ box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent); }

.portal-wrap{ position:relative; }
.portal-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:250px; z-index:70;
  background:var(--ink); border:1px solid var(--hair); border-radius:14px; padding:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s var(--frame-ease), transform .2s var(--frame-ease);
}
.portal-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.portal-menu a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px;
  color:var(--paper); font-family:"Inter",sans-serif; font-size:.92rem; text-decoration:none;
  transition:background .15s;
}
.portal-menu a:hover{ background:color-mix(in srgb, var(--paper) 8%, transparent); }
.portal-menu a small{ color:var(--paper-dim); font-size:.72rem; margin-left:auto; }
.portal-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }

/* mobile menu */
.frame-hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.frame-hamburger span{ width:24px; height:2px; background:var(--paper); border-radius:2px; transition:.3s; }

/* ---------- footer ---------- */
.frame-foot{ border-top:1px solid var(--hair); padding:48px 24px; }
.frame-foot-inner{
  max-width:var(--frame-maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;
}
.frame-foot .brand{ display:flex; align-items:center; gap:10px; color:var(--paper); font-family:"Inter",sans-serif; font-weight:800; }
.frame-foot .brand em{ font-style:normal; color:var(--paper-dim); font-weight:500; }
.frame-foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
.frame-foot-links a{ font-family:"Inter",sans-serif; font-size:.86rem; color:var(--paper-dim); text-decoration:none; transition:color .2s; }
.frame-foot-links a:hover{ color:var(--accent); }
.frame-foot-copy{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.08em; color:var(--paper-dim); }

/* ---------- reveal-on-scroll (frame.js toggles .in) ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--frame-ease), transform .75s var(--frame-ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.40s } .reveal.d6{ transition-delay:.48s }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .frame-hamburger{ display:flex; }
  .frame-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:color-mix(in srgb, var(--ink) 97%, transparent); backdrop-filter:blur(16px);
    padding:8px 24px 22px; border-bottom:1px solid var(--hair);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:.3s var(--frame-ease);
  }
  .frame-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .frame-links > *{ padding:13px 0; width:100%; border-bottom:1px solid var(--hair); }
  .portal-wrap{ width:100%; }
  .portal-menu{ position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none; margin-top:8px; }
  .frame-foot-inner{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  *{ scroll-behavior:auto; }
}

/* ---------- FAQ accordion (shared; inherits page palette) ---------- */
.faq{ max-width:820px; }
.faq details{ border:1px solid var(--hair); border-radius:12px; margin-bottom:10px;
  background:color-mix(in srgb, var(--paper) 4%, transparent); transition:border-color .25s; }
.faq details[open]{ border-color:color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--paper); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; flex:0 0 auto; transition:transform .25s; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:0; padding:0 18px 16px; color:var(--paper-dim); line-height:1.6; font-size:.95rem; }