/* Tenkai Luna navigation: top bar + floating diamond dot menu (hidden over the hero, fades in on scroll) */
#tlTop{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:linear-gradient(#0b1233f2,#0b1233e6);box-shadow:0 2px 16px #0b123355;transition:background .35s,box-shadow .35s}
body.home-pg #tlTop{background:linear-gradient(#0b1233b3,#0b123300);box-shadow:none}
body.home-pg #tlTop.solid{background:linear-gradient(#0b1233f2,#0b1233e6);box-shadow:0 2px 16px #0b123355}
#tlTop .brand img{height:44px;width:auto;filter:drop-shadow(0 4px 10px #0008)}
#tlTop .pills{display:flex;gap:10px;align-items:center}
#tlTop .pill{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 18px 0 16px;font-weight:800;font-size:13px;letter-spacing:.3px;color:#5a3d06;background:linear-gradient(180deg,#fff6dc,#f0d48c);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .15s;white-space:nowrap;border:0;cursor:pointer;font-family:'Nunito Sans',system-ui,sans-serif}
#tlTop .pill:hover{filter:brightness(1.08)}
#tlTop .pill.dark{color:#fff;background:linear-gradient(180deg,#2b3a86,#18245a)}
#tlTop .pill.rose{color:#fff;background:linear-gradient(180deg,#f3a7c6,#d46f98)}
#tlTop .icon-btn{width:34px;height:34px;border-radius:50%;background:#0b1233aa;border:1px solid #ffffff40;color:#fff;display:grid;place-items:center;font-size:13px}

/* floating dot menu: bare diamonds, no frame. Each dot recolours itself for the section behind it */
#tlRail{position:fixed;left:30px;top:50%;z-index:55;transform:translate(-14px,-50%);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s}
#tlRail.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%)}
#tlRail .dots{display:flex;flex-direction:column;gap:6px;padding:0;background:none;border:0;box-shadow:none}
#tlRail .dots a{position:relative;display:grid;place-items:center;width:28px;height:28px;text-decoration:none}
#tlRail .dots .d{width:11px;height:11px;transform:rotate(45deg);border:1.5px solid #ffffffcc;filter:drop-shadow(0 1px 3px #0009);transition:all .25s}
#tlRail .dots a:hover .d{border-color:#e8c977;background:#e8c97755}
#tlRail .dots a.on .d{width:14px;height:14px;background:#e8c977;border-color:#e8c977;box-shadow:0 0 12px #e8c977}
#tlRail .dots .t{position:absolute;left:34px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-family:'Marcellus',serif;font-size:15px;color:#fff;
  text-shadow:0 2px 6px #000;opacity:0;pointer-events:none;transition:all .25s}
#tlRail .dots a:hover .t,#tlRail .dots a:focus-visible .t,#tlRail .dots a.on .t{opacity:1;transform:translate(0,-50%)}
/* over light (cream/parchment) sections */
#tlRail .dots a.lt .d{border-color:#2b2f4ab3;filter:none}
#tlRail .dots a.lt:hover .d{border-color:#9b7a2c;background:#c9a24a44}
#tlRail .dots a.lt.on .d{background:#9b7a2c;border-color:#9b7a2c;box-shadow:0 0 10px #c9a24a99}
#tlRail .dots a.lt .t{color:#2b2f4a;text-shadow:0 1px 0 #fffc}
#tlRail .sns{display:none}

/* inner pages clear the fixed bar */
body.tl-inner{padding-top:64px}

@media (max-width:900px){
  #tlTop{height:56px;padding:0 14px}
  #tlTop .brand img{height:36px}
  #tlTop .pills .pill:not(.keep){display:none}
  body.tl-inner{padding-top:56px}
  /* phones: horizontal dot pill docked at the bottom centre, clear of page content */
  #tlRail{left:50%;right:auto;top:auto;bottom:12px;transform:translate(-50%,16px)}
  #tlRail.show{transform:translate(-50%,0)}
  #tlRail .dots{flex-direction:row;padding:0;gap:2px}
  #tlRail .dots a{width:30px;height:32px}
  #tlRail .dots .d{width:8px;height:8px}
  #tlRail .dots a.on .d{width:10px;height:10px}
  #tlRail .dots .t{display:none}
  body.tl-inner main,body.home-pg main{padding-bottom:60px}
  /* pages with their own fixed bottom bar: lift that bar above the dots, or hide dots */
  body .gcta{bottom:58px!important}
  body.tp #tlRail{display:none}
}


#tlTop .pill .pi{width:15px;height:15px;flex:0 0 auto;margin-right:1px}

/* standalone pages: keep content clear of the dot menu */
@media (min-width:901px){
  body.tl-inner main,body.tl-inner .sb-in,body.tl-inner .dh-in{padding-left:110px!important}
  body.tl-inner #tlRail .dots a.on .t{opacity:0}
  body.tl-inner #tlRail .dots a:hover .t,body.tl-inner #tlRail .dots a:focus-visible .t{opacity:1}
  body.tl-inner #tlRail .dots .t{background:#0b1233f0;color:#fff!important;text-shadow:none!important;padding:3px 10px;border:1px solid #c9a24a77}
}
@media (max-width:900px){
  body.tl-inner main{padding-bottom:110px!important}
  body.tl-inner #tlRail .dots{background:#0b1233e0;padding:2px 8px;border:1px solid #e8c97744;border-radius:999px}
  body.tl-inner #tlRail .dots a .d{border-color:#ffffffcc!important;background:none}
  body.tl-inner #tlRail .dots a.on .d{background:#e8c977!important;border-color:#e8c977!important}
}

/* ---------- phones: hamburger menu replaces the dot menu ---------- */
.hbg,#tlMenu{display:none}
@media (max-width:900px){
  #tlRail{display:none!important}
  #tlTop .pills .umenu,#tlTop .pills .pill.keep{display:none}
  #tlTop .pills{margin-left:auto;margin-right:8px}
  .hbg{display:grid;place-content:center;gap:5px;width:42px;height:42px;border:1px solid #e8c97777;background:#0b1233aa}
  .hbg span{display:block;width:20px;height:2px;background:#e8c977;transition:.25s}
  #tlMenu{display:block;position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility .3s}
  #tlMenu.on{visibility:visible}
  .mm-bg{position:absolute;inset:0;background:#070b22b3;opacity:0;transition:opacity .3s}
  #tlMenu.on .mm-bg{opacity:1}
  .mm-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0b1233,#18245a);border-left:1px solid #e8c97766;
    box-shadow:-20px 0 40px #0008;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow-y:auto;color:#fff}
  #tlMenu.on .mm-panel{transform:none}
  .mm-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #e8c97733}
  .mm-head img{height:36px}
  .mm-x{width:40px;height:40px;font-size:28px;line-height:1;color:#e8c977}
  .mm-user{display:flex;gap:12px;align-items:center;margin:14px;padding:12px;background:#ffffff0d;border:1px solid #e8c97744}
  .mm-user b{display:block;font-family:'Marcellus',serif;font-weight:400;font-size:18px}.mm-user small{color:#e8c977;font-size:12px;font-weight:800}
  .mm-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px}
  .mm-auth .pill{justify-content:center;height:40px;display:inline-flex;align-items:center;font-weight:800;font-size:14px;color:#5a3d06;background:linear-gradient(180deg,#fff6dc,#f0d48c);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
  .mm-auth .pill.rose{color:#fff;background:linear-gradient(180deg,#f3a7c6,#d46f98)}
  .mm-links{display:flex;flex-direction:column;padding:4px 0}
  .mm-links a{display:flex;align-items:center;gap:14px;padding:14px 20px;font-family:'Marcellus',serif;font-size:18px;color:#d8def5;border-bottom:1px solid #ffffff0f}
  .mm-links a i{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid #e8c977aa;flex:0 0 auto}
  .mm-links a.on{color:#e8c977;background:#e8c97712}.mm-links a.on i{background:#e8c977;border-color:#e8c977}
  .mm-out{margin:auto 14px 20px;height:44px;border:1px solid #e98bb088;color:#f3b4cc;font-weight:800}
  body.tl-inner main{padding-bottom:40px!important}
}

/* ---------- top text nav (desktop) + Sign up pill ---------- */
#tlTop .tnav{display:flex;gap:4px;margin:0 auto 0 34px}
#tlTop .tnav a{position:relative;padding:8px 12px;font-family:'Marcellus',serif;font-size:16px;color:#d8def5;text-shadow:0 1px 4px #0008;transition:color .2s}
#tlTop .tnav a::after{content:"";position:absolute;left:50%;bottom:2px;width:6px;height:6px;background:#e8c977;transform:translateX(-50%) rotate(45deg) scale(0);transition:transform .2s}
#tlTop .tnav a:hover,#tlTop .tnav a.on{color:#e8c977}
#tlTop .tnav a.on::after,#tlTop .tnav a:hover::after{transform:translateX(-50%) rotate(45deg) scale(1)}
#tlTop .pill.su{color:#5a3d06}
@media (max-width:1180px){#tlTop .tnav{margin-left:18px}#tlTop .tnav a{padding:8px 8px;font-size:15px}}
@media (max-width:1040px){#tlTop .tnav a[href="download.html"]{display:none}}
@media (max-width:900px){#tlTop .tnav{display:none}}