/* layout.css — floating pill navbar, dropdown, mobile drawer, footer, watermark, toast. */

/* ---------- Header / floating pill nav ---------- */
header.site{position:sticky;top:0;z-index:60;padding:1.1rem 0}
.navpill{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.5rem .55rem .5rem 1.4rem;box-shadow:var(--shadow-sm)}
.navpill .logo img{height:30px;width:auto;display:block}
nav.main{display:flex;align-items:center;gap:.15rem;margin:0 auto}
nav.main a,.droptoggle{font-family:var(--font);font-size:.92rem;font-weight:500;color:var(--navy);
  background:none;border:0;cursor:pointer;padding:.55rem .85rem;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;gap:.3rem;transition:.15s;line-height:1}
nav.main a:hover,.droptoggle:hover{background:var(--bg-soft)}
nav.main a.on,.droptoggle.on{font-weight:600}
nav.main a.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.get{padding:.6rem .7rem .6rem 1.1rem}
.hamb{display:none;background:none;border:0;color:var(--navy);cursor:pointer;padding:.4rem}

/* dropdown */
.hasdrop{position:relative}
.dropmenu{position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:180px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:.4rem;opacity:0;visibility:hidden;transition:.18s;z-index:5}
.hasdrop:hover .dropmenu,.hasdrop.open .dropmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropmenu a{display:block;padding:.6rem .8rem;border-radius:8px;font-size:.9rem;color:var(--navy)}
.dropmenu a:hover{background:var(--bg-soft)}

/* mobile drawer */
.mbackdrop{position:fixed;inset:0;background:rgba(11,11,36,.5);opacity:0;visibility:hidden;transition:.25s;z-index:70}
.mbackdrop.open{opacity:1;visibility:visible}
.mdrawer{position:fixed;inset:0;background:#fff;transform:translateX(100%);transition:.3s cubic-bezier(.4,0,.2,1);
  z-index:80;display:flex;flex-direction:column;gap:.2rem;padding:5rem 1.5rem 2rem}
.mdrawer.open{transform:none}
.mdrawer>a:not(.get),.mdrawer .msub{font-size:1.15rem;font-weight:500;color:var(--navy);padding:1rem .4rem;
  border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;
  text-align:left;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer}
.mdrawer .msub svg{transition:.2s}.mdrawer .msub.open svg{transform:rotate(180deg)}
.msubmenu{display:none;flex-direction:column;padding:.2rem 0 .2rem 1rem}
.msubmenu.open{display:flex}
.msubmenu a{padding:.7rem .4rem;color:var(--muted);font-size:1rem}
.mdrawer .get{margin-top:1.5rem;justify-content:center;font-size:1rem;padding:.9rem 1.2rem}
.mclose{position:absolute;top:1.4rem;right:1.4rem;background:var(--bg-soft);border:0;border-radius:50%;
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;color:var(--navy)}

/* ---------- Footer ---------- */
footer.site{position:relative;background:#fff;border-top:1px solid var(--line);margin-top:5rem;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1.5fr 1.5fr;gap:2rem;padding:3.5rem 0 2rem}
.fbrand img{height:36px;width:auto;margin-bottom:1rem}
.fcopy{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted-2)}
.fdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:1.2rem}
footer.site h4{font-size:.78rem;letter-spacing:.11em;color:var(--navy);font-weight:600;margin-bottom:1.1rem}
.fcol a{display:block;color:var(--muted);padding:.35rem 0;font-size:.92rem;transition:.15s}
.fcol a:hover{color:var(--navy)}
.faddr{font-size:.92rem;color:var(--muted);max-width:26ch;margin-top:.35rem;line-height:1.5}
.fwatermark{font-family:var(--head);font-weight:800;text-align:center;color:rgba(11,11,36,.055);
  font-size:clamp(3.5rem,17vw,14rem);line-height:.8;letter-spacing:.02em;user-select:none;
  padding:0 1rem 1.2rem;white-space:nowrap;overflow:hidden}

/* ---------- Toast + scroll-top ---------- */
.toast{position:fixed;top:1.4rem;left:50%;transform:translate(-50%,-160%);z-index:90;
  display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:var(--radius-pill);padding:.7rem 1.2rem .7rem .7rem;
  font-weight:500;color:var(--navy);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.toast.show{transform:translate(-50%,0)}
.tcheck{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff}
.scrolltop{position:fixed;right:1.3rem;bottom:1.4rem;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(10px);transition:.25s;z-index:40;box-shadow:var(--shadow)}
.scrolltop.show{opacity:1;visibility:visible;transform:none}