/* tappon.bio homepage header (2026-11-01, views/home/nav.php): lime trial band + menu + sign-in card + phone drawer */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* band + menu stick together; the old sticky .hn is now inside .tn */
.tn{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:61;background:var(--vl)}
.tn .hn{position:relative;top:auto;z-index:auto;gap:26px}
section[id],[id=faq]{scroll-margin-top:130px}

.band{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));background:var(--vl);color:#0B0C1A;text-decoration:none;font:500 14px/1.3 var(--f);position:relative;overflow:hidden;text-align:center}
.band b{font-weight:700}
.band svg{flex:none;width:16px;height:16px}
.band .tn-sp{animation:tn-spin 6s linear infinite}
.band .tn-ar{animation:tn-nud 1.6s ease-in-out infinite}
.band::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:tn-shine 3.2s ease-in-out infinite;pointer-events:none}
.band:hover b{text-decoration:underline;text-underline-offset:3px}
@keyframes tn-spin{to{transform:rotate(360deg)}}
@keyframes tn-nud{50%{transform:translateX(3px)}}
@keyframes tn-shine{0%,55%{left:-80px}100%{left:110%}}

.hn a.k{font-weight:300;font-size:16.5px;color:#2a2a28;position:relative;padding:6px 0}
.hn a.k::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vc);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.hn a.k:hover::after,.hn a.k:focus-visible::after{transform:scaleX(1)}

.tn-login{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 14px;border-radius:8px;border:0;background:none;color:var(--fg);font:500 17px var(--f);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.tn-login svg{width:26px;height:26px;flex:none}
.tn-login:hover{background:#ecebe6}.tn-login:active{background:#e2e1db}
.tn-login[aria-expanded=true]{color:var(--vc)}
.tn-burger{display:none;width:48px;height:48px;border:0;background:none;border-radius:8px;place-items:center;cursor:pointer;color:var(--fg);padding:0}
.tn-burger svg{width:27px;height:27px}
.tn-burger path{transition:transform .2s,opacity .2s;transform-box:view-box;transform-origin:12px 12px}
.tn-burger[aria-expanded=true] .tn-b1{transform:rotate(45deg) translateY(5px)}
.tn-burger[aria-expanded=true] .tn-b2{opacity:0}
.tn-burger[aria-expanded=true] .tn-b3{transform:rotate(-45deg) translateY(-5px)}
.tn-burger:active{background:#ecebe6}
.tn-burger[aria-expanded=true]{color:var(--vc)}
.hn .lg-nav{margin-left:-6px}

/* sign-in card: popover on desktop, bottom sheet on phones */
.tn-card{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:calc(100% + 4px);width:372px;max-width:calc(100vw - 32px);background:#fff;color:#141414;border-radius:20px;box-shadow:0 24px 60px -20px rgba(11,12,26,.35),0 0 0 1px rgba(11,12,26,.06);padding:22px;z-index:62;font-family:var(--f);transform-origin:top right;animation:tn-in .18s ease-out}
@keyframes tn-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.tn-card h2{margin:0 0 2px;font:600 21px/1.2 var(--f);letter-spacing:-.01em}
.tn-card .sub{margin:0 0 16px;color:#5E5E5A;font-size:14px}
.tn-card .grab{display:none}
.tn-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;background:none;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:#5E5E5A}
.tn-x:hover{background:#F1F2FA;color:#141414}.tn-x svg{width:20px;height:20px}
.tn-card .tabs{display:grid;grid-template-columns:1fr 1fr;background:#F1F2FA;border-radius:12px;padding:4px;margin-bottom:14px}
.tn-card .tabs button{border:0;background:none;padding:8px;border-radius:9px;font:600 13.5px var(--f);color:#5E5E5A;cursor:pointer}
.tn-card .tabs button[aria-selected=true]{background:#fff;color:#141414;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tn-card .f{display:grid;gap:10px}
.tn-card .f label{display:grid;gap:5px;font-size:13px;font-weight:600}
.tn-card .f input[type=email],.tn-card .f input[type=password]{height:46px;border:1.5px solid #D6D5D0;border-radius:12px;padding:0 14px;font:400 16px var(--f);color:#141414;background:#fff;width:100%}
.tn-card .f input:focus{outline:none;border-color:#2E33F0;box-shadow:0 0 0 3px #2E33F026}
.tn-card .pw{position:relative}
.tn-card .pw a{position:absolute;right:0;top:0;font-size:12.5px;font-weight:500;color:#2E33F0;text-decoration:none}
.tn-card .rm{display:flex!important;align-items:center;gap:8px;font-weight:500!important;color:#3d3d3a}
.tn-card .rm input{width:18px;height:18px;accent-color:#2E33F0;margin:0}
.tn-card .go{height:48px;border:0;border-radius:12px;background:#141414;color:#fff;font:600 15px var(--f);cursor:pointer;margin-top:4px}
.tn-card .go:hover{background:#000}.tn-card .go:active{transform:scale(.99)}
.tn-card .tn-note{font-size:12.5px;color:#5E5E5A;margin:2px 0 0;display:flex;gap:6px;align-items:flex-start}
.tn-card .tn-note svg{flex:none;width:15px;height:15px;margin-top:1px;color:#2E33F0}
.tn-card .tp-rc-note{margin:0;font-size:11px}
.tn-card .or{border-top:1px solid #ecebe6;margin:16px -22px 0;padding:14px 22px 0;font-size:14px;color:#5E5E5A;text-align:center}
.tn-card .or a{color:#2E33F0;font-weight:600;text-decoration:none}

.tn-scrim{position:fixed;inset:0;background:rgba(11,12,26,.45);z-index:59;animation:tn-fd .2s}
@keyframes tn-fd{from{opacity:0}}

/* phone drawer */
.tn-drawer{position:fixed;left:0;right:0;bottom:0;top:var(--tn-h,116px);background:var(--bg);z-index:58;padding:8px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;overflow-y:auto;animation:tn-fd .18s}
.tn-drawer a.m{display:flex;align-items:center;justify-content:space-between;padding:17px 2px;border-bottom:1px solid var(--line);font:300 24px var(--f);letter-spacing:-.01em;color:var(--fg);text-decoration:none}
.tn-drawer a.m svg{width:20px;height:20px;color:var(--muted)}
.tn-drawer .bot{margin-top:auto;padding-top:20px;display:grid;gap:10px}
.tn-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:12px;border:0;background:var(--vc);color:#fff;font:600 16px var(--f);text-decoration:none;cursor:pointer}
.tn-btn small{font-weight:500;opacity:.75;font-size:13px}
.tn-btn.ghost{background:#fff;color:var(--fg);border:1.5px solid var(--line)}
.tn-btn svg{width:22px;height:22px}
.tn-drawer .lg{justify-self:center;margin-top:6px}
html.tn-lock{overflow:hidden}
.tn-card[hidden],.tn-card .f[hidden],.tn-drawer[hidden],.tn-scrim[hidden]{display:none!important}

@media (max-width:820px){
  .tn .hn{gap:2px;padding-top:10px;padding-bottom:10px}
  .tn .hn .wm{font-size:26px}
  .hn .lg-nav{display:none}
  .tn-login span{display:none}
  .tn-login{width:48px;padding:0;justify-content:center}
  .tn-login svg{width:27px;height:27px}
  .tn-burger{display:grid}
  .band .tn-bl{display:none}
  .tn-card{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;border-radius:24px 24px 0 0;padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));transform-origin:bottom;animation:tn-up .25s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto}
  .tn-card .grab{display:block;width:40px;height:5px;border-radius:9px;background:#d9d8d2;margin:0 auto 14px}
  .tn-card .or{margin:16px -20px 0;padding:14px 20px 0}
  .tn-x{top:16px}
}
@media (min-width:821px){.tn-drawer{display:none!important}}
@media (max-width:380px){.band .tn-bs{display:none}}
@keyframes tn-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.band .tn-sp,.band .tn-ar,.band::after,.tn-card,.tn-drawer,.tn-scrim{animation:none!important}.tn-burger path,.hn a.k::after{transition:none}}